How can I keep query data accessible in all place of the App?
I can only use useQuery within a React context. This hook is super useful for fetching core app data (like configs, user info, etc.).
However, I’m struggling with how to access this data across the app — for example, I need the user ID in request headers or for analytics tracking.
Currently, I see two options:
1. Pass data down via props (which becomes messy fast), or
2. Store it in a global state and use it anywhere — but that requires useEffect, and since the root component fetches the data, it runs after the first render, so the first render cycle misses this core data.
Is there any recommended way to read TanStack Query data anywhere (e.g., outside React tree)?
Reading directly from the queryClient is one idea, but that’s not feasible in a micro-frontend setup, where the queryClient lives in the host app, not in remote apps.
Any patterns or recommendations for this kind of setup?
More like sync query data with global state
7 Replies
judicial-coral•4w ago
Without more info on your microfrontend setup, Itll be hard to answer your question. What you want is access to queryClient, if you can figure out some dependency injection setup to retrive it ourside the react tree it shoud work
You could also have a query client per app depending on what apis there talking to
correct-apricot•4w ago
@Darshan Naik what about if you store user id inside cookie or localstorage and then read it inside your api layer and attach it to each request?
equal-jadeOP•4w ago
Its again same issue storing it in global state or storage seed useEffect which run after first render.
@DogPawHat the API’s available in query client is not good as useQuery. And passing the query client from the host to remote is again same like prop drilling. Which I want to avoid.
For better understanding here is the simple problem statement. How can a sync useQuery return data to global state or storage?
judicial-coral•4w ago
The query cache in query client IS the global state for queries. So you can have data fetched imperitivly from it or use get or setQueryData direclty (but using it to replace something like Zustand is a bad idea)
If your thinking in terms of state syncing, youll be going down a path to buggy hack jobs with useEffect and other anti patterns
wise-white•4w ago
Same question here. I have a project with auth and didn't adopted React Query in the beginning. My auth was done in a Context provider, where it checks auth Session on render and auth changes, also provide Session into context. Is there any similar replacements in React Query?
Oh seem I found sth. Is QueryFunctionContext right thing?
judicial-coral•4w ago
Yeah yoy can set meta in default options
equal-jadeOP•4w ago
I built one small package for my problem statement anyway this is solving all my usecases, less react bindings, no context dependency.
https://qortex.darshannaik.com
Qortex - Minimal, Performant Data Fetching Library
A minimal, performant data fetching library with React integration. Built for simplicity, efficiency, and developer happiness! Get started with Qortex today.