我是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
Nen*_*enu 59
如果要使用GraphQL获取数据,则必须创建sourceNode.有关创建源插件的文档可以帮助您.
按照以下步骤,可以在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.
您可以使用graphiQL来创建完美的查询.当我们命名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
}
}
}
}
}
`;
这就对了 !
非常感谢，对我来说这是工作的罚款，我只改变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();
});
});
}
您可以使用react从API在前端获取数据useEffect。它工作得很好，你将不再在builtime上看到任何错误
const [starsCount, setStarsCount] = useState(0)
useEffect(() => {
// get data from GitHub api
fetch(`https://api.github.com/repos/gatsbyjs/gatsby`)
.then(response => response.json()) // parse JSON from request
.then(resultData => {
setStarsCount(resultData.stargazers_count)
}) // set data for the number of stars
}, [])
| 归档时间： |
|
| 查看次数： |
15144 次 |
| 最近记录： |