optimistic-gold

Invalidate didnt work

I have mutation

  const { mutate, isPending } = useMutation({
    mutationFn: (values: SignInUser) => signIn(values),
    onSuccess: async (data) => {
      if (data.ok) {
        await queryClient.invalidateQueries({
          queryKey: ["userSession"],
        });
        await queryClient.refetchQueries({
          queryKey: ["userSession"],
        });
        router.push("/");
      }
    },
  });

  const { mutate, isPending } = useMutation({
    mutationFn: (values: SignInUser) => signIn(values),
    onSuccess: async (data) => {
      if (data.ok) {
        await queryClient.invalidateQueries({
          queryKey: ["userSession"],
        });
        await queryClient.refetchQueries({
          queryKey: ["userSession"],
        });
        router.push("/");
      }
    },
  });

and i have in navbar query

  const { data: userSession = null, ...rest } = useQuery({
    queryKey: ["userSession"],
    queryFn: () => session(),
    gcTime: cacheTime,
  });

  const { data: userSession = null, ...rest } = useQuery({
    queryKey: ["userSession"],
    queryFn: () => session(),
    gcTime: cacheTime,
  });

after successfully login my userSession is still null and i must refresh page by f5

14 Replies

exotic-emerald•2y ago

Where is queryClient coming from?

optimistic-gold•2y ago

It's not the issue, but you don't need to invalidate and refetch it'll refetch for you.

The invalidateQueries method can be used to invalidate and refetch single or multiple queries in the cache based on their query keys or any other functionally accessible property/state of the query. By default, all matching queries are immediately marked as invalid and active queries are refetched in the background.

optimistic-goldOP•2y ago

its issue, invalidate must fetch query again but it didnt do that

optimistic-goldOP•2y ago

https://github.com/SzymonG110/jobspot/blob/master/src/features/core/components/Providers.tsx (exported, old files in github)

GitHub

jobspot/src/features/core/components/Providers.tsx at master · Szym...

Contribute to SzymonG110/jobspot development by creating an account on GitHub.

optimistic-gold•2y ago

Which is why vossmalte asked you where your queryClient came from. Calling invalidate and then refetch means you'd probably have two network fetches is all I was commenting on, just a performance improvement

optimistic-goldOP•2y ago

if i have only invalidate it still didnt work

optimistic-gold•2y ago

What vossamalte was eluding to was a wrong queryClient reference. If somehow you are creating a new QueryClient() and it isn't stable, then you'd be calling invalidate on a wrong client

optimistic-goldOP•2y ago

so what client i must use? const queryClient = useQueryClient() this?

optimistic-gold•2y ago

Probably, yes

optimistic-goldOP•2y ago

ok, thx @troywoystill doesnt work

optimistic-gold•2y ago

I know invalidateQueries most certainly does work because we use it in our app, but I can't look through that entire repo to debug this. Maybe trying debugger or console.log to check the queryClient reference you're trying to call invalidate on. The devtools are also a huge help: https://tanstack.com/query/latest/docs/framework/react/devtools

Devtools | TanStack Query React Docs

Wave your hands in the air and shout hooray because React Query comes with dedicated devtools! 🥳 When you begin your React Query journey, you'll want these devtools by your side. They help visualize all the inner workings of React Query and will likely save you hours of debugging if you find yourself in a pinch!

optimistic-goldOP•2y ago

https://github.com/SzymonG110/jobspot/blob/e506f581415bdd1fe207a7f52ad8e5ebc218ed99/src/app/auth/login/page.tsx#L18

GitHub

jobspot/src/app/auth/login/page.tsx at e506f581415bdd1fe207a7f52ad8...

Contribute to SzymonG110/jobspot development by creating an account on GitHub.

optimistic-goldOP•2y ago

nevermind i do that i can close this thx guys

Gaming

Programming

Invalidate didnt work

Did you find this page helpful?