使用 GraphQL 和 React 在 Gatsby 中进行小型 API 查询

Question

我正在尝试将项目从 Airtable 导入到 Gatsby。我的 table 有将近 800 条记录。这本身并不是一个沉重的负担，但我想一次渲染几个项目，用一个“更多”按钮来调用下一批。这在 Gatsby 中并不明显，因为它似乎是针对较小数据库的查询。

最好的做法是什么？我已经尝试向更新 startIndex 和 endIndex 变量的按钮添加一个函数，但页面不会再次呈现，并且简单地将 forceUpdate 附加到 Button 将不起作用。我也试过将项目列表移动到一个组件，但将按钮放在它旁边总是会引发错误。我应该先将查询存储在 const 中吗？以前有人尝试过吗？


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

Answer 1

搜索 'load more in gatsby' ...

'Initial' gatsby 查询用于生成静态内容（gatsby 'server' 以后不存在）- 'load more' 是动态的， 不能这样做方式 ，只能分页 - 请参阅 gatsby 文档。另请阅读 'fetch build and run time'.

Dynamics 可以用 'normal'（反应 - 运行时间）graphql 客户端（f.e.apollo）...或加载一些准备好的，生成的（由 gatsby）静态 json 文件 fetch/axios.

Answer 2

有几种方法可以做到这一点。对于某些用例，运行您查询客户端的 GraphQL 服务器（例如使用 Apollo）并使用 Gatsby 中的 GraphQL 拼接来呈现初始内容服务器端是有意义的。对于更简单的事情，例如在提要中加载更多帖子，您会得到 pre-compiled 对每个预期查询的响应。过去，我通过在 gatsby-node.js 中查询我想要的数据并用分块数据（在 public 中）写出 JSON 文件并发出正常的 HTTP 查询来完成此操作client-side 中需要的那些文件。这应该相对简单，但如果您需要更多帮助或示例实现，请在评论中告诉我。

使用 GraphQL 和 React 在 Gatsby 中进行小型 API 查询

Small API queries in Gatsby with GraphQL and React

reactjs

graphql

gatsby

airtable