Paginated Query, previously cached page number or filters

[dev3rin]

Hi, I've decided to give this library a try instead of using redux, however I can't get to wrap my head around one problem.

I have simple paginated list therefore using paginatedQuery, code looks like this:

export interface PageParams {
  page: number;
  pageSize?: number;
}

{...
const [pageMetaData, setPageMetaData] = React.useState<PageParams>({
    page: 1,
  });

  const { isFetching, resolvedData, latestData } = usePaginatedQuery(
    ["queryId", pageMetaData],
    fetchFn,
  );
....
}

just like in the example, but code here is irrelevant as most likely this is more a concept issue.

From the backend aditionally to the data I also page metadata ( current page, size ) and filters, and my question is how can I set initial state(pageMetaData) to previously fetched page / filters if there was a previous query? Let say that user enter list view, then go to details and then goes back to the list.

Using latestData, seems to always return undefined when I go back to the list component.

The only solution I've come with was using queryCache.getQueries, filtering queries using key and somehow looking for latest ( as in the default configuration multiple page queries for the same key(different page / filters) will be cached). Is this possible to achieve this somehow, or this isn't something that should be handled via react-query and I should store page & filters in the context or state ?

[TkDodo]

how can I set initial state(pageMetaData) to previously fetched page / filters if there was a previous query?

I think initialData is what you want to initialize a query with some data that already exists in the queryCache at another key: https://react-query.tanstack.com/docs/guides/initial-query-data#initial-data-from-cache

FYI, usePaginatedQuery will be removed in v3, you can just set keepPreviousData on useQuery: https://react-query-beta.tanstack.com/guides/migrating-to-react-query-3#usepaginatedquery

[dev3rin]

@TkDodo Thanks for your reply, I didn't thought about initial data, however I couldn't resolve my issue with it. Finally I went with jotie for keeping state of currently selected page (might switch to context), and simply passed it to the query. Therefore I can set previously selected page when going back to the list component.

Thanks for the tip with v3 changes and this flag, I've modified my code to be compatible with it.