useInfiniteQuery with searchBefore or searchAfter paging

[niemyjski]

I want to use infinite paging but it doesn't seem to be built for search before/after paging (very stable paging) where page numbers are not used (think bidirectional cursor). I have search endpoints that works like stripes paging where you specify either (but not both) the searchBefore or searchAfter value.

  return useInfiniteQuery<IResponseWrapper<SomeModel[]>, ProblemDetails>(
    [queryKey],
    ({ pageParam = 0 }) => {
      return axios.get......("some-resource"); // returns { status, headers, data: SomeModel[] }
    },
    {
      getPreviousPageParam: (firstPage, pages) => firstPage.headers["searchbeforetoken"],
      getNextPageParam: (lastPage, pages) => lastPage.headers["searchaftertoken"]

My main question is how can I be very specific about the which direction is being requested (previous or next) as I need to know if it's for searchAfter or searchBefore. I was thinking I could look at the previous parameter passed to fetch. https://github.com/tannerlinsley/react-query/blob/e7a3207f74b27bc112d6ab583831cceac60f94c5/src/core/infiniteQueryBehavior.ts#L53
But I think I'm looking in the wrong place as it's not in the typescript definition for QueryFunctionContext

My second question, is there any way I can mutate the results for onSuccess and onError so I can return just the data payload and hide the internal state (headers / status). I need to expose the headers for paging needs but I don't want it polluting the rest of the app. Would be nice to maybe also cache this data and possibly get it from query cache?

[niemyjski]

@tannerlinsley any advice on how to achieve this?

[TkDodo]

you can return whatever you want from getNextPageParam or getPreviousPageParam - it doesn't have to be a number. So you can include the paging direction, something like:

getPreviousPageParam: (firstPage, pages) => ({ searchBefore: firstPage.headers["searchbeforetoken"] }),
getNextPageParam: (lastPage, pages) => ({ searchAfter: lastPage.headers["searchaftertoken"] })

[TkDodo]

My second question, is there any way I can mutate the results for onSuccess and onError so I can return just the data payload and hide the internal state (headers / status). I need to expose the headers for paging needs but I don't want it polluting the rest of the app. Would be nice to maybe also cache this data and possibly get it from query cache?

easiest way is to transform in the queryFn with axios.get(url).then(res => res.data), but then it's not cached. If you want something that also caches, have a look at select. I've compared all the options here: https://tkdodo.eu/blog/react-query-data-transformations

[niemyjski]

Awesome thank you! I'll take a look at this!

[niemyjski]

@TkDodo Do you have any recommendations for selectors and infinite queries? I'm running into typescript errors when I do a mapping due to I'm selecting into the response and there is a type mismatch:

  select: data => ({
        ...data,
        pages: data.pages.flatMap(x => x.data),
      }),

Seems related to #3065

[TkDodo]

that select should work imo. Can you how the error in a codesandbox or typescript playground ?