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 = 3const 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()