Share
GraphQL est devenu populaire récemment et devrait 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 plates-formes clientes..
Ce tutoriel ne couvre pas comment démarrer un projet React, mais vous pouvez utiliser créer-réagir-app pour commencer.
Une fois que l'application Rea est prête à fonctionner, la prochaine étape consiste à installer les modules requis..
La ligne suivante installe tous les modules requis.
npm installer apollo-client-preset réagir-apollo graphql-tag graphql --save
Maintenant, nous pouvons fournir à notre composant avec un client.
Vous pouvez fournir un client n'importe où dans votre hiérarchie de composants React. Cependant, il est toujours recommandé de fournir le composant, en encapsulant toute votre application, avec le client..
importer Réagir de 'réagir'; importer ReactDOM de 'react-dom'; importer l'application depuis './App'; importer ApolloProvider de 'react-apollo'; importer ApolloClient de 'apollo-client'; importer HttpLink de 'apollo-link-http'; importer InMemoryCache de 'apollo-cache-inmemory'; const token = "YOUR_TOKEN"; const httpLink = uri: 'https://api.github.com/graphql', en-têtes: authorisation: 'Bearer $ token'; client const = new ApolloClient (link: new HttpLink (httpLink), cache: new InMemoryCache ()); ReactDOM.render (, document.getElementById ('root'));
Ci-dessus, vous pouvez voir que nous avons défini le uri pour GitHub et a également utilisé un jeton spécifique pour en-têtes. Vous devriez utiliser votre propre jeton généré à partir de GitHub. Alors n'oubliez pas de le remplacer par VOTRE.
Pour cet exemple, nous avons défini le jeton de l'API côté client. Cependant, vous ne devez pas révéler votre jeton API publiquement. Donc, il est toujours bon de le garder sur le serveur extrait du côté client.
Notez que nous avons emballé le ApolloProvider et utilisé le client variable que nous avons créée pour le client soutenir.
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 GraphiQL ouvert, vous devez définir le Point de terminaison GraphQL et En-têtes HTTP.
Point de terminaison GraphQL: https://api.github.com/graphql
Nom de l'en-tête: Autorisation
Valeur d'en-tête: Porteur YOUR_TOKEN
Bien sûr, vous devez remplacer VOTRE avec votre propre jeton. N'oubliez pas d'inclure le Porteur devant votre jeton lors de la définition du Valeur d'en-tête.
Si vous ne souhaitez pas télécharger une application, vous pouvez également utiliser l'explorateur GraphQL API en ligne pour GitHub..
Contrairement à une API REST avec plusieurs points de terminaison, l’API GraphQL n’a qu’un seul point de terminaison et vous n’exportez que ce qui est défini par votre requête..
La documentation de l'API GraphQL de GitHub vous donne plus d'informations.
En outre, la meilleure partie 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 à 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 spectateur est vous puisque vous avez utilisé votre propre jeton API.
Dans ce tutoriel, je ne donnerai pas d'informations détaillées sur les requêtes. Vous pouvez toujours consulter 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 la suite du tutoriel.
query ($ name: String!) search (requête: $ name, dernier: 10, tapez: REPOSITORY) bords noeud … sur le référentiel id nom description url
Cette requête recherche les 10 derniers référentiels correspondant à la chaîne d'entrée spécifique, que nous définirons dans notre application..
Il retourne le identifiant, prénom, la description, et url pour chaque résultat.
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 sous forme d'accessoires..
importer le gql de 'graphql-tag'; importer graphql de 'react-apollo';
Ici, nous avons assigné notre requête à une variable constante, mais nous n’avons pas défini la prénom paramètre encore.
const repoQuery = gql 'query ($ name: String!) recherche (requête: $ name, dernier: 10, tapez: REPOSITORY) bords noeud … sur Repository id nom description url'
Maintenant, nous encapsulons notre composant avec le graphql HOC (composant d'ordre supérieur) afin de définir les paramètres de la requête, d'exécuter la requête, puis de transmettre le résultat en tant que props à notre composant..
const AppWithData = graphql (repoQuery, options: variables: name: "tuts") (App)
Ci-dessous la version finale de notre composant.
importer Réagir, Composant de 'réagir'; importer le gql de 'graphql-tag'; importer graphql de 'react-apollo'; La classe App étend le composant render () return () const repoQuery = gql 'requête ($ name: String!) recherche (requête: $ name, dernier: 10, type: REPOSITORY) bords noeud … sur Repository nom id url' const AppWithData = graphql (repoQuery, options: variables: name: "tuts") (App) exporte par défaut AppWithData;
Notez que nous n'exportons pas le réel App composant, mais le composant encapsulé, qui est AppWithData.
Allons-y et ajoutons console.log (this.props) à la méthode de rendu de votre composant.
classe App étend Component render () console.log (this.props) return ()
Lorsque vous vérifiez la console de votre navigateur, vous verrez qu'il existe deux journaux d'objet.
À l'intérieur de chaque objet, vous verrez le Les données propriété. Ceci est fourni à notre composant à travers le graphql HOC.
Notez que le premier journal a le chargement: vrai propriété à l'intérieur Les données, et le deuxième journal a chargement: faux et un nouvel objet nommé chercher, qui est exactement les données que nous voulions obtenir.
Ecrivons du JSX pour afficher les données récupérées.
Depuis le chercher l'objet n'est pas initialement là, nous ne pouvons pas essayer directement de le rendre. Par conséquent, nous devons d’abord vérifier si nous avons récupéré les données et les chercher l'objet est prêt à être utilisé.
Pour ce faire, nous utiliserons simplement le chargement informations fournies à l'intérieur du Les données propriété.
Si chargement est vrai alors nous rendons simplement la Chargement texte, sinon les données elles-mêmes.
La classe App étend le composant render () return (this.props.data.loading === true? "Chargement": this.props.data.search.edges.map (data =>))
- data.node.name
- data.node.description
J'ai utilisé le ?: Opérateur ternaire pour les expressions conditionnelles inline de base. Si chargement est vrai nous affichons Chargement,et s'il est faux, nous utilisons la fonction map pour parcourir le tableau de données afin d'afficher les informations à l'intérieur du éléments.
Ceci est juste un exemple de base. Vous pouvez utiliser une instruction if-else régulière et renvoyer des résultats différents pour votre méthode de rendu..
Vous pouvez consulter le référentiel Apollo-Client-with-React, le cloner sur votre ordinateur et vous amuser..
P.S. N'oubliez pas de remplacer le jeton variable avec votre propre jeton d'API pour GitHub.
Nous avons expliqué comment commencer à utiliser Apollo Client for React. Nous avons installé les modules requis, configuré le client, puis fourni celui-ci à notre composant situé 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 extraites..
Accentsconagua