Small API queries in Gatsby with GraphQL and React

Question

I'm trying to import items from Airtable to Gatsby. My table has close to 800 records. It's not a heavy load per se, but I would like to render a few items at a time, with a "more" button to call the next batch. This is not obvious in Gatsby, since it seems to be directed to queries of smaller databases.

What is the best course of action here? I've tried adding a function to the button that updates the startIndex and endIndex variables, but the page won't render again, and simply attaching a forceUpdate to the Button will not work. I've also tried moving the items list to a component but placing the button next to it always throws an error. Should I store the query in a const first? Has anyone attempted this before?


import { graphql } from "gatsby"

export const query = graphql`
  {
    allAirtable(sort: {order: ASC, fields: id}, limit: 100) {
      nodes {
        id
        data {
          Name
          Area
          Year
        }
      }
    }
  }
 ` 

let startIndex = 0;
let endIndex = 10;

const IndexPage = ({ data }) => {

  return(
  <div>
    <h1>Item list</h1>
    <p>Page count: {data.allAirtable.pageInfo.pageCount}</p>
    <ul>
      {data.allAirtable.nodes.slice([startIndex], [endIndex]).map(node => (

        <li key={node.id}>
          {node.data.Name} <br />
          {node.data.Area} <br />
          {node.data.Year} <br />
        </li>

      ))}
    </ul>
    <button>More</button>
  </div>
 )}

 export default IndexPage

xadm xadm · Accepted Answer · 2020-08-14T21:11:52

Search for 'load more in gatsby' ...

'Initial' gatsby query is for generate static content (gatsby 'server' doesn't exists later) - 'load more' is dynamic, can't be done this way, only paginaltion possible - see gatsby docs. Also read about 'fetch build and run time'.

Dynamics can be done with 'normal' (for react - run time) graphql client (f.e. apollo) ... or loading some prepared, generated (by gatsby) static json files with fetch/axios.

Small API queries in Gatsby with GraphQL and React

2 Answers