在 Gatsby 中使用 GraphQL 和 React 進行小型 API 查詢

Question

我正在嘗試將項目從 Airtable 導入到 Gatsby。 我的表有近 800 條記錄。 這本身並不是一個繁重的負載，但我想一次渲染幾個項目，並帶有一個“更多”按鈕來調用下一批。 這在 Gatsby 中並不明顯，因為它似乎是針對小型數據庫的查詢。

這里最好的做法是什么？ 我嘗試將 function 添加到更新 startIndex 和 endIndex 變量的按鈕，但頁面不會再次呈現，並且簡單地將forceUpdate附加到按鈕將不起作用。 我也嘗試將項目列表移動到一個組件，但將按鈕放在它旁邊總是會引發錯誤。 我應該先將查詢存儲在 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' ...

'初始' gatsby 查詢用於生成 static 內容（gatsby '服務器' 稍后不存在） - '加載更多' 是動態的，不能這樣做，只能分頁 - 請參閱 gatsby 文檔。 另請閱讀'fetch build and run time' 。

動態可以使用“正常”（用於反應 - 運行時間）graphql 客戶端（fe apollo）...或加載一些准備好的、生成的（由 gatsby）static Z466DEEC76ECDF5FCA6D38571/F6Zios24 文件來完成。

Answer 2

有幾種方法可以做到這一點。 對於某些用例，運行 GraphQL 服務器來查詢客戶端（例如使用 Apollo）並在 Gatsby 中使用 GraphQL 拼接來呈現初始內容服務器端是有意義的。 對於更簡單的事情，例如在提要中加載更多帖子，您會很好地為每個預期查詢的預編譯響應提供服務。 過去，我通過在 gatsby-node.js 中查詢我想要的數據並使用分塊數據（ public ）寫出 JSON 文件並根據需要從客戶端發出對這些文件的正常 HTTP 查詢來完成此操作。 這應該相對簡單，但是如果您需要更多幫助或示例實現，請在評論中告訴我。