Unable to update previous query cache

[cuongle-hdwebsoft]

Describe the bug

Hi team,
I have a list of data with many filters. I have a status filter and It has 3 options: Sign In, Sign Out, and All. Firstly, I started to show my table with the status All. Then, I filtered with the status Sign In and I tried to update the status of one of the items in that result using Optimistic Updates. It worked really perfectly on a current queryKey. Because my staleTime did not expire (I'm setting 20s for the staleTime now), when I filtered with the status All, the table showed me the previous result and did not re-fetch queryKey. So the updated item which I've updated before, did not show the exact value.

Your minimal, reproducible example

see above

Steps to reproduce

see above

Expected behavior

If the query is still fresh, the value of the updated item should be the same in all the queryKey.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

• OS: macOS
• Browser: Chrome
• Version: 114.0.5735.106

Tanstack Query adapter

vue-query

TanStack Query version

v4.29.15

TypeScript version

v5.1.3

Additional context

No response

[TkDodo]

do you have all variables like the status filter added to the QueryKey? I mean, you're not even showing any code...

https://tanstack.com/query/v4/docs/react/guides/query-keys#if-your-query-function-depends-on-a-variable-include-it-in-your-query-key

[cuongle-hdwebsoft]

Yes, of course, I have search, category, and status all that we use to filter our list data.

const filters = computed(() => ({
  offset,
  limit,
  sort,
  "search1[category_name]":
    selectedCategory.value !== "all" ? selectedCategory.value : undefined,
  ...searchQueryFilter.value,
  ...statusFilters.value,
}));

Then we use that filter above to query the API

useQuery({
    queryKey: queryKeys[tags.platform.person].list(filters).queryKey,
    queryFn: () => {
      return axios.get(
        apiStore.getEndpoint("platform", endpoints.person.list),
        { params }
      );
    },
    enabled,
    keepPreviousData: true,
  });

You just only care about the Status filter, because we just focus on a basic sample and It also makes a bug here.

Step by step:

• Step 1: Filter status All (This result will include the item that we will change in Step 2).
• Step 2: Filter status Sign In and update one item in that result to Sign Out.
• Step 3: Filter status All again, the query key is the same as in Step 1.

Because the stale time in the query key that we made in Step 1, does not expire, I got an unwanted result in the final step.

[cuongle-hdwebsoft]

But I only want to use optimistic in this case. I don't want to use both optimistic and queryClient.invalidateQueries. Because we already changed the data in Step 2, there is no reason why we have to re-fetch again that query from the API.

[TkDodo]

have you changed the value in all the cache entries? My guess is you haven't updated the cache entry where the filter status is All....

[cuongle-hdwebsoft]

No, I did not do that. Could you please give me a sample for your suggestion?

[TkDodo]

well what did you do in the optimistic update?

sorry, this back and forth is pointless and exhausting, and it's usually the reason why I require a runnable codesandbox reproduction to investigate issues.

Conceptually, here is what happens:

React Query has a document cache (not a normalized cache); it's an in-memory JS map where the key is the QueryKey. If you change the key, you create a separate entry in the Cache.

That means, if you have 3 filters, and you switch between the three, you have three cache entries, each having their own data. With filters, that means you'll likely have duplicate data in the various cache entries (which is fine, that's how it's designed to work).

If you now write to the cache manually with queryClient.setQueryData, you only write to one cache entry - probably to the one you are currently seeing.

If you want to avoid any extra fetches, you have to write to all cache entries, either by calling queryClient.setQueryData multiple times, or with queryClient.setQueriesData.

But really, you're adding a ton of complexity to your client side JS just to avoid a single fetch. The easiest solution is: queryClient.invalidateQueries