当前位置: 首页 > 面试题库 >

GatsbyJS从Restful API获取数据

吕新
2023-03-14
问题内容

我是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


问题答案:

如果您想使用GraphQL来获取数据,则必须创建一个sourceNode。有关创建源插件的文档可以为您提供帮助。

请按照以下步骤操作,以使用randomuserGatsby项目中的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)使用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
          }
        }
      }
    }
  }
`;

这就对了!



 类似资料:
  • thinkphp5编写的restful风格的API,集API请求处理,权限认证,自动生成文档等功能

  • 问题内容: 日志,为什么? 问题答案: 为了详细说明@Raynos所说的内容,您定义的函数是一个异步回调。它不会立即执行,而是在文件加载完成后执行。当您调用readFile时,将立即返回控件并执行下一行代码。因此,当您调用console.log时,尚未调用您的回调,并且尚未设置此内容。欢迎使用异步编程。 示例方法 或者更好的是,如Raynos的示例所示,将您的调用包装在一个函数中并传递您自己的回调

  • 我一直在尝试使用nativescript创建一个android应用程序。我正在使用fetch模块从服务器获取响应。当我试图从httpbin获得响应时。org/get,没关系。但当我试图从本地服务器获取响应时,网络请求失败。错误 发送到httpbin。组织/获取- 发送到本地主机:8000/api- 当我尝试从纯节点中的localhost:8000/api获取响应时。js通过请求模块。它工作得很好。

  • 我正试图用盖茨比创建一个博客。我遵循这个教程 https://www.gatsbyjs.org/docs/recipes/#optimizing-使用盖茨比图像查询后frontmatter中的图像 博客包含标题、特色图片和文本。 MDX文件结构如下所示。 并且,代码在文件gatsby节点中。像这样 在模板中,将使用此查询提取图像。 我的主要问题是在gatsby节点中编写GraphQL查询。js。我

  • 我需要从firestore中的以下数据结构中获取formName和id的数据。在这种情况下,如何获取数据,比如创建嵌套对象?