TanStackT
TanStack•4mo ago•
22 replies
still-lime

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,
};
Was this page helpful?