using the same useQuery key in different views

[emehran]

Hey,
for a breadcrumb situation, I need to run the same query key like ['name', 100] in different views of the app. Ideally, I like to benefit from the cache, and for the next views other than the first useQuery, first load it instantly from cache and then based on my config trigger a fetch.

based on what I'm experiencing using the same key, seems like every time I visit the next view, it fetches it again without first loading it from the cache.

my code is like

View1: UseQuery(['name', id]....
View2: UseQuery(['name', id]....

for the same id, it blinks and fetches all the time.
Am I doing it with the right approach?

[TkDodo]

Looks like those views don’t share the same QueryClientProvider. Do you give each view their own, and thus their own cache?

[trongtai37]

Hi @TkDodo, I have some following up questions.

// file: keys.ts
export const queryKey = 'queryKey'

// file: ComponentA.tsx
useQuery(queryKey, functionA)

// file: ComponentB.tsx
useQuery(queryKey, functionB)

• Where was functionA and functionB stored, QueryObserver level or QueryCache level?
• When I want to queryClient.invalidateQueries([queryKey]), which function is used to fetch new data and why?

[bystrovo]

interested in the answer as well

[TkDodo]

Where was functionA and functionB stored, QueryObserver level or QueryCache level?

cache

When I want to queryClient.invalidateQueries([queryKey]), which function is used to fetch new data and why?

undefined behaviour, not recommended. My guess is the "later" one, but please don't do this. One query key needs to be paired with exactly one queryFn.

[trongtai37]

Thanks @TkDodo, now I know why this eslint rule is so important :).
@bystrovo FYI I made a codesandbox to test it too https://codesandbox.io/p/sandbox/zealous-mcnulty-jjfqyn

[hamzadarej]

i had the same problem, query refetch when i change the view using the same key: i fixed this using this config { refetchOnWindowFocus: false, enabled : !queryCache.getQueryData(['key', var ])