orjdev / solid-trpc Goto Github PK

I have been trying to see what is wrong with the internal getArrayQueryKey and I think it might be a bug potentially.

Trying to invalidate a query does not work as expected. Has this been tested?

I set the queryKey of a query to "getUsers" and using

const utils = trpc.useContext()

utils.invalidate(["getUsers"]) 

Thank you so much for your help!

Hey, could we add license to the project so people can legally use it?

Cheers!

My intellisense in vs code is not working and keeps loading.

My configuration is simply the get started with a monorepo where my client imports the approuter type. There is something that might be looping when put together solidquery. However, for some reason, even just the server file which is the standard trpc hello world struggles with inferring types.

Would appreciate any help thank you!

server app router file below

import { inferAsyncReturnType, initTRPC } from '@trpc/server';
import * as trpcExpress from '@trpc/server/adapters/express';
import { z } from 'zod';

export const createContext = ({
  req,
  res,
}: trpcExpress.CreateExpressContextOptions) => {
  const getUser = () => {
    if (req.headers.authorization !== 'secret') {
      return null;
    }
    return {
      name: 'alex',
    };
  };

  return {
    req,
    res,
    user: getUser(),
  };
};
type Context = inferAsyncReturnType<typeof createContext>;

const t = initTRPC.context<Context>().create();

export const appRouter = t.router({
  hello: t.procedure
    .input(z.object({ test: z.string() }))
    .query(({ input, ctx }) => {
      return `hello ${input ?? ctx.user?.name ?? 'world'}`;
    }),
});

export type AppRouter = typeof appRouter;

client side file

import type { AppRouter } from '@flowy/server/src/router';
import { createTRPCSolid } from 'solid-trpc';
import { httpBatchLink } from '@trpc/client';
import { QueryClient } from '@tanstack/solid-query';

export const trpc = createTRPCSolid<AppRouter>();
export const client = trpc.createClient({
  links: [
    httpBatchLink({
      url: 'http://localhost:8080/trpc',
    }),
  ],
});
export const queryClient = new QueryClient();

According to Aryan (the creator and maintainer of tanstack solid query) SSR will be supported in tanstack query v5.

Once its released ssr support will be added to solid trpc.

Hi, great lib! I tried to use this library for a hobby love project and its great. Working fine, i just have one concern. When i update the state with useContext in a mutation onSuccess, i noticed the whole dom is re rendering. Every element on the page. The body will emptied and after rebuild the whole again. It is normal? I think something happens with the contexts or i don't know. I use the solid start with trpc, prisma and tailwindcss.

title

Hey, in a project created with create jd app ([email protected]) —

Passing anything as the second argument causes a crash.

Following the example from the Readme, it appears that there is no support for the onSuccess method on the useQuery options.

Other properties, such as refetchOnMount, work just fine:

Is there an error in my usage here? Or perhaps an issue with solid-query?

I am developing an app with Electron (using electron-vite). It's always showing this error

Here's the repo: https://github.com/zihan-ch/zhim
tRPC client: https://github.com/zihan-ch/zhim/blob/main/src/renderer/src/lib/trpc.ts
main.ts: https://github.com/zihan-ch/zhim/blob/main/src/renderer/src/main.tsx

When I use solid devtools to inspect the app, the context seems to be all right:

I assume that this is an error inside solid-trpc; it might have done some special processes that make the context disappeared.

ps: The app runs well without solid-trpc (the original trpc client instead).

Hello,

For context I have a trpc route which allows me to list products based on a catalog id.

My problem occurs when I change catalog, the request to list the products is well done, but the catalogId in the input of the request is unchanged. So I always get the same product list

I don't have this problem when I use createQuery, and when I call the query directly with @tanstack/solid-query, can you guide me on this problem?

Here are the portions of code concerned on the server/client side

/// Server

.query('products', {
    input: z.object({ catalogId: z.string().uuid(), cursor: z.string().optional() }),
    async resolve({ ctx, input }) {
        const products = await new ProductService().listProductsByCatalog(ctx, input.catalogId)
        if (products.isErr()) {
            return {
                error: products.error.json()
            }
        }

        return {
            data: products.value.map(mapProduct),
            cursor: {
                next: ''
            }
        }
    }
})

/// Client

const catalogRouteData = (props: RouteDataFuncArgs) => {
  const catalogId = () => props.params.catalogId

  const products = trpc.createInfiniteQuery(() => ['catalogs.products', { catalogId: catalogId() }], {
    getNextPageParam: ({ cursor }) => cursor?.next,
  })

  return {
    products,
  }
}

I thank you in advance for your help.

How to reproduce

1. Clone SolidJS template app
2. Follow solid-trpc installation steps
3. use a trpc query inside a component

Hello! Would love an example of how to access the cookies in SSR. Currently trying to pass this into httpBatchLink but the context is always an empty object from solid-start. Thanks!

async headers() {
        if (AppConfig.isServer) {
          const context = useRequest();
          const token = await getToken(context.request);
          return {
            Authorization: `Bearer ${token ?? ""}`,
          };
        } else {
          const token = ClientCookieManager.getToken();
          return {
            Authorization: `Bearer ${token ?? ""}`,
          };
        }
      },

Hi,

I am trying to use this in my solid-js application, I am getting the following exception while calling my hook for getting the data

query.ts:359 As of v4, queryKey needs to be an Array. If you are using a string like 'repoData', please change it to an Array, e.g. ['repoData']

and My function is
const res = trpc.terms.getTerms.useQuery();

Hello!

I've been experimenting with this using create-jd-app, (wonderful work!) and it seems I've hit a bit of an issue.

I'm using v10 (0.0.7-beta.1).

I have the following code in a component:

  const query = trpc.account.findAll.useQuery();
  const context = trpc.useContext();
  const mutation = trpc.account.create.useMutation({
    onSuccess() {
      context.account.findAll.invalidate();
    },
  });

When running the mutation, the call to invalidate (or refetch) don't trigger a refetch of the account.findAll query as I'd hope.

My server code:

import { z } from 'zod';
import { procedure, router } from '../utils';

export default router({
  create: procedure
    .input(
      z.object({
        username: z.string().min(1),
      })
    )
    .mutation(({ input, ctx }) => {
      return ctx.prisma.account.create({ data: input });
    }),
  findAll: procedure.query(({ ctx }) => ctx.prisma.account.findMany()),
});

Hello 👋 Thank you for your package, it's awesome to use!

Trpc exports a react query helper that returns the query keys for a query. https://trpc.io/docs/client/react/getQueryKey How can I do this with Solid and trpc? 🧐

This line causes eslint warning:

const [count, setCount] = createSignal("");
trpc.xyz.useQuery(() => Number(count()))

warning  This function should be passed to a tracked scope (like createEffect) or an event handler because it contains reactivity. Details: https://github.com/solidjs-community/eslint-plugin-solid/blob/main/docs/reactivity.md  solid/reactivity

And it points to the arrow function i used in useQuery. The funny thing is this works perfectly and do exactly what i want, its update when the count signal changes so i usually just ignore this warnings but somehow its bothers me. Can you give some examples how to do this right or the eslint plugin needs some update?

Thanks :)

Btw Great lib! I love it.