GatsbyJS abrufen von Daten aus Restful API

Wenn Sie verwenden möchten GraphQL zu Holen Ihre Daten, die Sie haben, um eine sourceNode. Der doc über erstellen Sie ein source-plugin konnte dir helfen.

Gehen Sie folgendermaßen vor, um in der Lage, Abfrage randomuser Daten mit graphQL in Ihrer Gatsby Projekt.

1) erzeugen der Knoten in gatsby-node.js

In Ihrem root-Ordner Projekt, fügen Sie diesen 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;
}

Ich verwendet axios zum abrufen von Daten, so dass Sie brauchen, um es zu installieren: npm install --save axios

Erklärung:

Ziel ist jeder Knoten für jedes Stück von Daten verwenden möchten.
Nach der createNode Dokumentation, Sie haben, um ein Objekt mit wenigen erforderlichen Felder (id, Eltern, innere Kinder).

Sobald Sie die Ergebnisse, die Daten aus der randomuser API, Sie müssen nur zu erstellen, das node-Objekt und übergeben es an die createNode() Funktion.

Hier, die wir anzeigen, um die Ergebnisse, wie Sie wollte 500 randomusers https://randomuser.me/api/?results=500.

erstellen der userNode - Objekt mit den erforderlichen und wollte Felder.
Sie können fügen Sie weitere Felder, je nachdem, welche Daten Sie verwenden möchten, in Ihrer app.

Erstellen Sie einfach die Knoten mit der createNode() Funktion der Gatsby-API.

2) Abfrage Ihrer Daten mit GraphiQL

Sobald Sie das getan, laufen gatsby develop und gehen Sie zu http://localhost:8000/___graphql.

Können Sie spielen mit graphiQL erstellen Ihre perfekte Abfrage. Als wir den Namen der internal.type unserer Knoten-Objekt 'RandomUser' können wir die Abfrage allRandomUser um unsere Daten.

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

3) verwenden Sie diese Abfrage in Ihrer gatsby Seite

In Ihre Seite ein, zum Beispiel src/pages/index.js verwenden Sie die Abfrage und Anzeige Ihrer Daten:

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

Dass ist es !

Antworten über Arbeit, außer der Abfrage in Schritt 2 scheint nur ein Knoten für mich. Ich kann wieder alle Knoten durch hinzufügen totalCount als Geschwister von Kanten. I. e.

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