tutorial - GatsbyJS obteniendo datos de la API Restful

gatsby tutorial

Question

Soy nuevo tanto en React como en GatsbyJS. Estoy confundido y no pude descifrar de una manera sencilla la carga de datos de la API Restful de terceros.

por ejemplo: me gustaría obtener datos de randomuser.me/API y luego poder usar los datos en las páginas.

Digamos algo como esto:

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;

Pero me gustaría obtener la ayuda de GraphQL para filtrar y clasificar los usuarios y etc ...

¿Podría ayudarme, por favor, a encontrar la muestra de cómo puedo obtener datos e insertarlos en GraphQL en gatsby-node.js

Answer 1

Las respuestas dadas anteriormente funcionan, excepto que la consulta en el paso 2 parece devolver solo un nodo para mí. Puedo devolver todos los nodos agregando totalCount como un hermano de bordes. Es decir

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

Answer 2

Muchas gracias, esto está funcionando bien para mí, solo cambio pequeñas partes del gastbyjs-node.js porque produce un error al usar sync y esperar, creo que necesito cambiar alguna sección de un proceso de construcción para usar babel para permitirme para utilizar la sincronización o esperar.

Aquí está el código que funciona para mí.

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

});

}

Answer 3

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

Siga estos pasos para poder consultar datos de usuarios aleatorios con graphQL en su proyecto Gatsby.

1) crear nodos en gatsby-node.js

En su carpeta de 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;
}

axios para obtener datos, así que necesitarás 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 tiene que crear este objeto de nodo y pasarlo a la función createNode() .

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

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

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

2) consulta tus datos con GraphiQL

Una vez que haya hecho eso, ejecute gatsby develop y vaya a http://localhost:8000/___graphql .

Puedes jugar con graphiQL para crear tu consulta perfecta. Como denominamos el tipo internal.type de nuestro objeto de nodo ''RandomUser'' , podemos consultar a allRandomUser para obtener nuestros datos.

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

3) Usa esta consulta en tu página de gatsby.

En su página, por ejemplo src/pages/index.js , use 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 !