Dans ce didacticiel, nous allons apprendre à créer une application Web avec React et GraphQL. Nous allons utiliser une API disponible dans graphql-pokemon et la servir à partir de ce lien qui vous permet d'obtenir des informations sur Pokémon.

GraphQL est un langage de requête. pour les API et un runtime pour répondre aux requêtes créées par Facebook. GraphQL fournit une description complète et compréhensible des données de votre API, donne aux clients le pouvoir de demander exactement ce dont ils ont besoin, rien de plus, facilite l'évolution des API au fil du temps et permet d'utiliser de puissants outils de développement.

, nous apprendrons uniquement le frontal d’une application GraphQL utilisant Apollo pour extraire des données d’une API GraphQL prête à être hébergée sur le Web.

Commençons par les conditions préalables!

Prérequis

Il existe quelques prérequis pour ce tutoriel:

• versions récentes de Node.js et npm installées sur votre système
• connaissance de JavaScript / ES6
• familiarité avec React

Si vous ne le faites pas avoir Node et npm installés sur votre machine de développement, vous pouvez simplement télécharger les fichiers binaires de votre système à partir du site Web officiel . Vous pouvez également utiliser NVM un script bash compatible POSIX pour gérer plusieurs versions actives de Node.js.

Installation de create-react-app

Installez l'outil create-react-app qui permet initialisez rapidement et travaillez avec les projets React.

Ouvrez un nouveau terminal et exécutez la commande suivante:

 npm install -g create-react-app

Remarque: Vous devrez peut-être utiliser sudo avant votre commande sous Linux et macOS ou utiliser une invite de commande avec des droits d'administrateur si vous obtenez des erreurs EACCESS lors de l'installation du package de manière globale sur votre ordinateur. Vous pouvez également simplement corriger vos autorisations npm .

Au moment de la rédaction de cet article, cette installation est create-react-app v3.1.1 .

Créer une réaction Projet

Nous sommes maintenant prêts à créer notre projet React.

Retournez sur votre terminal et exécutez la commande suivante:

 create-react-app react-pokemon

Ensuite, accédez au dossier de votre projet et démarrez le serveur de développement local:

 cd react-pokemon
npm start

Allez à http: // localhost: 3000 dans votre navigateur Web pour afficher et activer votre application.

Il s'agit d'une capture d'écran de l'application à ce stade:

Installation d'Apollo Client

Apollo Client est une solution complète de gestion de données couramment utilisée avec React, mais pouvant être utilisée avec toute autre bibliothèque ou structure.

Apollo fournit une mise en cache intelligente qui le permet. pour être une source unique de vérité pour les données locales et distantes de votre application.

Vous devez installer les packages suivants dans votre projet React pour utiliser Apollo:

• graphql : le Implémentation de référence JavaScript pour GraphQL
• apollo-client : un client GraphQL de mise en cache complet offrant des intégrations pour React, Angular et autres
• apollo-cache-inmemory : le implémentation de cache recommandée pour Apollo Client 2.0
• apollo- link-http : Apollo Link le plus courant, un système de composants modulaires pour la gestion de réseaux GraphQL
• react-apollo : ce paquet vous permet d'extraire des données de votre serveur GraphQL et de les utiliser pour la construction. Interface utilisateur complexe et réactive utilisant le cadre React
• graphql-tag : ce paquet fournit des utilitaires utiles pour l'analyse de requêtes GraphQL telles que gql .

Ouvrez un nouveau terminal et naviguez dans le dossier de votre projet, puis exécutez les commandes suivantes:

 npm install graphql --save
npm installer apollo-client --save
npm installer apollo-cache-inmemory --save
npm installe apollo-link-http --save
npm installer react-apollo --save
npm install graphql-tag --save

Maintenant que nous avons installé les packages nécessaires, nous devons créer une instance de ApolloClient.

Ouvrez le fichier src / index.js et ajoutez le code suivant:

 import { ApolloClient} de 'apollo-client';
