Accessing data in the cache that lives in a paginated query

[kylejw2]

Hello,

I'm new to React Query and I'm trying to decide if it's the correct API client to use in my application. In my app, I use a lot of pagination. I understand that when a normal query, without pagination, is made, it's temporarily stored in the cache. I can then make a query with the initialData property pointing at the previously made query to maximize efficiency (assuming that I know the data lives there). This makes sense to me and I successfully got it to work. I have not gotten it to work when the initial query involves pagination. Is this possible?

For example:

// main query which uses pagination
return useQuery(
    ['games', { page }],
    async () => {
      const { games } = await request(
        endpoint,
        gql`
        query {
          games(page: ${page}) {
            pagination {
              total_count
              total_pages
            }
            data {
              id
              name
              image
            }
          }
        }
      `
      );
      return games.data as GameType[];
    },
    { keepPreviousData: false }
  );

// query to access an individual piece of data from the paginated query above
const result = useQuery(
    ['game', { page: 1 }, gameId], // this is where I think I'm running into issues, or it isn't possible
    () => fetch('/games'),
    {
      initialData: () => {
        return queryClient
          .getQueryData('games')
          ?.find((d: GameType) => d.id === gameId);
      },
    }
  );

I'm using the devtools so I know that the data I want to access lives in the cache, but I'm assuming I'm incorrect in how I'm using the query's key.

[TkDodo]

pre-filling a query with data from another query by using the initialData function and accessing the data via queryClient.getQueryData is a good pattern, so there is nothing wrong with it.

I'm not quite sure what is not working in your example. Where is the queryClient coming from, are you using useQueryClient to get it? Do you have a query in the cache with the key 'games' ?

next step would be a runnable codesandbox example to see what is not working :)

[graup]

I'm trying something similar, I think the issue may be that the list query key is ['games', { page }] but in initialData query data is fetched by queryClient.getQueryData('games'). Is this supposed to work like this?

[TkDodo]

queryClient.getQueryData('games') will not give you any results if that exact key doesn't exist ..

[graup]

That's what I thought. Then how would you do this (Initial Data from Cache) if the list query is paginated and has the page param in the query key?

[TkDodo]

if you don't know the page where the item is, you can try to find it with queryClient.getQueriesData, which can do fuzzy matching and gives you back everything. But it seems like a bit of work. I'd probably just use the push approach or do prefetching instead

https://tkdodo.eu/blog/seeding-the-query-cache#push-approach