GatsbyJS obtention des données d'API Restful

Si vous souhaitez utiliser GraphQL pour récupérer vos données, vous devez créer un sourceNode. La doc sur la création d'une source de plugin pourrait vous aider.

Suivez ces étapes pour être en mesure d'interroger randomuser de données avec graphQL dans votre Gatsby projet.

1) créer des nœuds dans gatsby-node.js

Dans votre dossier racine du projet, ajoutez ce code à 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;
}

J'ai utilisé axios pour récupérer les données de sorte que vous aurez besoin pour l'installer: npm install --save axios

explication:

L'objectif est de créer chaque nœud pour chaque morceau de données que vous souhaitez utiliser.
Selon le createNode documentation, vous devez fournir un objet avec quelques champs requis (id, parent, intérieur, enfants).

Une fois que vous obtenez les résultats des données de la randomuser API, vous avez juste besoin de créer ce nœud d'objet et de le passer à la createNode() fonction.

Ici, nous avons la carte pour les résultats que vous vouliez obtenir 500 randomusers https://randomuser.me/api/?results=500.

créer le userNode objet avec le nécessaire et je voulais champs.
Vous pouvez ajouter plus de champs en fonction de ce que les données que vous souhaitez utiliser dans votre application.

Il suffit de créer le nœud avec le createNode() fonction de l'Gatsby API.

2) interroger vos données avec GraphiQL

Une fois que vous avez fait cela, exécutez gatsby develop et aller à http://localhost:8000/___graphql.

Vous pouvez jouer avec graphiQL pour créer parfait de votre requête. Comme nous avons nommé le internal.type de notre objet de nœud 'RandomUser', nous pouvons nous interroger allRandomUser pour obtenir nos données.

{
  allRandomUser {
    edges {
      node {
        gender
        name {
          title
          first
          last
        }
        picture {
          large
          medium
          thumbnail
        }
      }
    }
  }
}

3) utilisez cette requête dans votre gatsby page

Dans votre page, par exemple src/pages/index.js, utilisez la requête et l'affichage de vos données:

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
          }
        }
      }
    }
  }
`;

Qui est !

Les réponses données ci-dessus, à l'exception de la requête à l'étape 2 semble être la seule à revenir un nœud pour moi. Je peux retourner tous les nœuds en ajoutant totalCount comme un frère ou une sœur de bords. I. e.

{
allRandomUser {
totalCount
edges {
node {
id
gender
name {
first
last
}
}
}
}
}