queryFn context for dependent query with CRUD operations

[asugden]

How can one deal with the problem of useInfiniteQuery's queryFn depending on data from useQuery when doing CRUD operations?

Specifically, I have a custom hook that returns a list of all document ids (and other metadata) that allows for various sorting of the data client side before rendering it:

export const function useDocumentIds(collection: string, pageSize: number = 10) {
  const { data, status } = useQuery(
    ['collection', collection, 'ids'],
    () => getCollectionIds(collection),
    { staleTime: 1000 }
  );

  const fetchNext = async (offset: number = 0) => {
    const queryIds = data
      .slice(offset * pageSize, (offset + 1) * pageSize)
      .map((item) => item.document_id);
    const rows = await documentsQuery(queryIds);
    return { rows, nextOffset: offset + 1 };
  };

  const nPages = Math.ceil(nRows / pageSize);
  return { status, nPages, fetchNext };
}

The dependent query is a component:

export default function ShowInfiniteQuery({
  collection,
  status,
  nPages,
  fetchNext,
}: Props) {
  const { data, isFetchingNextPage, fetchNextPage, hasNextPage } =
    useInfiniteQuery(['collection', collection, 'documents'], (ctx) => fetchNext(ctx.pageParam), {
      getNextPageParam: (lastPage) => {
        return lastPage.nextOffset < nPages
          ? lastPage.nextOffset
          : undefined; 
      }
    });
...
}

Then, I use the pagination function fetchNext as the input to useInfiniteQuery. This works fantastically until I have a mutation that runs invalidateQuery on ['collection', collection, 'ids']. In that case, data is updated within the custom hook, but fetchNext, when called as queryFn for useInfiniteQuery, does not have access to the updated value of data.

I have considered passing all of the document ids to useInfiniteQuery, but that precludes an optimistic update onMutation using the same query key.

I have noticed that fetchNext is updated any time I load a new page. Is there any way to trigger the updating of fetchNext so that its internal variable represents the new value of data or to pass that value in (I have tried meta, but it too does not update)?

Thanks!

[TkDodo]

fetchNext is closing over data from the query, but that data is not part of the queryKey of your infinite query. I'd suggest to make this more explicit:

export const function useDocumentIds(collection: string, pageSize: number = 10) {
  const { data, status } = useQuery(
    ['collection', collection, 'ids'],
    () => getCollectionIds(collection),
    { staleTime: 1000 }
  );

  const queryIds = data
    .slice(offset * pageSize, (offset + 1) * pageSize)
    .map((item) => item.document_id);

  const nPages = Math.ceil(nRows / pageSize);

  return { data, status, queryIds, nPages }
}

export default function ShowInfiniteQuery({
  collection,
  status,
  queryIds,
  nPages,
}: Props) {
  const { data, isFetchingNextPage, fetchNextPage, hasNextPage } =
    useInfiniteQuery(['collection', collection, 'documents', queryIds], async (ctx) => {
        const rows = await documentsQuery(queryIds);
        return { rows, nextOffset: ctx.pageParam + 1 };
    }, {
      getNextPageParam: (lastPage) => {
        return lastPage.nextOffset < nPages
          ? lastPage.nextOffset
          : undefined; 
      }
    });
...
}

now we can see that queryIds is needed inside the queryFn of the infiniteQuery - so I've added it to the queryKey.

I just realized that calculating queryIds also needs the offset, so it might be necessary to include the whole data from the useQuery as a dependency and then do the slicing and mapping inside the queryFn.