useInfiniteQuery
Example
import {useInfiniteQuery} from "blitz"import getProjectsInfinite from "app/projects/queries/getProjectsInfinite"function Projects(props) { const [groupedProjects, {isFetching, isFetchingMore, fetchMore, canFetchMore}] = useInfiniteQuery( getProjectsInfinite, (page = {take: 3, skip: 0}) => page, { getFetchMore: (lastGroup) => lastGroup.nextPage, }, ) return ( <> {groupedProjects.map((group, i) => ( <React.Fragment key={i}> {group.projects.map((project) => ( <p key={project.id}>{project.name}</p> ))} </React.Fragment> ))} <div> <button onClick={() => fetchMore()} disabled={!canFetchMore || !!isFetchingMore}> {isFetchingMore ? "Loading more..." : canFetchMore ? "Load More" : "Nothing more to load"} </button> </div> <div>{isFetching && !isFetchingMore ? "Fetching..." : null}</div> </> )}
And here’s the query to work with that:
export default async function getProjectsInfinite({ where, orderBy, take, skip,}: GetProjectsInfiniteInput) { const projects = await db.project.findMany({ where, orderBy, take, skip, }) const count = await db.project.count() const hasMore = skip! + take! < count const nextPage = hasMore ? {take, skip: skip! + take!} : null return { projects, nextPage, }}
API
const [ groupedQueryFunctionResults, { isFetching, failureCount, refetch, fetchMore, canFetchMore, setQueryData, }] = useQuery(queryResolver, getQueryInputArguments, { getFetchMore: (lastPage, allPages) => fetchMoreVariable ...queryOptions,})
Arguments
queryResolver:
A Blitz query resolver- Required
getQueryInputArguments: (fetchMoreVariable) => queryInputArguments
- Required
- A function that accepts the current page options and returns the
queryInputArguments
- On the first page load,
fetchMoreVariable
isundefined
. - For subsequent pages,
fetchMoreVariable
is whatever is returned fromgetFetchMore()
options
- Optional
Options
The options are identical to the options for the
useQuery hook with the addition of the following:
getFetchMore: Function(lastPage, allPages) => fetchMoreVariable | Boolean
- When new data is received for this query, this function receives both the last page of the infinite list of data and the full array of all pages.
- It should return a single variable that will be passed as the argument to
getQueryInputArguments()
Returns
[groupedQueryFunctionResults, queryExtras]
groupedQueryFunctionResults: Array<any>
- Defaults to
[]
. - The array will contain each “page” of data that has been requested
queryExtras: Object
isFetching: Boolean
- Will be
true
if the query is currently fetching, including background fetching.
- Will be
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
fetchMore()
-Function(fetchMoreVariableOverride, { previous }) => Promise
- This function allows you to fetch the next “page” of results.
- fetchMoreVariableOverride allows you to optionally override the fetch more variable returned from your getCanFetchMore option to your query function to retrieve the next page of results.
- previous option which will determine if the data you are fetching is should be prepended instead of appended to your infinite list. e.g.
fetchMore(nextPageVars, { previous: true })
canFetchMore: Boolean
- If using
paginated
mode, this will betrue
if there is more data to be fetched (known via the requiredgetFetchMore
option function).
- If using
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()