React Query pagination with Gatsby (File System Route API)
For Prune your follows, we already had an URL structure for filters like this:
But for most filters, there are more than 60 accounts, so we added pagination by:
- Capturing the page number using the Gatsby File System Route API 1️⃣
- Extending the React Query cache key with the page number 2️⃣
- Calculating an offset using the page number 3️⃣
- Passing along the offset with our query for filtered accounts 4️⃣
// ./src/pages/app/filter/[filter]/[...page].js 👈👈👈 1️⃣
import React from "react";
import axios from "axios";
import { useQuery } from "@tanstack/react-query";
export default function SearchPage(props) {
const pageIndex = parseInt(props.page) || 0;
const size = 60;
const offset = pageIndex * size; //👈👈👈 3️⃣
const { data } = useQuery({
queryKey: ["accounts", props.filter, props.page], // 👈👈👈 2️⃣
queryFn: ({ signal }) =>
axios.get("/api/accounts", {
params: {
size: size,
filter: props.filter,
offset: offset, //👈👈👈 4️⃣
},
signal: signal,
}),
select: (result) => result.data,
});
return (
<ul>
{(data?.records || []).map((record) => (
<li key={record.accountId}>
{record.name} @{record.username}
</li>
))}
</ul>
);
}If "capturing the page number using the Gatsby File System Route API" made no sense, then Url-based (client-side) pagination with Gatsby is for you.
All the best,
Queen Raae