📝 ✨ ~ React Query pagination with Gatsby (File System Route API)

Wed, 04 Jan 2023 00:00:00 GMT

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

Contrary to popular belief, Queen Raae and family have never worked for Gatsby.

🏝 🗓 ~ This week around the Gatsby islands

Mon, 10 Jan 2022 00:00:00 GMT

I had somehow convinced myself this is the week I turn 40, but alas its another year before I can join the rank of the older and wiser 🤪

This week there are two interesting webinars back to back on Thursday. One by Gatsby on Peak Frontend Performance and one on Managing Remote State w/ React Query. The latter is not Gatsby specific, but Gatsby + React Query = a Nice Setup.

I'll have to watch them both after the fact, as Thursday is also the day for our unauthorized and rum-fueled treasure hunt in the sharky waters around the Gatsby islands.

Last week fellow Blogging for Devs member Philo Hermans released Unlock. A product that should take all the pain out of selling software, including npm packages.

I think this could be a solution for those of us wanting to sell Gatsby Plugins...

Our streaming schedule this week

🔴 👩‍🏫 Static Site Generation (SSG) with #GatsbyJS · Live Screencast — Tuesday, January 11th @ 14:00 CET
🔴 🐶 Let's help Mirjam with #ConferenceBuddy v2.0 — Thursday, January 13th @ 19:00 CET
🔴 ⛵️ Working on the art site for the Pirate Princess · #OlaCast — Sunday, January 16th @ 11:30 CET

Other events

My birthday — Tuesday, January 11th 🥳
Achieving Peak Frontend Performance with Gatsby — Thursday, January 13th @ 17:00 CET · Gatsby
Managing Remote State w/ React Query — Thursday, January 13th @ 19:00 CET · cfe.dev

All the best,
Queen Raae

PS: If you have any tips for next week, let me know!

Posts tagged #react query

📝 ✨ ~ React Query pagination with Gatsby (File System Route API)

🏝 🗓 ~ This week around the Gatsby islands

Our streaming schedule this week

Other events