genetic-orange

`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
    }
  })
}

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

4 Replies

foreign-sapphire•2y ago

Can you show a reproduction please?

genetic-orangeOP•2y ago

okay, here's the hook:

// hooks/lodge.ts
"use client"

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
    }
  })
}

// hooks/lodge.ts
"use client"

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
    }
  })
}

and here's where I'm applying it:

// components/lodges-list.ts
"use client"
function LodgesList() {
  const queryOptions = {
    agent_id: profile.id // can be any random string (it's not being used for now
  }
  const {
    data,
    status,
    fetchNextPage,
    hasNextPage,
    error
  } = useGetLodgesInfinite(queryOptions)
  
  console.log('status:', status)
  console.log('error:', error)

  if (status === "pending")
    return <FullLoader />

  if (status === "error")
    return (
      <div>
        Sorry an error occurred!
      </div>
    )

  const lastPage = data.pages[data.pages.length - 1]

  if (lastPage.meta.total === 0)
    return (
      <div className="grow flex justify-center items-center gap-4 flex-col">
        <ArchiveXIcon className="w-24 h-24 stroke-muted-foreground" />
        <Typography.Heading className="text-muted-foreground">
          No result
        </Typography.Heading>
      </div>
    )

  return (
    <>
      <Card.List variant={variant}>
        {
          data
            .pages
            .map((page, pageIdx) => page
              .data
              .map(lodge => (
                <LodgeCard
                  key={lodge.id}
                  variant={variant}
                  lodge={lodge}
                  invalidate={invalidate}
                  ref={
                    data.pages.length - 1 === pageIdx &&
                      data.pages[pageIdx].data.length - 2 === pageIdx
                      ? secondLastLIRef
                      : null
                  }
                />
              )))
        }
      </Card.List>
    </>
  )
}

// components/lodges-list.ts
"use client"
function LodgesList() {
  const queryOptions = {
    agent_id: profile.id // can be any random string (it's not being used for now
  }
  const {
    data,
    status,
    fetchNextPage,
    hasNextPage,
    error
  } = useGetLodgesInfinite(queryOptions)
  
  console.log('status:', status)
  console.log('error:', error)

  if (status === "pending")
    return <FullLoader />

  if (status === "error")
    return (
      <div>
        Sorry an error occurred!
      </div>
    )

  const lastPage = data.pages[data.pages.length - 1]

  if (lastPage.meta.total === 0)
    return (
      <div className="grow flex justify-center items-center gap-4 flex-col">
        <ArchiveXIcon className="w-24 h-24 stroke-muted-foreground" />
        <Typography.Heading className="text-muted-foreground">
          No result
        </Typography.Heading>
      </div>
    )

  return (
    <>
      <Card.List variant={variant}>
        {
          data
            .pages
            .map((page, pageIdx) => page
              .data
              .map(lodge => (
                <LodgeCard
                  key={lodge.id}
                  variant={variant}
                  lodge={lodge}
                  invalidate={invalidate}
                  ref={
                    data.pages.length - 1 === pageIdx &&
                      data.pages[pageIdx].data.length - 2 === pageIdx
                      ? secondLastLIRef
                      : null
                  }
                />
              )))
        }
      </Card.List>
    </>
  )
}

foreign-sapphire•2y ago

something I can execute, like a stackblitz or codesandbox please ...

genetic-orangeOP•2y ago

ohhh, okay, On it Sorry for the late response.... I was unable to replicate the setup in a codesandbox Mostly because the project is a monorepo which references other internal projects But I have been able to figure out where the issue is coming from It's coming from the payload object I'm passing into the query key So I just stringifyied the object before supplying it as a query key And it's working fine

Gaming

Programming

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

Did you find this page helpful?