Conditional Fetching#

If you want to prevent a query from automatically running, you can use the skip parameter in a hook.

Skip example
const Pokemon = ({ name, skip }: { name: string; skip: boolean }) => {
const { data, error, status } = useGetPokemonByNameQuery(name, {
skip,
});
return (
<div>
{name} - {status}
</div>
);
};

When skip is true (or skipToken is passed in as arg):

  • If the query has cached data:
    • The cached data will not be used on the initial load, and will ignore updates from any identical query until the skip condition is removed
    • The query will have a status of uninitialized
    • If skip: false is set after skipping the initial load, the cached result will be used
  • If the query does not have cached data:
    • The query will have a status of uninitialized
    • The query will not exist in the state when viewed with the dev tools
    • The query will not automatically fetch on mount
    • The query will not automatically run when additional components with the same query are added that do run
tip

Typescript users may wish to use skipToken as an alternative to the skip option in order to skip running a query, while still keeping types for the endpoint accurate.

Example#