Typedef•16mo ago

useContext not Invalidating

What are the possible mistakes if useContext wont invalidate when doing the following:

const utils = trpc.useContext();
const user = trpc.user.getUser.useQuery();
const updateUser = trpc.user.updateUser.useMutation({
  onSuccess: () => {
    utils.user.getUser.invalidate();
  }
});

const utils = trpc.useContext();
const user = trpc.user.getUser.useQuery();
const updateUser = trpc.user.updateUser.useMutation({
  onSuccess: () => {
    utils.user.getUser.invalidate();
  }
});

Used to work before but stopped working when I turned my entire repo to turborepo.

8 Replies

Alex / KATT 🐱•16mo ago

could be that you should await the invalidate to the mutation stays loading until invalidation is complete

const updateUser = trpc.user.updateUser.useMutation({
  onSuccess: async () => {
    await utils.user.getUser.invalidate();
  }
});

const updateUser = trpc.user.updateUser.useMutation({
  onSuccess: async () => {
    await utils.user.getUser.invalidate();
  }
});

TypedefOP•16mo ago

Still doesnt work hmm but if I do user.refetch() it works I can confirm that it calls onSuccess after but not sending a query at all Any ideas @alexkatt Still not working ..

Alex / KATT 🐱•16mo ago

You can do this too, that's what I do https://trpc.io/docs/client/react/useContext#invalidate-full-cache-on-every-mutation

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

TypedefOP•16mo ago

Hmm, I really dont want to invalidate eveything on any onSuccess mutations Any ideas on why it doesnt work?

Alex / KATT 🐱•16mo ago

Idk maybe you have to react query providers or something

TypedefOP•16mo ago

im using nextjs, my app is wrapped with withTrpc() Okay weird, I tried doing an override:

overrides: {
    useMutation: {
      async onSuccess(opts) {
        await opts.originalFn();
        await opts.queryClient.invalidateQueries();
      },
    },
  },

overrides: {
    useMutation: {
      async onSuccess(opts) {
        await opts.originalFn();
        await opts.queryClient.invalidateQueries();
      },
    },
  },

it invalidated all the cached queries. Still lost why it wont invalidte with const utils = trpc.useContext();

RealityShift•11mo ago

@Typedef did yoy ever find a solution to this? I'm experiencing the same issue.

TypedefOP•11mo ago

Yep check if you have another library using tanstack react query