GatsbyJS получение данных из RESTful API

Я новичок как в React, так и в GatsbyJS. Я смущен и не мог понять, как простым способом загрузить данные из стороннего RESTful API.

например: я хотел бы получить данные от randomuser.me / API, а затем иметь возможность использовать данные на страницах.

скажем что-то вроде этого : 

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

class User extends React.Component {
constructor(){
  super();
  this.state = {
    pictures:[],
  };

}

componentDidMount(){
  fetch('https://randomuser.me/api/?results=500')
  .then(results=>{
    return results.json();
  })
  .then(data=>{
    let pictures = data.results.map((pic,i)=>{
        return(
          <div key={i} >
            <img key={i} src={pic.picture.medium}/>
          </div>
        )
    })
    this.setState({pictures:pictures})
  })
}

render() {
  return (<div>{this.state.pictures}</div>)
}
}

export default User;

но я хотел бы получить помощь GraphQL, чтобы фильтровать и сортировать пользователя и т. д......

не могли бы вы помочь мне найти образец как я могу получить данные и вставить их в GraphQL на gatsby-node.js

13
gatsby

2 ответов

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

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

1) создание узлов в Гэтсби-узле.js

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

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

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

  // 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, вы должны предоставить объект с несколькими обязательными полями (id, parent, internal, children).

как только вы получите данные от API randomuser, вам просто нужно создать этот объект узла и передать его

25

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

вот код, который работает для меня. 

 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();
});

});

}
4