Skip to content

Forcing a Refetch in RTK Query: How to Always Hit the API

In RTK Query (Redux Toolkit Query), by default, it caches responses for a specific query and doesn't refetch the data if the same request with the same parameters is made. This is done to avoid unnecessary network requests and optimize performance. However, if you need to refetch the API every time (even if the request is the same), you can override the caching behavior.

Retching API Methods

There are several ways to force RTK Query to always hit the API:

1. forceRefetch option

You can use the forceRefetch option by setting it to true when making the request. This will force a refetch of the data even if the query is already cached.

const { data, error, isLoading } = useGetMyDataQuery(id, {
  refetchOnMountOrArgChange: true, // This forces a refetch when the component mounts or the argument changes
  refetchOnFocus: true, // Optional: refetch when the window gets focused
  refetchOnReconnect: true, // Optional: refetch when reconnecting the network
});

2. Use skip and trigger with useLazyQuery

You can manually trigger the refetch of data using useLazyQuery. This is useful if you need more control over when the API request is fired, such as on a button click or a certain event.

const [trigger, { data, isLoading, error }] = useLazyGetMyDataQuery();

const handleRefetch = () => {
  trigger({ id }); // Force a refetch
};

3. Refetch with refetch method

If you want to refetch the query within a component, you can manually trigger a refetch by calling the refetch() method returned by the hook.

const { data, error, isLoading, refetch } = useGetMyDataQuery(id);

const handleRefetch = () => {
  refetch(); // Force a refetch
};

4. Disable caching for a specific query

If you want to completely disable caching and refetch every time, you can modify the keepUnusedDataFor option in your query's configuration:

const { data, error, isLoading } = useGetMyDataQuery(id, {
  keepUnusedDataFor: 0, // This makes the cache expire immediately
});

This will make sure that the data isn't cached and will always trigger an API request every time the query is fired.

5. Use polling (for interval-based refetch)

If you want to refetch data at specific intervals, you can use polling with the pollingInterval option.

const { data, error, isLoading } = useGetMyDataQuery(id, {
  pollingInterval: 10000, // Refetch every 10 seconds
});

This is useful if you want to keep your data up to date by hitting the API regularly.

Summary
  • Use refetchOnMountOrArgChange, refetchOnFocus, or refetchOnReconnect for automatic refetching.
  • Use useLazyQuery or refetch for manual triggering.
  • Adjust keepUnusedDataFor to control cache expiration.
  • Polling can be set if you want periodic refetching.

Choose the approach based on your requirements for fetching data repeatedly.

Best Method to Choose

The best method depends on your specific use case, but here are some guidelines:

1. If you need to refetch automatically whenever the component mounts or the argument changes:

  • Best Method: Use refetchOnMountOrArgChange.

    const { data, error, isLoading } = useGetMyDataQuery(id, {
  refetchOnMountOrArgChange: true,
});

  • Why it's best: This method is built into RTK Query to automatically refetch the data whenever the query's parameters change or the component remounts. It’s the simplest and most efficient method for ensuring that your data is always fresh.

2. If you need more manual control over when to refetch:

  • Best Method: Use useLazyQuery with trigger or the refetch function.

    const [trigger, { data, isLoading, error }] = useLazyGetMyDataQuery();
const handleRefetch = () => {
  trigger({ id });
};

  • Why it's best: This approach gives you full control over when the refetch happens (e.g., on button clicks, user actions, or other events). It’s ideal for scenarios where you need to trigger the request manually instead of automatically.

3. If you want to completely disable caching and always make a network request:

  • Best Method: Set keepUnusedDataFor to 0.

    const { data, error, isLoading } = useGetMyDataQuery(id, {
  keepUnusedDataFor: 0,
});

  • Why it's best: This method ensures that the data is never cached and always triggers an API request. It’s useful if you want to completely bypass the cache for a particular query, but be cautious as this can lead to performance issues if overused.

Conclusion
  • Use refetchOnMountOrArgChange if you want automatic, effortless refetching.
  • Use useLazyQuery if you need to control when the query is triggered.
  • Use keepUnusedDataFor: 0 if you want to completely disable caching.

For most use cases, refetchOnMountOrArgChange is the best method because it balances simplicity with automatic refetching.