#Tanstack with paginated queries

3 messages · Page 1 of 1 (latest)

lusty elkBOT
#

Hi @rustic plover. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Yes, there is a way to use paginated queries with Tanstack. However, as of the information available in the provided sources, the Convex React Query bindings, which would allow you to use Tanstack with paginated queries, are still under development. You can follow the progress of this feature on this GitHub issue (https://github.com/get-convex/convex-react-query/issues/1).

In the meantime, you can use the usePaginatedQuery hook provided by Convex for paginated queries. Here's an example of how you can use it:

const {results, status, loadMore} = usePaginatedQuery(
    'listTasks',
    { statuses: checkedValues},
    { initialNumItems: 10 }
)

You can also create a custom hook that provides a more stable behavior, like useStablePaginatedQuery. This hook ignores the intermediate loading states and only updates the results when the data has finished loading:

import { useRef } from 'react'
import { usePaginatedQuery } from '../convex/_generated/react'

export const useStablePaginatedQuery = ((name, ...args) => {
  const result = usePaginatedQuery(name, ...args)
  const stored = useRef(result)

  // If new data is still loading, wait and do nothing
  // If data has finished loading, use the ref to store it
  if (result.status !== 'LoadingMore') {
    stored.current = result
  }

  return stored.current
}) as typeof usePaginatedQuery

Please note that the code snippets provided are based on the information available in the provided sources and might need to be adjusted to fit your specific use case.