web-dev-qa-db-fra.com

GatsbyJS récupère les données de l'API Restful

Je suis nouveau dans React et GatsbyJS. Je suis confus et je n'arrive pas à comprendre de manière simple le chargement de données à partir d'une API reposante tierce. 

par exemple: je voudrais extraire des données de randomuser.me/API pour pouvoir ensuite utiliser les données dans des pages.

Disons quelque chose comme ceci: 

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;

Mais je voudrais obtenir l’aide de GraphQL afin de filtrer et trier les utilisateurs et etc… .. 

Pourriez-vous s'il vous plaît m'aider à trouver l'exemple sur la façon dont je peux récupérer des données et les insérer dans GraphQL sur gatsby-node.js

gatsby
23
Code7885

Si vous souhaitez utiliser GraphQL pour récupérer vos données, vous devez créer un sourceNode. Le doc sur créer un plugin source pourrait vous aider.

Suivez ces étapes pour pouvoir interroger des données randomuser avec graphQL dans votre projet Gatsby.

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

Dans votre dossier de projet racine, 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 des données, vous devrez donc les installer: npm install --save axios

explication:

Le but est de créer chaque noeud pour chaque donnée que vous voulez utiliser . Selon la documentation createNode , vous devez fournir un objet avec quelques champs obligatoires (id, parent, interne, enfants).

Une fois que vous obtenez les données de résultats de l'API randomuser, il vous suffit de créer cet objet nœud et de le transmettre à la fonction createNode().

Ici, nous mettons en correspondance les résultats car vous vouliez obtenir 500 utilisateurs aléatoires https://randomuser.me/api/?results=500.

créer l'objet userNode avec les champs obligatoires et souhaités . Vous pouvez ajouter d'autres champs en fonction des données que vous souhaitez utiliser dans votre application.

Créez simplement le nœud avec la fonction createNode() de l'API Gatsby.

2) interroger vos données avec GraphiQL

Une fois que vous avez fait cela, lancez gatsby develop et accédez à http: // localhost: 8000/___ graphql .

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

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

3) utiliser cette requête dans votre page gatsby

Dans votre page, par exemple src/pages/index.js, utilisez la requête et affichez 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
          }
        }
      }
    }
  }
`;

C'est ça !

40
Nenu

Merci beaucoup, cela fonctionne très bien pour moi, je ne change que de petites parties du fichier gastbyjs-node.js car il y a une erreur lors de l'utilisation de la synchronisation et j'attends, je pense que j'ai besoin de modifier une section du processus de construction pour utiliser babel utiliser sync ou wait. 

Voici le code qui fonctionne pour moi. 

 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();
});

});

}
4
Code7885

Les réponses données ci-dessus fonctionnent, sauf que la requête de l'étape 2 semble ne me renvoyer qu'un seul nœud. Je peux renvoyer tous les nœuds en ajoutant totalCount en tant que frère des bords. C'est à dire. 

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

0
scaganoff