TanStackT
TanStack•2y ago•
11 replies
living-lavender

`useInfiniteQuery` stalls at 'pending' status in NextJS App

Hi everyone, I've been trying to get a custom hook to work for a while now. The hooks is just a wrapper around useInfiniteQuery which helps me get some data which I want to render out on the screen.

Here's what I'm currently trying:
export const useGetLodgesInfinite = (payload?: LodgeService.GetLodgesPayload) => {
  return useInfiniteQuery({
    initialPageParam: 1,
    queryKey: ["getLodges", payload],
    queryFn: async ({ pageParam }) => {
      // const _payload = {
      //   ...payload,
      //   page: pageParam,
      //   perPage: 10
      // }
      //
      // const fetchResult = await LodgeService
      //   .getLodges(_payload)
      //
      // if (fetchResult.isErr)
      //   throw new Error(fetchResult.error)
      //
      // return fetchResult.value

      return {
        data: [],
        meta: {
          total: 1,
          perPage: 10,
          page: pageParam
        }
      }
    },
    getNextPageParam: (lastPage) => {
      if (lastPage.meta.total / lastPage.meta.perPage <= lastPage.meta.page)
        return lastPage.meta.page + 1
    },
    getPreviousPageParam: (firstPage) => {
      if (firstPage.meta.page > 1)
        return firstPage.meta.page - 1
    }
  })
}


I commented out the bit of code I wanted to work and just mocked the response from the call, but even so, the status of the request remains 'pending' (on the browser) forever.

The app is a NextJS App (v14.0.4) w/ app router
Your_paragraph_text.png
Was this page helpful?