usePaginatedQuery

Example

import {Suspense} from "react"
import {
  Link,
  BlitzPage,
  usePaginatedQuery,
  useRouterQuery,
  useRouter,
} from "blitz"
import getProjects from "app/products/queries/getProjects"

const ITEMS_PER_PAGE = 3

const Projects = () => {
  const router = useRouter()
  const {page = 0} = useRouterQuery()
  const [{projects, hasMore}] = usePaginatedQuery(getProjects, {
    skip: ITEMS_PER_PAGE * Number(page),
    take: ITEMS_PER_PAGE,
  })

  const goToPreviousPage = () =>
    router.push({query: {page: Number(page) - 1}})
  const goToNextPage = () =>
    router.push({query: {page: Number(page) + 1}})

  return (
    <div>
      {projects.map((project) => (
        <p key={project.id}>
          <Link
            href="/projects/[handle]"
            as={`/projects/${project.handle}`}
          >
            <a>{project.name}</a>
          </Link>
        </p>
      ))}
      <button disabled={page === 0} onClick={goToPreviousPage}>
        Previous
      </button>
      <button disabled={!hasMore} onClick={goToNextPage}>
        Next
      </button>
    </div>
  )
}

And here's the query to work with that:

export default async function getProjects(
  {where, orderBy, cursor, take, skip}: GetProjectsInput,
  ctx: Record<any, any> = {},
) {
  const projects = await db.project.findMany({
    where,
    orderBy,
    take,
    skip,
  })

  const count = await db.project.count()
  const hasMore = skip! + take! < count

  return {
    projects,
    hasMore,
  }
}

API

const [
  queryResult,
  {
    latestData,
    isFetching,
    failureCount,
    refetch,
  }
] = useQuery(queryResolver, queryInputArguments, options)

Arguments

• queryResolver: A Blitz query resolver
  • Required
• queryInputArguments
  • Required
  • The arguments that will be passed to queryResolver
• options
  • Optional

Options

The options are identical to the options for the useQuery hook

Returns

[queryResult, queryExtras]

queryResult: Any

• Defaults to undefined.
• The last successfully resolved data for the query.
• When fetching with new input arguments, the value will resolve to the last known successful value, regardless of input arguments

queryExtras: Object

• latestData: Any
  • Defaults to undefined.
  • The actual data object for this query and its specific input arguments
  • When fetching an uncached query, this value will be undefined
• isFetching: Boolean
  • Will be true if the query is currently fetching, including background fetching.
• failureCount: Integer
  • The failure count for the query.
  • Incremented every time the query fails.
  • Reset to 0 when the query succeeds.
• refetch: Function({ force, throwOnError }) => void
  • A function to manually refetch the query if it is stale.
  • To bypass the stale check, you can pass the force: true option and refetch it regardless of it's freshness
  • If the query errors, the error will only be logged. If you want an error to be thrown, pass the throwOnError: true option
• setQueryData() - Function(newData, opts) => void
  • A function to manually update the cache for a query.
  • newData can be an object of new data or a function that receives the old data and returns the new data
  • This is often used to instantly update the cache after submitting a form
  • After updating the cache, this will automatically call refetch() to ensure the data is correct. Disable refetch by passing an options object {refetch: false} as the second argument.
  • See the Blitz mutation usage docs for example usage of setQueryData()