Ответ 1
Если вы хотите использовать GraphQL для извлечения ваших данных, вам необходимо создать sourceNode. Документ о создании плагина источника может помочь вам.
Выполните следующие шаги, чтобы иметь возможность запрашивать данные randomuser с помощью graphQL в вашем проекте Gatsby.
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).
Как только вы получите данные результатов из API-интерфейса randomuser, вам просто нужно создать этот объект-узел и передать его функции createNode().
Здесь мы сопоставляем результаты, как вы хотели получить 500 randomusers https://randomuser.me/api/?results=500.
создайте объект userNode с необходимыми полями. Вы можете добавить больше полей в зависимости от того, какие данные вы хотите использовать в своем приложении.
Просто создайте узел с помощью функции createNode() API Gatsby.
2) запрашивать данные с помощью GraphiQL
Как только вы это сделали, запустите gatsby develop и перейдите на http://localhost: 8000/___ 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
}
}
}
}
}
';
Вот и все!