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

fascinating-indigo•15mo ago

Where is queryClient coming from?

extended-salmon•15mo 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.

national-goldOP•15mo ago

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

national-goldOP•15mo 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.

extended-salmon•15mo 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

national-goldOP•15mo ago

if i have only invalidate it still didnt work

extended-salmon•15mo 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

national-goldOP•15mo ago

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

extended-salmon•15mo ago

Probably, yes

national-goldOP•15mo ago

ok, thx @troywoystill doesnt work

extended-salmon•15mo 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!

national-goldOP•15mo 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.

national-goldOP•15mo ago

nevermind i do that i can close this thx guys

Gaming

Programming

Invalidate didnt work

Did you find this page helpful?