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

Interested in more daily treasures like this one?
Sent directly to your inbox?