Fermer

janvier 2, 2019

GraphQL en réaction avec Apollo


Les API GraphQL sont l’avenir, et Apollo est le meilleur moyen de l’intégrer à votre application React dès maintenant.

React et GraphQL sont une alliance parfaite. GraphQL en soi est une bénédiction si vous avez déjà eu à faire plusieurs demandes à une API RESTful simplement pour rassembler toutes les données nécessaires à une interface, mais une fois combiné avec Apollo + Réagissez, cela rend les interfaces de construction très agréables.

Dans cet article, nous allons commencer par lancer une démonstration simple avec une bibliothèque appelée Apollo Boost où la plupart des paramètres sont configurés pour nous et que nous pouvons être opérationnels rapidement avec très peu agitation. Cela fait, nous allons supprimer Apollo Boost et configurer nous-mêmes le client Apollo, en apprenant comment personnaliser véritablement chaque opération GraphQL à l'aide de liens avec Apollo Link.

Pour cette démonstration, nous interrogerons nos référentiels sélectionnés. dans GitHub. La version finale de l'application peut être trouvée ici . Je vous encourage à suivre vous-même, mais si vous êtes bloqué, vous pouvez certainement l'utiliser comme exemple.

Voir le graphique de GitHub

Hormis Facebook, GitHub est l'un des pionniers dans l'exposition d'un public . API GraphQL . GitHub est livré avec un explorateur d'API qui nous permet d'explorer leur graphique et de voir les données auxquelles nous avons accès, ainsi que le format et le type de chaque champ. Une fois connecté à l'explorateur, n'hésitez pas à coller la requête ci-dessous pour voir quelles données sont renvoyées.

 {

lecteur  {

identifiant

starredRepositories  ( dernier :   25 )   {

nœuds  {

identifiant

prénom

la description

poussé

url

langues  ( first :   5 )   {

nœuds  {

identifiant

Couleur

prénom

} 

} 

} 

} 

} 

}

Une fois que vous avez terminé, accédez à une page sur laquelle vous pouvez générer un accès personnel. jeton . Pour cette démonstration, il vous suffira de donner au jeton un accès au paramètre repo . Copiez et collez ce jeton pour le stocker et l'utiliser plus tard.

Mise en route

Maintenant que nous avons vu la requête avec laquelle nous allons travailler et les données qu'elle renvoie, il est temps de le faire fonctionner pour nous-mêmes au sein Réagissez en utilisant create-react-app . Après avoir installé create-react-app, créez un nouveau projet à l'aide de la commande create-react-app nom-de-app . Supprimez ensuite les fichiers CSS et les images figurant par défaut dans le dossier src .

Exécutez la commande yarn add. Apollo-boost react-apollo graphql-tag @ progress / kendo-react -inputs @ progress / kendo-react-intl @ progress / kendo-theme-default pour installer les packages nécessaires à la mise en route. J'ai également inclus quelques paquets de Kendo UI que nous utiliserons comme champ de saisie dans l'application

du fichier index.js que vous souhaitez utiliser. remplace l’importation CSS actuellement par un pour importer le thème de Kendo UI: import "@ progress / kendo-theme-default / dist / all.css";

Apollo Boost

Nous avons d’abord besoin d’un client Apollo. . C’est le code chargé d’exécuter la requête HTTP GraphQL, de paramétrer les en-têtes, d’analyser la réponse, de gérer le cache, etc. Nous allons ici avec une configuration assez basique utilisant apollo-boost qui est une bibliothèque qui vous fournit la configuration la plus courante du client Apollo.

Même avec apollo-boost nous pouvons encore personnaliser. Nous utilisons ici l'option request qui nous permet de définir de manière dynamique les en-têtes qui seront envoyés avec chaque demande. C’est généralement à cet endroit que vous gérez les en-têtes d’autorisation pour inclure le jeton de l’utilisateur. Dans ce cas, nous prenons la valeur de sessionStorage (nous verrons comment elle est arrivée juste en dessous).

 // src / apolloClient.js 
 import  ApolloClient  ] de   "apollo-boost" ; 
 const  client  =   new   ApolloClient  ( {
uri :   "https://api.github.com/graphql" 
request :  operation  =>   {
opération .  setContext  ( {
en-têtes :   {
Autorisation :   `porteur  $ { sessionStorage .  getItem  (" jeton ") }
 
 Le meilleur outil 2023 pour ta croissance Instagram ! 
 
 
   
 
Source link