Leveraging paginated data in "item" page

[petersendidit]

In the Star Wars example the code queries the list of films when clicking on the Films page. Then when selecting a individual film the code doesn't use the existing data about the film from the list, it has to wait for query that is specific for that single film before the page is shown.

How do you see best leveraging the data already loaded from the list to "pre-populate" the data for the single file page?
Should it pre-populate the queryCache in some way?

[fnn]

Use initalData for the item query and use the query data from the list to return the initial data.

initialData: () => queryCache.getQueryData("list").find((item) => item.id ===id)

I came across the problem with pagination because each page has its own query key.
In that case maybe the best way is to use setQueryData to save all items in one query key. 🤷

[fnn]

Because my filters (page, ...) are outside the list component, I just pass the filters to the item component to use getQuerydata.

Rough example:

const Parent: React.FC = () => {
  const [filters, setFilters] = React.useState("?limit=50");

  const handlePageChange = () => {
    setFilters(...);
  };

  return (
      <div>
        <div>filter component here</div>

        <List filters={filters} onPageChange={handlePageChange} />

        <Routes>
          <Route
            path=":id"
            children={<Item listQueryKey={filters} />} // Now the query inside the Item component can use correct queryKey
          />
        </Routes>
      </div>
  );
};

[petersendidit]

Seems like another option is to use queryCache.setQueryData on click in the place that has the data. In the Star Wars example that would be changing this code
https://github.com/tannerlinsley/react-query/blob/270fa0f4233fba6b4f7d0c48d2e5e21ca82be7df/examples/star-wars/src/Films.js#L27
To this:

<Link
  component={RouterLink}
  to={`/films/${filmId}`}
  onClick={() => { queryCache.setQueryData(`film-${filmId}`, film); }}
>

[fnn]

I really like that.

[johnslay]

How about this?

React.useEffect(() => {
  data.forEach(film => {
    queryCache.setQueryData(`film-${film.id}`, film)
  })
}, [data])

[tannerlinsley]

This is one of the patterns I suggest in the upcoming React Query Essentials course. It's even better if you put it in the core fetcher function, that way it's independent of the hook instance.