React Query Infinite Scroll with custom headers

Question

I am trying to build an infinite scroll list with react-query and InfiniteScroll from 'react-infinite-scroller'. While it was rather easy to get the basic infinite list working I can't seem to figure out the next step, adding a header to the request.

As you see below I am getting a little bit desperate :) I added the token I want to use to the return value of the getNextPageParam function in order to use it in my fetchNextItems function. While this works for the second and following pages the token is not available in the initial fetch.

I also tried to add initialData to the useInfiniteScroll without any success.

I could just move the api calls to the jsx functional components and would have access to the token, but I'm sure there is a way that I am not seeing while I am just starting to play around with react-query.

Any suggestions and/or tips are welcome!

List.tsx

[...]
const idToken = useAppSelector(getIdToken)

const { data, isLoading, isError, hasNextPage, fetchNextPage } =
useInfiniteQuery(queryKey, fetchNextItems, {
  getNextPageParam: lastPage => {
    if (lastPage.nextPage < lastPage.totalPages)
      return { idToken, page: lastPage.nextPage }

    return undefined
  },
 //initialData: {}
})

[...]

<InfiniteScroll
  hasMore={hasNextPage}
  loadMore={fetchNextPage}
  getScrollParent={() => document.getElementById('main')}
  useWindow={false}
>
  {data.pages.map(page =>
    page?.data.map(item => (
      <Component key={item._id} itemData={item} />
    )),
  )}
</InfiniteScroll>

api.ts

export const fetchNextItems = async ({
  pageParam = { idToken: '', page: 0 },
}) => {

  const response = await fetch(
    `${URL}?$skip=${pageParam.page * limit}&$limit=${limit}`,
    {
      headers: new Headers({
        Authentication: pageParam.idToken,
      }),
    },
  )
  const { data, total } = await response.json()

  return {
    data,
    nextPage: pageParam.page + 1,
    totalPages: Math.ceil(total / limit),
  }
}

TkDodo · Accepted Answer · 2022-09-06 13:02:06Z

0

Authentication is something you should likely handle outside of react-query. Just imagine how you would add a header param to a fetch request if you wouldn't use react-query?

What many people do is get the token after login, then distribute it in the app via a dedicated react context. Then, the custom react query hook can pick it up and forward it to fetch.

If you are using libraries like axios or ky to do the actual data fetching, there are other ways to hook into the lifecycle of that api layer to add header parameters.

answered Sep 6, 2022 at 13:02

TkDodo

30.4k5 gold badges84 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Query Infinite Scroll with custom headers

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related