Comment créer une application Web avec GraphQL et React –
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
Source link