GatsbyJS从RestfulAPI获取数据

但我想得到GraphQL的帮助,以便对用户等进行过滤和排序......

您能否帮我找一下如何获取数据并将其插入GraphQL的示例 gatsby-node.js

如果要使用GraphQL获取数据,则必须创建sourceNode.有关创建源插件的文档可以帮助您.

按照以下步骤,可以在Gatsby项目中使用graphQL查询随机用户数据.

1)在gatsby-node.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).

从randomuser API获取结果数据后,您只需创建此节点对象并将其传递给该createNode()函数.

在这里,我们映射到您希望获得500个随机用户的结果https://randomuser.me/api/?results=500.

userNode使用必填字段和所需字段创建对象.您可以根据要在应用中使用的数据添加更多字段.

只需使用createNode()Gatsby API 的功能创建节点.

2)使用GraphiQL查询您的数据

完成后,运行gatsby develop并转到http:// localhost:8000/___ graphql.

您可以使用graphiQL来创建完美的查询.当我们命名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 (
    

      {users.map((user, i) => {
        const userData = user.node;
        return (
          

            
Name: {userData.name.first}
            
          
        )
      })}
    
  );
};

export default IndexPage

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

这就对了 !

非常感谢，对我来说这是工作的罚款，我只改变gastbyjs-的node.js的一小部分，因为它使一个错误，当使用同步和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();
});

});

}