wise-white

invalidateQueries not invalidating

I'm using tanstack router with useSuspenseQuery (wrapInSuspense: true). I have two APIs: one is a list of users and the other is the user details. You can favorite a user on the list page. You can click on their username to take them to the details page. You can view and favorite the user on the details page. On the list page I can see user1 is favorited. I click on user1 and it takes them to view user1 details. I see that they are favorited here too. I go back to the list page and unfavorite. I see they are unfavorited there. I go back to the user page and see they haven't been unfavorited. I call invalidateQueries on both inside the mutator. Toggling the favorite on either page will invalidate the currently rendered view correctly, but it's as if the other view isn't being marked as stale.

onSuccess: async () => {
  await Promise.all([
    queryClient.invalidateQueries({ queryKey: usersKeys.lists() }),
    queryClient.invalidateQueries({
      queryKey: usersKeys.favoriteDeatils(userId),
    }),
  ]);
}

export const usersKeys = {
  all: ["users"] as const,
  lists: () => [...usersKeys.all, "list"] as const,
  list: (query: UsersQuery) => [...usersKeys.lists(), query] as const,
  favoriteDetails: (userId: number) =>
    [...usersKeys.all, "favoriteDetails", userId] as const,
};

onSuccess: async () => {
  await Promise.all([
    queryClient.invalidateQueries({ queryKey: usersKeys.lists() }),
    queryClient.invalidateQueries({
      queryKey: usersKeys.favoriteDeatils(userId),
    }),
  ]);
}

export const usersKeys = {
  all: ["users"] as const,
  lists: () => [...usersKeys.all, "list"] as const,
  list: (query: UsersQuery) => [...usersKeys.lists(), query] as const,
  favoriteDetails: (userId: number) =>
    [...usersKeys.all, "favoriteDetails", userId] as const,
};

10 Replies

wise-whiteOP•3w ago

I've confirmed the userId matches on both page And it goes both ways ok. I changed the "type": "all" and it seemed to work. weird that it says the default is all docs seem incorrect: type: filters?.refetchType ?? filters?.type ?? 'active', cc @TkDodo 🔮 https://tanstack.com/query/v5/docs/framework/react/guides/filters#query-filters

fascinating-indigo•3w ago

type defaults to all and refetchType defaults to active

wise-whiteOP•3w ago

I'm confused. This wasn't what I experienced in my testing and this code seems to suggest active, right?

      return this.refetchQueries(
        {
          ...filters,
          type: filters?.refetchType ?? filters?.type ?? 'active',
        },
        options,
      )

      return this.refetchQueries(
        {
          ...filters,
          type: filters?.refetchType ?? filters?.type ?? 'active',
        },
        options,
      )

@TkDodo 🔮 let me know if you want me to create an issue: https://stackblitz.com/edit/tanstack-query-nsmvilvp?file=src%2Findex.tsx&preset=node (to just update the docs)

fascinating-indigo•3w ago

This is code from the invalidateQueries implementation right? It calls refetchQueries, where it passes the refetchType as type and it defaults to active Can't open stackblitz on the phone :/

wise-whiteOP•3w ago

Yeah, it's so bad. I think the confusion is the docs say the default of type is "all", but maybe I've misunderstood something. The demo shows that only the active queries are getting invalidated without any defaults. Also sorry if I'm waisting your time here. You're in a whole other league in terms of coding and especially this code base

fascinating-indigo•3w ago

let me try to explain how it works. type is a filter. refetchType is something that exists only on invalidateQueries, it's not a general filter. type defaults to all, that is true. invalidateQueries does two things: it marks all matching queries as invalid. That's where filter comes in, hence "all" as default. This doesn't refetch anything. I repeat: invalidation alone doesn't refetch. It sets a flag on the query that it has been invalidated. Then, additionally, invalidateQueries refetches all active queries. You can override this with refetchType (which defaults to active) I'm pretty sure the demo shows (or should show) that all queries get invalidated but only the active ones get refetched

wise-whiteOP•3w ago

Yes. And thank you for the explaination. I've been using this library for years and had no idea. I've also never had to invalidate a query an inactive query before.

fascinating-indigo•3w ago

I think we do have this documented here: https://tanstack.com/query/v5/docs/framework/react/guides/query-invalidation if you think it can be improved, please file a PR 🙏

Query Invalidation | TanStack Query React Docs

Waiting for queries to become stale before they are fetched again doesn't always work, especially when you know for a fact that a query's data is out of date because of something the user has done. Fo...

wise-whiteOP•3w ago

Thanks. I think my confusion was that if the default behavior of type is "all" then explicitly setting type: "all" shouldn't change the behavior multiple confusions 😉

fascinating-indigo•3w ago

Oh, that actually makes sense 😅

Gaming

Programming

invalidateQueries not invalidating

Did you find this page helpful?