invalidate query

whenever i add a user my user list is not updating

 const mutation = trpc.user.addUser.useMutation();

  async function onSubmit(values: z.infer<typeof formSchema>) {
    await mutation.mutateAsync(values);
    router.push("/admin/all-employees");
  }

 const mutation = trpc.user.addUser.useMutation();

  async function onSubmit(values: z.infer<typeof formSchema>) {
    await mutation.mutateAsync(values);
    router.push("/admin/all-employees");
  }

does not get updated

 const { data: users, isLoading } = trpc.user.getUsers.useQuery(undefined, {
    refetchOnMount: false,
    refetchOnReconnect: false,
  });

 const { data: users, isLoading } = trpc.user.getUsers.useQuery(undefined, {
    refetchOnMount: false,
    refetchOnReconnect: false,
  });

what i have tried :

const mutation = trpc.user.addUser.useMutation(["addUser"]);

const mutation = trpc.user.addUser.useMutation(["addUser"]);

searched for invalidate query but couldn't know how to setup a mutation key and invalidate it caused an error

Type 'string[]' has no properties in common with type 'UseTRPCMutationOptions<{ name: string; email: string; username: string; password: string; role: string; }, TRPCClientErrorLike<{ input: { name: string; email: string; username: string; password: string; role: string; }; output: { user: { name: string; ... 9 more ...; | undefined;...'.ts(2559)

Type 'string[]' has no properties in common with type 'UseTRPCMutationOptions<{ name: string; email: string; username: string; password: string; role: string; }, TRPCClientErrorLike<{ input: { name: string; email: string; username: string; password: string; role: string; }; output: { user: { name: string; ... 9 more ...; | undefined;...'.ts(2559)

9 Replies

FluX•2w ago

You could call refetch after you've awaited your mutation. const { refetch } = trpc.user.getUsers.useQuery()

codecret | Software EngineerOP•2w ago

thanks its working, actually i used to do invalidate query when using useQuery by setting a mutation key and invalidate my query whenever any update changes

Nick•7d ago

The correct way is indeed to call invalidate() on your query(s)

Nick•7d ago

you want useUtils: https://trpc.io/docs/client/react/useUtils

useUtils | tRPC

useUtils 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 h...

codecret | Software EngineerOP•7d ago

that's true , thanks Nick !

const mutationAdd = trpc.user.addUser.useMutation({
    onSuccess: () => {
      utils.user.getUsers.invalidate();
      console.log("invalidate getUsers after adding");
    },
  });

async function onSubmit(values: z.infer<ReturnType<typeof formSchema>>) {
   
    await mutationAdd.mutateAsync(payload);
    router.push("/admin/all-employees");
  }

const mutationAdd = trpc.user.addUser.useMutation({
    onSuccess: () => {
      utils.user.getUsers.invalidate();
      console.log("invalidate getUsers after adding");
    },
  });

async function onSubmit(values: z.infer<ReturnType<typeof formSchema>>) {
   
    await mutationAdd.mutateAsync(payload);
    router.push("/admin/all-employees");
  }

actually invalidating query is not updating my user table

Nick•7d ago

That’s a sign something else is wrong, in this case possible onsuccess never fires because you navigate before it has a chance to finish Invalidate is a promise, I’d recommend awaiting it and navigating right after

codecret | Software EngineerOP•7d ago

actually even after awaiting the invalidation, it's still not updated , i wonder if it has anything related to the query which is being invalidated (this one)

const { data: users, isLoading } = trpc.user.getUsers.useQuery(undefined, {
    refetchOnMount: false,
    refetchOnReconnect: false,
  });

const { data: users, isLoading } = trpc.user.getUsers.useQuery(undefined, {
    refetchOnMount: false,
    refetchOnReconnect: false,
  });

however using utils.user.getUsers.refetch() is working idk why and how

Nick•7d ago

Invalidate doesn’t actually do the refetch, it tells RQ that the query is stale and then RQ will refresh in a new cycle If it doesn’t work it implies some weird timing thing going on with your navigation (try commenting that out) I’ve seen a few situations invalidation can break down but it’s always a legit bug in userland

codecret | Software EngineerOP•7d ago

actually i wanted to comment it out , but didnt know how am i going to check if the data , getting invalidated or not , i placed the same table in the same page and the problem get fixed but i still want to navigate to the other page

invalidate query

Did you find this page helpful?