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:
- 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
- The cached data will not be used on the initial load, and will ignore updates from any identical query until the
- 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
- The query will have a status of