Access React Query / Tan Stack Query cached data from outside the react tree?

Question

I am working on an error handler for the whole mobile app. So when an unexpected error occurs, it sends user data to server.

I used to have a global state, so getting user infos from there was easy, but since I removed user global state and replaced it directly with my backend react query request, I am not sure how to get the user data from the cache here since I can't use a react hook (useSomething...) outside of the react tree.

I have tried queryCache.find({ queryKey: ['userGetOne'] }) from this doc but it returns undefined, eventhough I'm sure my queryKey match a defined request. Also this don't seem the recommended way to go.

I can provide more code examples if needed but I'm not sure it will be relevant here.

Nicholas Tower · Accepted Answer · 2024-02-27 15:59:12Z

2

You can access the data through the queryClient (the same one that you passed into <QueryClientProvider>):

// In your main app file
export const queryClient = new QueryClient(/* ... options */);

const App = () => {
  return (
    <QueryClientProvider client={queryClient}>
     {/* other elements */}
    </QueryClientProvider>
  )
}

// Elsewhere:
import { queryClient } from '[yourMainAppFile]'

function onError() {
  const value = queryClient.getQueryData(['userGetOne']);
  console.log('error!', value);
}

edited Feb 27, 2024 at 15:59

answered Feb 27, 2024 at 15:53

Nicholas Tower

87k10 gold badges115 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

TOPKAT Over a year ago

Working perfectly! It's crazy that nothing popped out when searching for those keywords!

Collectives™ on Stack Overflow

Access React Query / Tan Stack Query cached data from outside the react tree?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related