Clear the data from useQuery?
(novice question, bear with me)
I useQuery to fetch data from an API. The data is then displayed as-is on the screen. Great.
Now I want to add a "Clear" button which clears the data. I can't seem to make it work.
I tried the remove method returned by useQuery, but it doesn't work?
13 Replies
yammering-amber•3y ago
what would you expect to happen when you do
clear while the data is still displayed on the screen?national-goldOP•3y ago
I would expect the data to be undefined or null?
afraid-scarlet•3y ago
Does queryClient.setQueryData do what you need?
https://tanstack.com/query/v4/docs/react/reference/QueryClient#queryclientsetquerydata
QueryClient | TanStack Query Docs
QueryClient
The QueryClient can be used to interact with a cache:
national-goldOP•3y ago
@mark salsbery I get this: react-dom.development.js:4312 Uncaught TypeError: Cannot create property 'exact' on string 'shopProductsXMLPreview'
at QueryCache.find (queryCache.ts:170:15)
at QueryClient.setQueryData (queryClient.ts:216:35)
queryClient.setQueryData("shopProductsXMLPreview", undefined);
that was my codeafraid-scarlet•3y ago
Is that a proper query key that matches the query used at fetch?
https://tanstack.com/query/v4/docs/react/guides/query-keys
Query Keys | TanStack Query Docs
At its core, TanStack Query manages query caching for you based on query keys. Query keys have to be an Array at the top level, and can be as simple as an Array with a single string, or as complex as an array of many strings and nested objects. As long as the query key is serializable, and unique to the query's data, you can use it!
Simple Que...
national-goldOP•3y ago
I just changed it to be exactly the same
I don't get the error anymore, but when I call setQueryData, it doesn't seem to change the data immediately. i.e. the component showing the {data} still keeps showing the previous data, until I somehow change something in the form
I just print the data from useQuery directly into my component, and it doesn't update to show nothing
jolly-crimson•3y ago
I think
remove clears the cache, but the query will just run again. Try setting enabled to false, then run remove.yammering-amber•3y ago
this is not a valid queryKey - keys cannot be strings
undefined is not valid data to be put into the cache (data cannot be undefined)
⬆️ those two rules apply for v4
- queryClient.removeQueries removes data from the cache, but doesn't re-render your component. It's mostly meant to remove stuff after e.g. the user logs out so that no data is left behind that could be read.
- queryClient.resetQueries resets the matching queries to the initial state, and then informs observers, which means a re-render, and most likely a refetch because the useQuery is enabled, unless, as @ƘЄѴɬƝ said, you disable the observer.
tbh, "I want to clear the data" is not a specific use-case. I'm having a hard time imagining how the user-flow looks like. A clear button that then shows an empty screen? If that's the case, why not render a different component instead that doesn't have the useQuery call ?national-goldOP•3y ago
@TkDodo 🔮 Thanks for the detailed reply. I will check all your suggestions after this reply... My use case: Fetch a preview text from the API. The user clicks a button, the text is fetched and displayed on the screen. There is a "Clear" button to remove the text (i.e. the data from useQuery). It's a basic but pretty straightforward use case. I am new to React Query, but basically I treated the useQuery data as I would any other state in my compoment. I expected it would be common to want to set it to null/undefined.
yammering-amber•3y ago
if the user clicks a button to fetch something,
enabled is likely involved? With that in mind, your reset button would have to set the condition that enables the query back to the state where it's disabled.national-goldOP•3y ago
I set enabled to false when I declare useQuery. The query is executed only when the button is clicked
queryClient.setQueryData(["shopProductsXMLPreview"], {});
queryClient.resetQueries(["shopProductsXMLPreview"]);
I tried this, no re-render is performed. The data is still visible.yammering-amber•3y ago
sorry, impossible to say more without seeing a running reproduction. could be that the key doesn't match, could be that you have an instable query client. maybe this helps, or you can show a codesandbox reproduction: https://tkdodo.eu/blog/react-query-fa-qs
React Query FAQs
Answering the most frequently asked React Query questions
national-goldOP•3y ago
Thank you very much. I will post if have more info on this