apoolo uselaxyQuery bypass cache
Apollo UseQuery Bypass Cache
If you are using Apollo Client, you might have come across a situation where you want to bypass the cache and fetch fresh data from the server. This is where Apollo's useQuery
hook comes in handy. By default, Apollo caches the results of queries and returns the cached data if the same query is executed again. However, sometimes you might want to bypass this cache and fetch fresh data from the server.
Using useQuery
Hook
To bypass the cache and fetch fresh data from the server, you can pass fetchPolicy: "network-only"
option to the useQuery
hook. This will force Apollo to fetch data from the server and not use the cached data.
import { useQuery } from '@apollo/client';
import { QUERY } from './constants';
function MyComponent() {
const { loading, error, data } = useQuery(QUERY, {
fetchPolicy: "network-only"
});
if (loading) return 'Loading...';
if (error) return `Error! ${error.message}`;
return (
<div>
<p>{data.message}</p>
</div>
);
}
Using a Custom Query Hook
If you have multiple components that need to bypass the cache and fetch fresh data from the server, you might want to create a custom query hook that wraps around Apollo's useQuery
hook.
Here is an example of a custom query hook that takes fetchPolicy
as an argument:
import { useQuery } from '@apollo/client';
import { QUERY } from './constants';
function useCustomQuery(fetchPolicy) {
return useQuery(QUERY, {
fetchPolicy
});
}
export default useCustomQuery;
You can then use this custom query hook in your components:
import useCustomQuery from './useCustomQuery';
function MyComponent() {
const { loading, error, data } = useCustomQuery("network-only");
if (loading) return 'Loading...';
if (error) return `Error! ${error.message}`;
return (
<div>
<p>{data.message}</p>
</div>
);
}
Conclusion
Bypassing the cache and fetching fresh data from the server is a common requirement in many applications. With Apollo Client, you can achieve this by using the useQuery
hook and passing fetchPolicy: "network-only"
option. You can also create a custom query hook that wraps around Apollo's useQuery
hook to make it easier to use in multiple components.