What is the best way to handle "no data" when using useInfiniteQuery

[shubhadeep-kartbite]

Hi all,

I am trying to build a Posts screen with filters, for that I am using useInfiniteQuery.

If no posts are present for some filter the data variable is becoming like this -> {"pageParams": [undefined], "pages": [[]]}
and isLoading is TRUE so I am not able to perform other actions like "showing no data found or try again"

I have used the below codes:

const {
    data,
    error,
    fetchNextPage,
    hasNextPage,
    isFetching,
    isFetchingNextPage,
    status,
    refetch,
    isLoadingError,
  } = useInfiniteQuery(["posts", socialFilterOptions], jobFetchPosts, {
    select: data => {
      return {
        pages: getSortedUniquePosts(data.pages),
        pageParams: [data.pageParams[data.pageParams.length - 1]],
      }
    },
    getNextPageParam: (lastPage, pages) => {
      return lastPage && lastPage[lastPage.length - 1].timestamp
        ? lastPage[lastPage.length - 1].timestamp
        : undefined
    },
  })

export async function jobFetchPosts(allPageParam) {
  let {pageParam: until, queryKey} = allPageParam

  if (until === null) {
    until = new Date()
  }

  let filters = queryKey[1]

  let publishedPosts = []

  publishedPosts = await getPosts(filters, until ? new Date(until).toISOString() : null)

  return publishedPosts
}

function getSortedUniquePosts(allPosts) {
  let sortedPosts = allPosts.reduce((previousData, currentData) => {
    return previousData.concat(
      currentData.sort(
        (a: string, b: string) =>
          new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()
      )
    )
  }, [])

  let sortedUniquePosts = sortedPosts.reduce((a, c) => {
    if (!a.find(v => v.postID === c.postID)) {
      a.push(c)
    }
    return a
  }, [])

  return sortedUniquePosts
}

[aturancetin]

You can use isIdle which is a boolean that indicates if the response is an empty array or not

[Moshyfawn]

You might be doing something wrong. isLoading should be false if the promise has been resolved even of you don't have any pages in the response

See this CSB