我是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
。有关创建源插件的文档可以为您提供帮助。
请按照以下步骤操作,以使用randomuser
Gatsby项目中的GraphQL 查询数据。
在您的根项目文件夹中,将此代码添加到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 的功能创建节点。
完成后,运行gatsby develop
并转到http:// localhost:8000 / ___
graphql
。
您可以使用GraphQL创建完美的查询。当我们将internal.type
节点对象命名为时'RandomUser'
,我们可以进行查询allRandomUser
以获取数据。
{
allRandomUser {
edges {
node {
gender
name {
title
first
last
}
picture {
large
medium
thumbnail
}
}
}
}
}
例如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的数据。在这种情况下,如何获取数据,比如创建嵌套对象?