Блог

Я пытаюсь импортировать элементы из Airtable в Gatsby. В моей таблице около 800 записей. Это не большая нагрузка сама по себе, но я хотел бы отображать несколько элементов за раз, нажимая кнопку «Еще» для вызова следующего пакета. В Gatsby это не очевидно, поскольку, похоже, оно направлено на запросы к базам данных меньшего размера.

Каков наилучший способ действий здесь? Я попытался добавить к кнопке функцию, которая обновляет переменные 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
  

Поиск 'load more in gatsby' …

«Начальный» запрос gatsby предназначен для создания статического содержимого (позже «сервер» gatsby не будет существовать) — «загрузить больше» является динамическим, не может быть сделано таким образом, возможен только разбиение на страницы — см. Документы gatsby. Также прочитайте о 'fetch build and run time' .

Динамику можно выполнить с помощью «обычного» (для времени выполнения react) клиента graphql (например, apollo)… или загрузка некоторых подготовленных, сгенерированных gatsby статических файлов json с помощью fetch / axios.

Есть несколько способов сделать это. Для некоторых вариантов использования имеет смысл запустить сервер GraphQL, к которому вы запрашиваете клиентскую часть (например, с помощью Apollo), и использовать сшивание GraphQL в Gatsby для отображения исходного содержимого на стороне сервера. Для чего-то более простого, например, для загрузки большего количества сообщений в ленту, вам будут полезны предварительно скомпилированные ответы на каждый из этих ожидаемых запросов. Я делал это в прошлом, запрашивая нужные мне данные в gatsby-node.js и выписывание файлов JSON с фрагментированными данными (в public ) и выдача обычных HTTP-запросов для этих файлов по мере необходимости со стороны клиента. Это должно быть относительно просто, но если вам нужна дополнительная помощь или пример реализации, дайте мне знать в комментариях.