GraphQL est devenu populaire récemment et est susceptible de remplacer l'API Rest. Dans ce tutoriel, nous utiliserons Apollo Client pour communiquer avec l'API GraphQL de GitHub. Nous allons intégrer Apollo Client à ReactJS, mais vous pouvez également l'utiliser avec plusieurs autres platesformes clients.

Ce didacticiel ne décrit pas comment démarrer un projet React, mais vous pouvez utiliser create-react-app pour commencer.

Une fois que nous avons l'application react prête à l'emploi, la prochaine chose à faire est d'installer les modules requis.

Installation de modules.

Le code suivant installe tous les modules requis.

npm install apollo-client-preset react-apollo graphql-tag graphql --save

Maintenant, nous pouvons fournir notre composant avec un client.

Fournir un client à un composant.

Vous pouvez fournir un client n'importe où dans votre hiérarchie de composants React. Cependant, il est toujours recommandé de fournir le composant, enveloppant l'ensemble de votre application, avec le client.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

import { ApolloProvider } from 'react-apollo';
import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';

const token = "YOUR_TOKEN";

const httpLink = {
  uri: 'https://api.github.com/graphql',
  headers: {
    authorization: `Bearer ${token}`
  }
};

const client = new ApolloClient({
  link: new HttpLink(httpLink),
  cache: new InMemoryCache()
});

ReactDOM.render(<ApolloProvider client={client}><App/></ApolloProvider>, document.getElementById('root'));

Ci-dessus, vous pouvez voir que nous avons défini l'URI pour GitHub et avons également utilisé un token spécifique pour les en-têtes headers. Vous devez utiliser votre propre token généré à partir de GitHub. N'oubliez donc pas de le remplacer par YOUR_TOKEN.

Pour cet exemple, nous avons défini le token d'API côté client. Cependant, vous ne devez pas révéler votre token API publiquement. Il est donc toujours bon de le conserver sur le serveur soustrait du côté client.

Notez que nous avons encapsulé le composant <App /> avec ApolloProvider et utilisé la variable client que nous avons créée pour le prop client.

Application GraphiQL

Avant de plonger dans les requêtes, je tiens à souligner qu'il existe un outil très pratique appelé GraphiQL pour tester vos requêtes GraphQL. Avant de continuer, assurez-vous de l'avoir téléchargé .

Une fois que vous ouvrez GraphiQL, vous devez définir le point de terminaison endpoint GraphQL et les en-têtes headers HTTP.

GraphQL Endpoint: api.github.com/graphql

Header Name: Authorization

Header Value: Bearer YOUR_TOKEN

Bien sûr, vous devez remplacer YOUR_TOKEN par votre propre token. N'oubliez pas d'inclure le porteur bearer devant votre token lors de la définition de la valeur du headers.

Si vous ne souhaitez pas télécharger d'application, vous pouvez également utiliser l' explorateur d'API GraphQL en ligne pour GitHub.

Requêtes GraphQL

Contrairement à une API REST avec plusieurs points de terminaison endpoints, l'API GraphQL n'a qu'un seul point de terminaison et vous ne récupérez que ce qui est défini par votre requête.

La documentation de l'API GraphQL de GitHub vous donne plus d'informations.

De plus, la meilleure chose de l'application GraphiQL est qu'elle vous donne accès à la documentation pour les requêtes directement dans l'application. Vous pouvez voir la barre latérale sur la droite nommée Docs.

Commençons par la requête la plus simple:

query{
  viewer{
    login
  }
}

Cette requête vous renvoie les informations de connexion du visualiseur. Dans ce cas, le visualiseur est vous puisque vous avez utilisé votre propre token API.

Dans ce tutoriel, je ne donnerai pas d'informations détaillées sur les requêtes. Vous pouvez toujours vous référer à la documentation et essayer des requêtes sur les outils GraphQL pour voir si vous obtenez les données correctes.

Utilisons la requête suivante pour le reste du didacticiel.

query($name: String!){
    search(query: $name, last: 10, type: REPOSITORY) {
      edges {
        node {
          ... on Repository {
            id
            name
            description
            url
          }
        }
      }
    }
  }

Cette requête recherche les 10 derniers référentiels repositeries correspondant à la chaîne d'entrée spécifique, que nous définirons dans notre application.

Il renvoie l'id, le nom, la description et l'URL de chaque résultat.

