GatsbyJS получает данные из Restful API

Вы можете получать данные в интерфейсе из API, используя response useEffect. Он работает отлично, и вы больше не увидите никаких ошибок во время сборки.

 const [starsCount, setStarsCount] = useState(0)
  useEffect(() => {
    // get data from GitHub api
    fetch(`https://api.github.com/repos/gatsbyjs/gatsby`)
      .then(response => response.json()) // parse JSON from request
      .then(resultData => {
        setStarsCount(resultData.stargazers_count)
      }) // set data for the number of stars
  }, [])

Если вы хотите использовать GraphQL для получения данных, вам нужно создать sourceNode. Документ о создании исходного плагина может помочь ты.

Выполните следующие действия, чтобы иметь возможность запрашивать randomuser данные с помощью GraphQL в вашем проекте Gatsby.

1) Создайте узлы в gatsby-node.js

В корневой папке проекта добавьте этот код в gatsby-node.js:

const axios = require('axios');
const crypto = require('crypto');

exports.sourceNodes = async ({ actions }) => {
  const { createNode } = actions;

  // fetch raw data from the randomuser api
  const fetchRandomUser = () => axios.get(`https://randomuser.me/api/?results=500`);
  // await for results
  const res = await fetchRandomUser();

  // map into these results and create nodes
  res.data.results.map((user, i) => {
    // Create your node object
    const userNode = {
      // Required fields
      id: `${i}`,
      parent: `__SOURCE__`,
      internal: {
        type: `RandomUser`, // name of the graphQL query --> allRandomUser {}
        // contentDigest will be added just after
        // but it is required
      },
      children: [],

      // Other fields that you want to query with graphQl
      gender: user.gender,
      name: {
        title: user.name.title,
        first: user.name.first,
        last: user.name.last,
      },
      picture: {
        large: user.picture.large,
        medium: user.picture.medium,
        thumbnail: user.picture.thumbnail,
      }
      // etc...
    }

    // Get content digest of node. (Required field)
    const contentDigest = crypto
      .createHash(`md5`)
      .update(JSON.stringify(userNode))
      .digest(`hex`);
    // add it to userNode
    userNode.internal.contentDigest = contentDigest;

    // Create node with the gatsby createNode() API
    createNode(userNode);
  });

  return;
}

Я использовал axios для получения данных, поэтому вам нужно будет установить его: npm install --save axios

Объяснение:

Цель состоит в том, чтобы создать каждый узел для каждого фрагмента данных, который вы хотите использовать. Согласно документации createNode, вы должны предоставить объекту несколько обязательных полей (идентификатор, родительский, внутренний, дочерний).

Как только вы получите данные результатов из API randomuser, вам просто нужно создать этот объект узла и передать его функции createNode().

Здесь мы сопоставляем результаты, так как вы хотели получить 500 случайных пользователей https://randomuser.me/api/?results=500.

Создайте объект userNode с обязательными и желаемыми полями. Вы можете добавить больше полей в зависимости от того, какие данные вы хотите использовать в своем приложении.

Просто создайте узел с функцией createNode() API Гэтсби.

2) Запросите свои данные с помощью GraphQL

После этого запустите gatsby develop и перейдите к http://localhost:8000/___graphql.

Вы можете поиграть с GraphQL, чтобы создать свой идеальный запрос. Поскольку мы назвали internal.type нашего объекта узла 'RandomUser', мы можем запросить allRandomUser, чтобы получить наши данные.

{
  allRandomUser {
    edges {
      node {
        gender
        name {
          title
          first
          last
        }
        picture {
          large
          medium
          thumbnail
        }
      }
    }
  }
}

3) Используйте этот запрос на своей странице Gatsby.

На своей странице, например src/pages/index.js, используйте запрос и отобразите свои данные:

import React from 'react'
import Link from 'gatsby-link'

const IndexPage = (props) => {
  const users = props.data.allRandomUser.edges;

  return (
    <div>
      {users.map((user, i) => {
        const userData = user.node;
        return (
          <div key={i}>
            <p>Name: {userData.name.first}</p>
            <img src={userData.picture.medium} />
          </div>
        )
      })}
    </div>
  );
};

export default IndexPage

export const query = graphql`
  query RandomUserQuery {
    allRandomUser {
      edges {
        node {
          gender
          name {
            title
            first
            last
          }
          picture {
            large
            medium
            thumbnail
          }
        }
      }
    }
  }
`;

Вот и все!

Большое спасибо, у меня все работает нормально, я изменяю только небольшие части gastbyjs-node.js, потому что он делает ошибку при использовании sync & await, я думаю, мне нужно изменить какой-то раздел процесса сборки, чтобы использовать babel, чтобы я мог использовать синхронизацию или ждать.

Вот код, который мне подходит.

 const axios = require('axios');
 const crypto = require('crypto');

 // exports.sourceNodes = async ({ boundActionCreators }) => {
 exports.sourceNodes = ({boundActionCreators}) => {
const {createNode} = boundActionCreators;
return new Promise((resolve, reject) => {

// fetch raw data from the randomuser api
// const fetchRandomUser = () => axios.get(`https://randomuser.me/api/?results=500`);
// await for results
// const res = await fetchRandomUser();

axios.get(`https://randomuser.me/api/?results=500`).then(res => {

  // map into these results and create nodes
  res.data.results.map((user, i) => {

    // Create your node object
    const userNode = {
      // Required fields
      id: `${i}`,
      parent: `__SOURCE__`,
      internal: {
        type: `RandomUser`, // name of the graphQL query --> allRandomUser {}
        // contentDigest will be added just after
        // but it is required
      },
      children: [],

      // Other fields that you want to query with graphQl
      gender: user.gender,
      name: {
        title: user.name.title,
        first: user.name.first,
        last: user.name.last
      },
      picture: {
        large: user.picture.large,
        medium: user.picture.medium,
        thumbnail: user.picture.thumbnail
      }
      // etc...
    }

    // Get content digest of node. (Required field)
    const contentDigest = crypto.createHash(`md5`).update(JSON.stringify(userNode)).digest(`hex`);
    // add it to userNode
    userNode.internal.contentDigest = contentDigest;

    // Create node with the gatsby createNode() API
    createNode(userNode);
  });
  resolve();
});

});

}

Принятый ответ для этого отлично работает, просто обратите внимание, что есть предупреждение об устаревании, если вы используете boundActionCreators. Его необходимо переименовать в actions, чтобы избежать этого предупреждения.

Приведенные выше ответы работают, за исключением того, что запрос на шаге 2, похоже, возвращает мне только один узел. Я могу вернуть все узлы, добавив totalCount в качестве брата ребер. Т.е.

{
  allRandomUser {
    totalCount
    edges {
      node {
        id
        gender
        name {
          first
          last
        }
      }
    }
  }
}