Imperative Handles

Sometimes you need to perform some imperative task on a query (refetching, loading the next page, etc). For these situations, you should use the $handle variant on the query prop. For example:

src/routes/shows/+page.tsx

export default function ({ ShowList$handle }) {
    return (
        <>
            <button onClick={ShowList$handle.loadNextPage}>
                Load Next
            </button>
            {ShowList.shows.map(show => (
                <div>
                    {show.title}
                </div>
            ))}
        </>
    )
}

src/routes/shows/+page.jsx

export default function ({ ShowList$handle }) {
    return (<>
            <button onClick={ShowList$handle.loadNextPage}>
                Load Next
            </button>
            {ShowList.shows.map(show => (<div>
                    {show.title}
                </div>))}
        </>)
}

The existing React source only documents the imperative handle entry point for pagination-style actions such as loading the next page. A fuller React pagination guide needs source copy before it can be completed.