#invalidateQueries not invalidating

22 messages · Page 1 of 1 (latest)

humble vault
#

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,
};
#

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 @vivid sapphire

vivid sapphire
#

type defaults to all and refetchType defaults to active

humble vault
#

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,
      )
humble vault
#

(to just update the docs)

vivid sapphire
#

Can't open stackblitz on the phone :/

humble vault
#

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

vivid sapphire
#

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)

vivid sapphire
humble vault
vivid sapphire
humble vault
#

multiple confusions 😉