GatsbyJS obteniendo datos de Restful API

Solución:

Si desea utilizar GraphQL para obtener sus datos, debe crear un sourceNode. El documento sobre la creación de un complemento fuente podría ayudarlo.

Siga estos pasos para poder consultar randomuser datos con GraphQL en su proyecto Gatsby.

1) Crea nodos en gatsby-node.js

En la carpeta de su proyecto raíz, agregue este código a 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;
}

solía axios para obtener datos, por lo que deberá instalarlo: npm install --save axios

Explicación:

El objetivo es crear cada nodo para cada dato que desee utilizar. De acuerdo con la documentación de createNode, debe proporcionar un objeto con pocos campos obligatorios (id, parent, internal, children).

Una vez que obtenga los datos de resultados de la API de usuario aleatorio, solo necesita crear este objeto de nodo y pasarlo al createNode() función.

Aquí hacemos un mapa de los resultados, ya que deseaba obtener 500 usuarios aleatorios. https://randomuser.me/api/?results=500.

Crea el userNode objeto con los campos obligatorios y deseados. Puede agregar más campos según los datos que desee utilizar en su aplicación.

Simplemente crea el nodo con el createNode() función de la API de Gatsby.

2) Consulta tus datos con GraphQL

Una vez que hayas hecho eso, corre gatsby develop y vaya a http: // localhost: 8000 / ___ graphql.

Puedes jugar con GraphQL para crear tu consulta perfecta. Como nombramos al internal.type de nuestro objeto de nodo 'RandomUser', podemos consultar allRandomUser para obtener nuestros datos.

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

3) Utilice esta consulta en su página de Gatsby

En tu página, por ejemplo src/pages/index.js, utilice la consulta y muestre sus datos:

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

¡Eso es!

Muchas gracias, esto funciona bien para mí, solo cambio pequeñas partes de gastbyjs-node.js porque comete un error cuando uso sync & await, creo que necesito cambiar alguna sección de un proceso de compilación para usar babel para permitirme para usar sincronizar o esperar.

Aquí está el código que me funciona.

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

});

}

---

---

Utiliza Nuestro Buscador