PROSAGA码农传奇-IDataAPI-GatsbyJS从Restful API获取数据

0# 哈哈 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  <P>
    如果要使用GraphQL获取数据，则必须创建sourceNode。关于的文件
    <a href="https://www.gatsbyjs.org/docs/create-source-plugin/#create-source-plugin" rel="noreferrer">
      创建源插件
    </A>
     可以帮到你。
  </p>
  <P>
    按照以下步骤，可以在Gatsby项目中使用graphQL查询随机用户数据。
  </p>
  <H2>
    1）在gatsby-node.js中创建节点
  </H2>
  <P>
    在根项目文件夹中，将此代码添加到
     <code>
      gatsby-node.js
    </code>
    ：
  </p>
   <pre>
    <code>
      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;
}

</code>
  </pre>
  <BLOCKQUOTE>
    <P>
      我用了
       <code>
        axios
      </code>
       获取数据，因此您需要安装它：
       <code>
        npm install --save axios
      </code>
    </p>
  </BLOCKQUOTE>
  <H3>
    说明：
  </H3>
  <P>
    目标是为您想要使用的每个数据创建每个节点。
根据
    <a href="https://www.gatsbyjs.org/docs/bound-action-creators/#createNode" rel="noreferrer">
      createNode文档
    </A>
    ，你必须提供一个包含很少必填字段的对象（id，parent，internal，children）。
  </p>
  <P>
    从randomuser API获取结果数据后，您只需创建此节点对象并将其传递给
     <code>
      createNode()
    </code>
     功能。
  </p>
  <P>
    在这里，我们映射到您希望获得500个随机用户的结果
     <code>
      https://randomuser.me/api/?results=500
    </code>
    。
  </p>
  <P>
    创造
     <code>
      userNode
    </code>
     具有必填字段和所需字段的对象。
您可以根据要在应用中使用的数据添加更多字段。
  </p>
  <P>
    只需用。创建节点
     <code>
      createNode()
    </code>
     Gatsby API的功能。
  </p>
  <H2>
    2）使用GraphiQL查询您的数据
  </H2>
  <P>
    一旦你这样做，运行
     <code>
      gatsby develop
    </code>
     然后去
    <a href="http://localhost:8000/___graphql" rel="noreferrer">
      HTTP：//本地主机：8000 / ___ graphql
    </A>
    。
  </p>
  <P>
    您可以使用graphiQL来创建完美的查询。正如我们所说的那样
     <code>
      internal.type
    </code>
     我们的节点对象
     <code>
      'RandomUser'
    </code>
    ，我们可以查询
     <code>
      allRandomUser
    </code>
     获取我们的数据。
  </p>
   <pre>
    <code>
      {
  allRandomUser {
    edges {
      node {
        gender
        name {
          title
          first
          last
        }
        picture {
          large
          medium
          thumbnail
        }
      }
    }
  }
}

</code>
  </pre>
  <H2>
    3）在你的gatsby页面中使用此查询
  </H2>
  <P>
    例如，在您的页面中
     <code>
      src/pages/index.js
    </code>
    ，使用查询并显示您的数据：
  </p>
   <pre>
    <code>
      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
          }
        }
      }
    }
  }
`;

</code>
  </pre>
  <P>
    这就对了 ！
  </p>
</DIV>

1# 一腔诗意喂了狗 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  <P>
    非常感谢，这对我来说很好，我只更改了gastbyjs-node.js的一小部分，因为它在使用sync＆amp; amp时会出错。等待，我想我需要更改构建过程的某些部分以使用babel来允许我使用sync或await。
  </p>
  <P>
    这是适合我的代码。
  </p>
   <pre>
    <code>
       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();
});

});

}

</code>
  </pre>
</DIV>

2# 一腔诗意 | 2019-08-31 10-32