Блог

Главная - Вопросы по программированию - Извлекайте данные из api на стороне клиента, а не при сборке

Извлекайте данные из api на стороне клиента, а не при сборке

#javascript #reactjs #rest #gatsby

Вопрос:

Я перепробовал кучу материалов из документов Гэтсби и пытался возиться со страницей .js, ничего не хочет работать.

Код, который я хочу получить на стороне клиента, а не при сборке:

 const fetch = require("node-fetch")

const NODE_TYPE = `objkt`

exports.sourceNodes = async ({
  actions,
  createContentDigest,
  createNodeId,
}) => {
  const { createNode } = actions

  const response = await fetch(
    "https://staging.api.tzkt.io/v1/bigmaps/523/keys?value.issuer=tz1V9ZviaGUWZjGx4U7cGYFEyUGyqpFnVGXxamp;active=true"
  )
  const objkt = await response.json()

  objkt.forEach((node, index) => {
    createNode({
      ...node,
      id: createNodeId(`${NODE_TYPE}-${node.id}`),
      parent: null,
      children: [],
      internal: {
        type: NODE_TYPE,
        content: JSON.stringify(node),
        contentDigest: createContentDigest(node),
      },
    })
  })
}

exports.onPreInit = () => console.log("Loaded gatsby-node")

Я действительно не силен в этом, любая помощь в сборе данных на стороне клиента очень ценится. :/

Комментарии:

1. Как ведет себя этот код? В чем проблема?

2. В итоге это было решено с помощью useEffect() в page.js файл вместо использования gatsby-node.js с помощью createNode()

Ответ №1:

На самом деле я решил эту проблему с помощью:

импортировать реакцию из «реагировать»; импортировать стили из «../стили/стили.scss» импортировать заголовок из «../компоненты/заголовок»

экспорт класса по умолчанию FetchObjkts расширяет React.Компонент { состояние = { загрузка: true, объекты: [] };

асинхронный компонент didmount() { постоянный url = «https://staging.api.tzkt.io/v1/bigmaps/523/keys?value.issuer=tz1V9ZviaGUWZjGx4U7cGYFEyUGyqpFnVGXxamp;active=true»; const response = ожидание выборки(url); const data = ожидание ответа.json(); this.setState({ объекты: данные, загрузка: ложь }); }

визуализация() { … }

Вместо того, чтобы использовать узел для данных, я использовал useEffect() для извлечения со стороны клиента.

Метки: ,