Top Level Application State with React Query
We’re planning a refactoring and I want to enforce all fetch logic to be with react query. I’m tempted to create context for this though which is an anti pattern, but what other clean ways to solve this.
Problem:
Our application is wrapped by an auth layer then after auth, we fetch user settings which helps build UI. I want these to be called prior to rendering anything down the tree.
For auth, it verifies a token and needs to persist to local storage with response. The main argue with the team for just using the useQuery hook is that we just want the data and at every point to know it’s there and valid. Potential Solution (?); Manually trigger query and cache somewhere, validate, etc. Expose another hook to then just get that value from cache wherever used. What’s the standard for this type of use-case?
For auth, it verifies a token and needs to persist to local storage with response. The main argue with the team for just using the useQuery hook is that we just want the data and at every point to know it’s there and valid. Potential Solution (?); Manually trigger query and cache somewhere, validate, etc. Expose another hook to then just get that value from cache wherever used. What’s the standard for this type of use-case?
1 Reply
typical-coral•3y ago
If you want to get users settings before rendering anything else, why not do that in a useQuery in the top level component and render children only when data is present (and valid)?