importer {InMemoryCache} de 'apollo-cache-inmemory';
importer {HttpLink} de 'apollo-link-http';

const cache = new InMemoryCache ();
const link = new HttpLink ({
  uri: 'https://graphql-pokemon.now.sh/'
})

const client = new ApolloClient ({
  cache,
  lien
})

Nous créons d'abord une instance de InMemoryCache puis une instance de HttpLink et nous passons dans notre URI GraphQL API. Ensuite, nous créons une instance de ApolloClient et fournissons les instances de cache et de liaison.

Connectez le client Apollo aux composants React

Après avoir créé l'instance de ApolloClient nous vous devez le connecter à nos composants React.

Nous utiliserons les nouveaux points d'ancrage Apollo, ce qui nous permet d'associer facilement les opérations GraphQL à notre interface utilisateur.

Nous pouvons connecter Apollo Client à notre application React simplement encapsuler le composant racine App avec le composant ApolloProvider – exporté à partir du package @ apollo / react-hooks – et transmission de l'instance client via le client prop .

Le composant ApolloProvider est similaire au fournisseur de contexte de React. Il enveloppe votre application React et place le client dans le contexte, ce qui vous permet d'y accéder depuis n'importe où dans votre application.

Importons maintenant le composant ApolloProvider dans notre src / index.js. limez et encapsulez le composant App comme suit:

 import Réagissez à partir de 'react';
importer ReactDOM de 'react-dom';
import './index.css';
importer l'application depuis './App';
importer * en tant que serviceWorker à partir de './serviceWorker';

importer {ApolloClient} de 'apollo-client';
importer {InMemoryCache} de 'apollo-cache-inmemory';
importer {HttpLink} de 'apollo-link-http';
importer {ApolloProvider} depuis '@ apollo / react-hooks';

const cache = new InMemoryCache ();
const link = new HttpLink ({
  uri: 'https://graphql-pokemon.now.sh/'
})

const client = new ApolloClient ({
  cache,
  lien
})

ReactDOM.render (document.getElementById ('root'));

serviceWorker.unregister ();

Récupération de données à l'aide de requêtes

Après avoir ajouté et configuré le client Apollo dans notre application, récupérons des données Pokémon et restituons-les dans notre composant.

Ouvrez le fichier src / App.js . et commencez par ajouter les importations suivantes:

 import {useQuery} depuis '@ apollo / react-hooks';
importer le gql de "graphql-tag";

Nous avons importé le crochet useQuery du paquet @ apollo / react-hooks . C'est un crochet de réaction qui récupère une requête GraphQL et expose le résultat afin que vous puissiez restituer votre interface utilisateur en fonction des données renvoyées. Nous avons également importé la balise gql ce qui nous permet d'analyser les requêtes GraphQL

Le crochet useQuery est construit sur l'API React's Hooks pour extraire et charger les données de requêtes GraphQL dans l'interface utilisateur de nos applications. Il expose les propriétés d'erreur, de chargement et de données via un objet de résultat, utilisé pour renseigner et restituer notre composant.

