using react query in a standalone hook
I'm trying to use react query in a standalone hook, and I pass in the queryClient, but any time I attempt using the useQueries or something similar, I get errors, which say
No QueryClient set, use QueryClientProvider to set one . But the thing is, I'm in a standalone hook. The original create react app does have a query client provider that is set to surround everything inside the app component. I call the hook inside the top level of the app component. Any help would be much appreciated!9 Replies
magic-beige•3y ago
Probably best if you can show some reproducible code e.g. codesandbox or stackblitz
It sounds like you need to add the query provider around your component that calls the hook if you're getting that error. But I'm not quite sure what you mean with standalone hook but a codesandbox would help.
ambitious-aquaOP•3y ago
standalone means I would like the hook to work on its own
as in
I can port the hook to multiple projects
preferrable without needing the component it's called in to be wrapped in QueryClientProvider
but if needed
that's also fine
will send code in a bit
magic-beige•3y ago
You should be able to import/export the hook that calls useQuery and useMutation etc but it still needs to have the query client in context from the provider, as that's the core functionality you need to be able to run the queries, have the cache and so forth. https://tanstack.com/query/v4/docs/react/quick-start
Quick Start | TanStack Query Docs
This code snippet very briefly illustrates the 3 core concepts of React Query:
Queries
ambitious-aquaOP•3y ago
CodeSandbox
CodeSandbox is an online editor tailored for web applications.
ambitious-aquaOP•3y ago
so you're saying the hook shouldn't be called in the App component?
and rather inside a component within App?
And so I'm not supposed to pass in the queryClient to the hook?
looks like now I'm getting an infinite rerender loop
but I don't really set state
mainly just use react query for everything
ambitious-aquaOP•3y ago
here's a link to the repo if u'd like to clone it locally: https://github.com/OpalCards/test-app
GitHub
GitHub - OpalCards/test-app
Contribute to OpalCards/test-app development by creating an account on GitHub.
ambitious-aquaOP•3y ago
so yea-- is react query something i should even be attempt using for this
genetic-orange•3y ago
The problem is the query you're passing to useFlightSearch at https://github.com/OpalCards/test-app/blob/main/src/App.js#L28. Since you're creating a new object on each rerender, the first
useMemo in your useFlightSearch hook at https://github.com/OpalCards/test-app/blob/main/src/hooks/useFlightSearch.tsx#L49 runs over and over again since the object is never equal by reference. A quick way to fix it for your testing is to either remove searchQuery from the dependency array of the useMemo or memoize the query you're passing from AppGitHub
test-app/useFlightSearch.tsx at main · OpalCards/test-app
Contribute to OpalCards/test-app development by creating an account on GitHub.
GitHub
test-app/App.js at main · OpalCards/test-app
Contribute to OpalCards/test-app development by creating an account on GitHub.
ambitious-aquaOP•3y ago
Oooh that makes sense
Thanks
Ill try it out tonight