Theo's Typesafe Cult•2y ago

Are query keys supported in tRPC?

I'm getting an error when trying to use one on the query as per the react-query guide (https://tanstack.com/query/v4/docs/react/guides/query-keys). The trpc docs 404 which is odd https://trpc.io/docs/query-invalidation

14 Replies

Unknown User•2y ago

Message Not Public

scinorandex•2y ago

you probably want to pass undefined as the first parameter to useQuery the 2nd parameter is for react-query options

YoersOP•2y ago

Thanks I was being stupid there. Even with undefined my query doesn't re-fetch when my mutation onSuccess handler gets called (which I have confirmed). My query look as such on backend

 getAllWidgets: protectedProcedure.query(async ({ ctx }) => {
    // ... body

 getAllWidgets: protectedProcedure.query(async ({ ctx }) => {
    // ... body

With the query in the front-end looking like this (they are in 2 separate react components, in same file)

  const widgetQuery = trpc.auth.getAllWidgets.useQuery(undefined, {
    queryKey: ["auth.getAllWidgets", undefined],
  });

  const widgetQuery = trpc.auth.getAllWidgets.useQuery(undefined, {
    queryKey: ["auth.getAllWidgets", undefined],
  });

And mutation -

function CreateWidget({}: Props) {
  const mutation = trpc.auth.createWidget.useMutation();
  const queryClient = useQueryClient();

  const handleSave = (event: any) => {
    mutation.mutate(
      {
        name: widgetName,
      },
      {
        onSuccess: () => {
          queryClient.invalidateQueries({

            // If I just just `queryKey: ["auth.getAllWidgets"]` I get the error `Type '["auth.getAllWidgets"]' is not assignable to type '["auth.getAllWidgets", void | undefined]'.` 

            queryKey: ["auth.getAllWidgets", undefined],
          });
        },
      }
    );
  };

function CreateWidget({}: Props) {
  const mutation = trpc.auth.createWidget.useMutation();
  const queryClient = useQueryClient();

  const handleSave = (event: any) => {
    mutation.mutate(
      {
        name: widgetName,
      },
      {
        onSuccess: () => {
          queryClient.invalidateQueries({

            // If I just just `queryKey: ["auth.getAllWidgets"]` I get the error `Type '["auth.getAllWidgets"]' is not assignable to type '["auth.getAllWidgets", void | undefined]'.` 

            queryKey: ["auth.getAllWidgets", undefined],
          });
        },
      }
    );
  };

Anyone have any ideas, I must be missing some thing here

Neto•2y ago

using trpc with react query the wrapper will define the keys and such you can use the react query devtools to check them if you want

Neto•2y ago

if you want to directly invalidate something

YoersOP•2y ago

Thanks so much @Neto I managed to get things working! this would have been really hard to figure out on my own, is there docs anywhere I missed? It would be cool if I could use the queryKey as it makes things a little more declarative, when checking the dev-tools (in screen shot) I can see trpc defined the queryKey for me, I thought I might be able to do the following -

  const utils = trpc.useContext();
  const handleSave = (event: any) => {
    mutation.mutate(
      {
        name: widgetName,
      },
      {
        onSuccess: () => {
          // Works!
          utils.auth.getAllWidgets.invalidate();
         
          // Doesn't work..
          queryClient.invalidateQueries({
            queryKey: ["getAllWidgets", "auth"],
          });
        },
      }
    );
  }

  const utils = trpc.useContext();
  const handleSave = (event: any) => {
    mutation.mutate(
      {
        name: widgetName,
      },
      {
        onSuccess: () => {
          // Works!
          utils.auth.getAllWidgets.invalidate();
         
          // Doesn't work..
          queryClient.invalidateQueries({
            queryKey: ["getAllWidgets", "auth"],
          });
        },
      }
    );
  }

Neto•2y ago

on docs

Neto•2y ago

https://trpc.io/docs/useContext#query-invalidation

useContext | tRPC

useContext is a hook that gives you access to helpers that let you manage the cached data of the queries you execute via @trpc/react-query. These helpers are actually thin wrappers around @tanstack/react-query's queryClient methods. If you want more in-depth information about options and usage patterns for useContext helpers than what we provide...

Neto•2y ago

with trpc you shouldnt care about the query keys as the wrapper is taking care of it on v9 was something to worry about, not on v10

YoersOP•2y ago

Ok yeah, I see now. I guess auth.invalidate or say auth.getAllWidgets.invalidate is exactly the same as the query syntax really

Neto•2y ago

const helloNoArgs = trpc.useQuery(['hello']); // v9

const helloNoArgs = trpc.hello.useQuery(); // v10

const helloNoArgs = trpc.useQuery(['hello']); // v9

const helloNoArgs = trpc.hello.useQuery(); // v10

YoersOP•2y ago

I got hung up on this broken link... https://trpc.io/docs/query-invalidation But yeah helps a lot, much appreciated 🙇‍♂️

Neto•2y ago

Gaming

Programming

Are query keys supported in tRPC?