Après les importations, définissez la requête GraphQL suivante:

 const GET_POKEMON_INFO = gql`
{
    pokemons (premier: 150) {
      identifiant
      nombre
      Nom,
      image,
      évolutions {
        identifiant,
        nombre,
        Nom,
        image
      }
    }
  }

Cette requête nous permettra de récupérer les 150 premiers Pokémon avec leur identifiant, numéro, nom, image et évolutions.

Ensuite, exécutons la requête contre notre API GraphQL en appelant le useQuery . accrocher avec notre GET_POKEMON_INFO requête:

 fonction App () {
  const {data, loading, error} = useQuery (GET_POKEMON_INFO);

  if (chargement) return 
 Chargement ... 
;
  if (error) return 
 Error 
;

Nous utilisons la déstructuration d'objet pour extraire les données, le chargement et les erreurs de la valeur renvoyée du crochet useQuery .

Si le chargement est vrai, cela signifie que les données sont encore en cours de récupération, nous rendons simplement le code de message Loading… pour indiquer aux utilisateurs que les données sont en cours de chargement.

Si une erreur se produit pendant la requête, la variable error aura un valeur de true. Dans ce cas, nous affichons simplement un message Error .

Ensuite, si le chargement des données est terminé, nous affichons la liste des retours Pokémon:

 (
  
    
 Pokémons 

    

      
         La ​​franchise Pokémon
       {""}
      tourne autour de 832 espèces fictives de monstres de collection, chacune ayant
      dessins et compétences uniques. Conçu par Satoshi Tajiri au début de 1989,
      Les Pokémon sont des créatures qui habitent le monde fictif de Pokémon. C'est
      la liste des 150 premiers Pokémon tels qu'ils apparaissent dans le Stade Pokémon,
      commençant par Bulbasaur dans le coin supérieur gauche et se terminant par Mewtwo
      le coin en bas à droite.
    
    

       {data &&
        data.pokemons &&
        data.pokemons.map ((pokemon, index) => (
          

            
            

              
 {pokemon.name} 
              

                 {pokemon.evolutions && pokemon.evolutions.length! == 0 && (
                  

                    {""}
                    Evolutions:
                    {pokemon.evolutions.map ((e, indx) => {
                      return 
 {e.name} 
;
                    })}
                  

                )}
              

            
          
        ))}}
    
  
);

Mise en forme de l'application

Après avoir récupéré et rendu les données dans notre application React, ajoutons un peu de style à l'interface.

Ouvrez le fichier public / index.html et ajoutez un fichier . 19659076] étiquette de la police de Kalam :

Ouvrez le fichier src / index.css et ajoutez les styles CSS suivants:

 body {
  marge: 5px;
  font-family: 'kalam';
  -webkit-font-lissage: antialiasé;
  -moz-osx-font-lissage: niveaux de gris;
}

.récipient {
    affichage: grille;
    grid-template-columns: répéter (remplissage automatique, minmax (140px, 1fr));
    intervalle de grille: 19px;
}

.container> .card img {
    largeur maximale: 100%;
}

Voici une capture d'écran de notre application à ce stade:

Création et hébergement de l'application

Maintenant que nous avons créé notre application, nous pouvons créer le bundles de production à l'aide de la commande suivante:

 npm run build

La commande produira une liasse de production réduite et optimisée dans le dossier build que vous pourrez télécharger sur votre serveur.

Nous utiliserons ZEIT Now pour héberger le ZEIT Now est une plate-forme cloud pour sites Web et fonctions sans serveur que vous pouvez utiliser pour déployer vos projets sur un .now.sh ou un domaine personnel.

Revenez sur votre terminal et exécutez-le. la commande suivante pour installer maintenant CLI:

 npm install -g now

Ensuite, accédez au dossier build et exécutez la commande now :

 cd build
maintenant

C’est tout! Votre application sera téléchargée sur le serveur d'hébergement. Vous pouvez voir l'application en direct à l'adresse https://build-cy9hwmjpe.now.sh .

Vous pouvez également trouver le code source de cette application dans ce référentiel GitHub . [[19659093] Conclusion

Dans ce tutoriel, nous avons créé une application React qui récupère les 150 premiers Pokémon, tels qu'ils apparaissent dans le Pokémon Stadium et les restitue. Nous avons utilisé le client Apollo avec les crochets React pour extraire et gérer les données dans notre application

Ahmed est un auteur technique et développeur Web vivant au Maroc avec une maîtrise en développement de logiciel. Il est l'auteur de contenu technique sur JavaScript, angulaire et ionique. Il est également un partisan de l'entrepreneuriat, de la poésie et de l'enseignement. Vous pouvez me contacter sur mon site web personnel et lire mes autres articles sur Techiediaries .