T
TanStack•6mo ago
other-emerald

Trying to do dependent prefetches

I was trying to run this in a start loader with query: 
loader: async ({
  context: { getMovieFetchOptions, queryClient },
  deps: { query, page, genre },
}) => {
  queryClient
    .fetchQuery(getMovieFetchOptions({ query, page, genre }))
    .then(async (data) => {
      const paginationInfo = data.pagination;

      const hasNext = paginationInfo?.totalPages
        ? paginationInfo.page < paginationInfo.totalPages
        : false;
      const hasPrevious = paginationInfo?.page
        ? paginationInfo.page > 0
        : false;

      console.log(hasNext, hasPrevious);

      await Promise.all([
        (async () => {
          if (hasNext) {
            await queryClient.prefetchQuery(
              getMovieFetchOptions({ query, page: page + 1 }),
            );
          }
        })(),
        (async () => {
          if (hasPrevious) {
            await queryClient.prefetchQuery(
              getMovieFetchOptions({ query, page: page - 1 }),
            );
          }
        })(),
      ]);
    });
};
loader: async ({
  context: { getMovieFetchOptions, queryClient },
  deps: { query, page, genre },
}) => {
  queryClient
    .fetchQuery(getMovieFetchOptions({ query, page, genre }))
    .then(async (data) => {
      const paginationInfo = data.pagination;

      const hasNext = paginationInfo?.totalPages
        ? paginationInfo.page < paginationInfo.totalPages
        : false;
      const hasPrevious = paginationInfo?.page
        ? paginationInfo.page > 0
        : false;

      console.log(hasNext, hasPrevious);

      await Promise.all([
        (async () => {
          if (hasNext) {
            await queryClient.prefetchQuery(
              getMovieFetchOptions({ query, page: page + 1 }),
            );
          }
        })(),
        (async () => {
          if (hasPrevious) {
            await queryClient.prefetchQuery(
              getMovieFetchOptions({ query, page: page - 1 }),
            );
          }
        })(),
      ]);
    });
};
Where we have a table in the app using manual server pagination controlled by the query params similar to https://tanstack.com/table/latest/docs/framework/react/examples/query-router-search-params and I want to have the pages loaded before and afterwards so there's no loading step each time you go back and forth. This doen't seem to work on start though on first render; It doesn't look like the browser side query client gets streamed the extra prefetches in the then block, so the first time you click on next page you still get a loading spinner, but it still works for client loaders. I'm probably moving the preloads into a browser side top-level useEffect if the above isn't possible.
React TanStack Table Query Router Search Params Example | TanStack ...
An example showing how to implement Query Router Search Params in React using TanStack Table.
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?