queryClient.setQueryData does not support queryKeyHashFn
See original GitHub issueDescribe the bug
Currently if we use queryKeyHashFn
to customize the has key, in useQuery
hook, it will result a string key. However when we want to update the client (cached) data for that key using queryClient.setQueryData
, it does not support queryKeyHashFn
and always updates the key as an array which is causing a key mismatched.
To Reproduce Steps to reproduce the behavior:
- Create a query with
useQuery(['a', 'b', 'c'], getFunction, { useQuery: () => ['e'] })
; - After mutation, try to update the cached data for that query
queryClient.setQueryData(['e'], updatedObject)
orqueryClient.setQueryData('e' updatedObject)
Expected behavior The data, associated to that query should be updated and replace the old data, but as the key is mismatched, you will see 2 query on the devtool.
React Query Version: 3.16.0
Issue Analytics
- State:
- Created 2 years ago
- Reactions:1
- Comments:12
Top Results From Across the Web
queryClient.setQueryData does not support queryKeyHashFn
Describe the bug Currently if we use queryKeyHashFn to customize the has key, in useQuery hook, it will result a string key.
Read more >React Query queryClient.setQueryData isn't updating the ...
But my cached data either doesn't update or becomes undefined in the component hooked up to the useData() hook. Does anyone know what...
Read more >useQuery | TanStack Query Docs
When a query's cache becomes unused or inactive, that cache data will be garbage collected after this duration. When different cache times are...
Read more >react-query - UNPKG
shouldRetry) {\n // We are done if the query does not need to be retried\n ... If the transport layer does not support...
Read more >Caching clash: SWR vs. TanStack Query for React
We can mock our API backend with delayed promises on the client side to try SWR, but that approach doesn't give a real...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@TkDodo Sorry if it’s not clear. I’m not overriding the hash Here is the case,
useQuery
, the queryFn I have is expecting some more data to be passed to it. therefore I’m doing something likeuseQuery([QUERY_KEY, GRAPHQL_CLIENT, USER_ID], myQueryFn, {myQueryKeyHashFn, ...options});
and then themyQueryFn
is reading/extractingGRAPHQL_CLIENT
and theUSER_ID
and using them under the hood. Please note that I’m also usingmyQueryKeyHashFn
to make that complex array[QUERY_KEY, GRAPHQL_CLIENT, USER_ID]
to a simple string likeCUSTOM_QUERY_KEY
.setQueryData
and I like to be able to useCUSTOM_QUERY_KEY
as the passed key.The issue is by doing so, the query is not matched with the initial one and therefore it’s not updating the main query client data.
I need hashFn to make the complex array key to a simple string as the key, that way my
myQueryFn
still can use those variables (GRAPHQL_CLIENT, USER_ID) and the key itself (due to the usage ofmyQueryKeyHashFn
) should be a simple string. Basically I need to use hashFn to normalize my complex arrayed key to a simple string.