Utilisation de la requête GraphQL dans un composant React

Nous devons importer les deux modules ci-dessous dans notre composant React pour pouvoir définir la requête dans le composant, puis transmettre les résultats au composant en tant qu'éléments.

import gql from 'graphql-tag';
import { graphql } from 'react-apollo';

Ici, nous avons assigné notre requête à une variable constante, mais nous n'avons pas encore défini le paramètre de nom.

const repoQuery = gql`
  query($name: String!){
    search(query: $name, last: 10, type: REPOSITORY) {
      edges {
        node {
          ... on Repository {
            id
            name
            description
            url
          }
        }
      }
    }
  }
`

Maintenant, nous enveloppons notre composant avec le graphql HOC (Higher Order Component) afin de définir les paramètres de la requête, exécutons la requête, puis passons le résultat en tant qu'éléments à notre composant.

const AppWithData = graphql(
  repoQuery,
  {
    options: {
      variables: {
        name: "tuts"
      }
    }
  }
)(App)

Vous trouverez ci-dessous la version finale de notre composant.

import React, { Component } from 'react';

import gql from 'graphql-tag';
import { graphql } from 'react-apollo';

class App extends Component {
  render() {
    return (
      <div>
      </div>
    );
  }
}

const repoQuery = gql`
  query($name: String!){
    search(query: $name, last: 10, type: REPOSITORY) {
      edges {
        node {
          ... on Repository {
            id
            name
            description
            url
          }
        }
      }
    }
  }
`

const AppWithData = graphql(
  repoQuery,
  {
    options: {
      variables: {
        name: "tuts"
      }
    }
  }
)(App)

export default AppWithData;

Notez que nous n'exportons pas le composant App réel mais le composant encapsulé, qui est AppWithData.

Vérifiez les données dans la console

Allons-y et ajoutons {console.log (this.props)} à la méthode de rendu de votre composant.

class App extends Component {
  render() {
    console.log(this.props)
    return (
      <div>
      </div>
    );
  }
}

Lorsque vous vérifiez la console de votre navigateur, vous verrez qu'il existe deux logs d'objets.

À l'intérieur de chaque objet, vous verrez la propriété data. Ceci est fourni à notre composant via le HOC graphql.

Notez que le premier journal a la propriété loading: true à l'intérieur des data, et le second journal a loading: false et un nouvel objet nommé search, qui est exactement les données data que nous voulions obtenir.

Afficher les données

Écrivons du JSX pour afficher les données récupérées.

Puisque l'objet search n'est pas initialement là, nous ne pouvons pas directement essayer de le rendre. Par conséquent, nous devons d'abord vérifier si nous avons récupéré les données et si l'objet search est prêt à être utilisé.

Pour ce faire, nous utiliserons simplement les informations de loading fournies dans la propriété data.

Si loading est true, nous rendons simplement le texte de loading, sinon les données elles-mêmes.

class App extends Component {
  render() {
    return (
      <div>
        {this.props.data.loading === true ? "Loading" : this.props.data.search.edges.map(data =>
          <ul key={data.node.id}>
            <li style={{fontWeight: 'bold'}}><a href={data.node.url}>{data.node.name}</a></li>
            <li>{data.node.description}</li>
          </ul>
        )}
      </div>
    );
  }
}

J'ai utilisé l'opérateur ternaire ?: Pour les expressions conditionnelles en ligne de base. Si loading est true, nous affichons loading, et s'il est faux, nous utilisons la fonction map() pour parcourir notre tableau de données afin d'afficher les informations à l'intérieur des éléments <ul> et <li>.

Ceci est juste un exemple basique. Vous pouvez utiliser une instruction if-else standard et renvoyer des résultats différents pour votre méthode de rendu.

Vous pouvez vérifier le référentiel Apollo-Client-with-React , le cloner sur votre ordinateur et jouer avec.

P.S. N'oubliez pas de remplacer la variable token par votre propre token d'API GitHub.

Conclusion

Nous avons expliqué comment démarrer avec Apollo Client pour React. Nous avons installé les modules requis, configuré le client, puis l'avons fourni à notre composant en haut de la hiérarchie des composants. Nous avons appris à tester rapidement les requêtes GraphQL avant de les implémenter dans notre application réelle. Enfin, nous avons intégré la requête dans un composant React et affiché les données récupérées.