Refetching or invalidating Query from other Page/ Component

[bennik88]

Question

How do I update or invalidate a Query from a different page without additional state management libraries like useContext or Jotai?

Problem

I'm having for example two pages. Home and Contacts both are their own components under different URLs.
Home has getNewestContacts which is getting the 5 newest contacts on load. I don't want them to update on Mount neighter need they be updated on window focus so I disable that. But I want them to update when changing the contacts mutation on the other page.

  const {
    isLoading,
    error,
    data: newestContacts,
  } = useQuery(
    ["newestContacts", currentUser],
    () => getNewestContacts(currentUser?.id),
    {
      // How long to keep fetched data in cache
      // cacheTime: 360000,
      // How long to keep the cached data without refetching it even on page change
      // staleTime: 36000,
      enabled: !!currentUser?.id,
      refetchOnMount: false,
      refetchOnWindowFocus: false,
    }

Now I have the Contacts page with getContactsCount and deleteContact. Which are working great by themself. The only thing that is now working is invalidating newestContacts. I tried using queryClient.invalidateQueries(["newestContacts"]);. I think it would work if I use the context API and pass it to Home and then put it into the dependencies array but I guess this is totally missing the point of using TanStack Query. I've also tried to use "contacts" as a dependency sting in ["newestContacts", "contacts", currentUser], which also didn't work. I coun't find an example for this in the docs.

  const {
    isLoading,
    isError,
    error,
    data: contacts,
    isFetching,
    isPreviousData,
  } = useQuery(
    ["contacts", [currentPage, searchText, contactsSorter]],
    () => getContacts(currentPage),
    {
      keepPreviousData: true,
    }
  );

  const {
    isLoading: contactsTotalIsLoading,
    isError: contactsTotalIsError,
    error: contactsTotalError,
    data: contactsTotal,
  } = useQuery(["contactsTotal"], getContactsCount);


  const mutationDelete = useMutation(deleteContact, {
    onSuccess: () => {
      queryClient.invalidateQueries(["contacts"]);
      queryClient.invalidateQueries(["contactsTotal"]);
      queryClient.invalidateQueries(["newestContacts"]);
    },
  });

Package and OS versions:
OS: MacOS
"next": "^12.3.0",
"@tanstack/react-query": "^4.1.0",

[TkDodo]

queryClient.invalidateQueries(["newestContacts"]) should work. If the query is not active, it will only be marked as stale, which means it will be refetched the next time it is used (which is, when you go back to the Home page. The default refetchType for invalidateQueries is 'active'

If you want to refetch it regardless, you can do:

queryClient.invalidateQueries(["newestContacts"], { refetchType: 'all' })
queryClient.refetchQueries(["newestContacts"])

either one of those calls will refetch those right away.

[TkDodo]

nope. Can you show the behavior in a codesandbox reproduction?

[bennik88]

I can try. But as I've never worked with a Test Dummy data API it could take some time. And my Endpoints I'm currently working with can't be made public because of security reasons. I'll take a look at it. Thanks!

[bennik88]

What I could offer is an instant remote session to my vscode or mac. So you have deeper insights.

[djolesdev]

Did you find a solution for this. I'm struggling with the same issue.

[TkDodo]

as always: if you show a codesandbox or stackblitz reproduction, I can take a look at it and help. Most often (as also shown here, since I haven’t heard back in 2 years), this is either something people don’t want to do (in which case I won’t spend my time helping), or they found their problem while working on the minimal reproduction themselves (it’s amazing how narrowing a problem down to an isolated sandbox can nudge you in the right direction).

however, looking at this question again:

Could it have something to do with:

refetchOnMount: false,
refetchOnWindowFocus: false,

I was mistaken in my answer: yes, if you mark a query as stale, and then navigate to a page where the query is used, but you have set refetchOnMount: false, the query won’t refetch. My recommendation is to not mess with the refetchOnXXX flags unless you know what you’re doing and have a really good use-case.

[zorro-ftw]

Hi there @bennik88 , I am curious if you have found a solution. Currently, I'm having a similar problem with Next.js 14.0.4.

I have 2 pages, let's call them Page A and Page B, where Page A lists all the entities and Page B lists same entities but as some filtered down version. When both Page A and Page B is open in different tabs and Page B adds a new entitiy, I need to invalidate the query of Page A but it just doesn't work.

I have the client provider set up same way as it's suggested in the docs. From what I was able to investigate, when you open a new tab/window in your browser, your provider runs again and a new query client is created.

When I console logged the query client's cache in those respective pages, they only logged the queries that were run while landing to respective pages and proved that they were using different client instances. So I believe there is no solution to this since the instances are different.

Maybe being able to create a query client in server side would help, I'm not sure at the moment. This discussion was closest I found so leaving this comment and hoping it might clear some questions for people visiting here further.