Invalidate pagination cache when something changed

Lets say you have a paginated list of todos, ordered by last created and descends

const [page, setPage] = React.useState(1);
const query = useQuery({
    queryFn: () => fetch("/todo?page="+page),
    queryKey: ["todos", page],
    keepPreviousData: true
});

const [page, setPage] = React.useState(1);
const query = useQuery({
    queryFn: () => fetch("/todo?page="+page),
    queryKey: ["todos", page],
    keepPreviousData: true
});

As you're clicking through the pages, a new todo is added on the server. So now all the cached data from all pages is wrong, because everything is shifted by 1 (due to the addition). How can I manually invalidate all the cache keys in this situation?
Something like

if cached data didn't match the result of the fetched data, invalidate all the other cache keys

if cached data didn't match the result of the fetched data, invalidate all the other cache keys

TanStack•4y ago•

1 reply

dangerous-fuchsia

Invalidate pagination cache when something changed

Lets say you have a paginated list of todos, ordered by last created and descends

const [page, setPage] = React.useState(1);
const query = useQuery({
    queryFn: () => fetch("/todo?page="+page),
    queryKey: ["todos", page],
    keepPreviousData: true
});

const [page, setPage] = React.useState(1);
const query = useQuery({
    queryFn: () => fetch("/todo?page="+page),
    queryKey: ["todos", page],
    keepPreviousData: true
});

if cached data didn't match the result of the fetched data, invalidate all the other cache keys

if cached data didn't match the result of the fetched data, invalidate all the other cache keys

Invalidate pagination cache when something changed

Similar Threads

Invalidate pagination cache when something changed

Similar Threads

Similar Threads

Similar Threads