question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

queryClient.setQueryData does not support queryKeyHashFn

See original GitHub issue

Describe 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:

  1. Create a query with useQuery(['a', 'b', 'c'], getFunction, { useQuery: () => ['e'] });
  2. After mutation, try to update the cached data for that query queryClient.setQueryData(['e'], updatedObject) or queryClient.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:closed
  • Created 2 years ago
  • Reactions:1
  • Comments:12

github_iconTop GitHub Comments

1reaction
amiroouscommented, Jun 28, 2021

@TkDodo Sorry if it’s not clear. I’m not overriding the hash Here is the case,

  1. When I’m using useQuery, the queryFn I have is expecting some more data to be passed to it. therefore I’m doing something like useQuery([QUERY_KEY, GRAPHQL_CLIENT, USER_ID], myQueryFn, {myQueryKeyHashFn, ...options}); and then the myQueryFn is reading/extracting GRAPHQL_CLIENT and the USER_ID and using them under the hood. Please note that I’m also using myQueryKeyHashFn to make that complex array [QUERY_KEY, GRAPHQL_CLIENT, USER_ID] to a simple string like CUSTOM_QUERY_KEY.
  2. After successful mutation, I like to call setQueryData and I like to be able to use CUSTOM_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.

0reactions
amiroouscommented, Jun 29, 2021

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 of myQueryKeyHashFn) should be a simple string. Basically I need to use hashFn to normalize my complex arrayed key to a simple string.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found