Also, there is one more reason that was not mentioned before: If you used enabled option in useQuery than such queries are ignored by invalidateQueries. From docs: https://tanstack.com/query/latest/docs/react/guides/disabling-queries The query will ignore query client invalidateQueries and refetchQueries calls that would normally result in the query refetching.
React-Apollo: In apollo’s documentation, it shows that there’s a skip option you can add: useQuery(query,{skip:someState===someValue}) Otherwise, you can also useLazyQuery if you want to have a query that you run when you desire it to be run rather than immediately. If you are using the suspense based hooks useSuspenseQuery and useBackgroundQuery you need to use … Read more
No matter component mounts or unmounts, I don’t want an API call for 2 mins after the first time get data That is what staleTime is doing. staleTime tells you how fresh you data is. It is very similar to Cache-Control: max-age=120. So if you set staleTime: 120000, in your example, you’re guaranteed to not … Read more
As far as I can tell the author chose to publish the new v4 version on @tanstack/react-query whilst keeping the v3 version on react-query. So most likely, you want the latest version, which is @tanstack/react-query. This is detailed here: https://tanstack.com/query/v4/docs/guides/migrating-to-react-query-4#react-query-is-now-tanstackreact-query
React-query is what you would call a specialized library. It holds an api cache for you – nothing else. And since it is specialized, it does that job quite well and requires less code. Redux on the other hand gives you tools to just about store anything – but you have to write the logic. … Read more
As the error suggests, you need to wrap your application in a QueryClientProvider. This is on the first page of the docs: import { QueryClient, QueryClientProvider, useQuery } from ‘react-query’ const queryClient = new QueryClient() export default function App() { return ( <QueryClientProvider client={queryClient}> <Example /> </QueryClientProvider> ) }
The key was to use Dependent Queries So, in my main component, I create a boolean and pass that to the enabled option of the useQuery hook: const isLongEnough = searchString.length > 3; const {data, isLoading} = useQuery([‘search’, searchString], getSearchResults, {enabled: isLongEnough}); and the API calling method is simply the API call – not any … Read more
According to the API Reference, you need to change the enabled option to false to disable a query from automatically running. Then you refetch manually. // emulates a fetch (useQuery expects a Promise) const emulateFetch = _ => { return new Promise(resolve => { resolve([{ data: “ok” }]); }); }; const handleClick = () => … Read more