Share
GraphQL a devenit populară recent și este probabil să înlocuiască Restul API. În acest tutorial, vom folosi Apollo Client pentru a comunica cu API-ul GraphQL al GitHub. Vom integra Clientul Apollo cu ReactJS, dar îl puteți folosi și cu alte platforme client.
Acest tutorial nu acoperă cum să începeți un proiect React, dar puteți utiliza Create-reacționează aplicație pentru a incepe.
Odată ce am pregătit aplicația de reacție, următorul lucru este să instalați modulele necesare.
Următoarea linie instalează toate modulele necesare.
npm instalare apollo-client-presetare react-apollo graphql-tag graphql -save
Acum putem oferi componentei noastre cu un client.
Puteți oferi un client oriunde în ierarhia dvs. de componente React. Cu toate acestea, este întotdeauna o bună practică de a furniza componentei, împachetând întreaga aplicație, cu clientul.
import Reacționează de la "reacționează"; import ReactDOM de la "react-dom"; aplicația de import de la "./App"; import ApolloProvider de la "react-apollo"; import ApolloClient de la "apollo-client"; import HttpLink de la "apollo-link-http"; import InMemoryCache din "apollo-cache-inmemory"; const token = "YOUR_TOKEN"; const httpLink = uri: 'https://api.github.com/graphql', anteturi: autorizare: 'Purtător $ token'; const client = nou ApolloClient (link: noul HttpLink (httpLink), cache: new InMemoryCache ()); ReactDOM.render (, document.getElementById ( 'root'));
Deasupra puteți vedea că am definit uri pentru GitHub și de asemenea a folosit un anumit jeton pentru antete. Ar trebui să utilizați propriul token generat de GitHub. Deci, nu uitați să o înlocuiți YOUR_TOKEN.
Pentru acest exemplu, am definit tokenul API pe partea clientului. Cu toate acestea, nu ar trebui să dezvăluiți public tokenul API. Deci, este întotdeauna bine să o păstrați pe serverul abstractizat din partea clientului.
Observați că am înfășurat ApolloProvider și a folosit client variabilă pe care am creat-o pentru client sprijini.
Înainte de a scufunda în interogări, vreau să subliniez că există un instrument foarte util, numit GraphiQL, pentru testarea interogărilor dvs. GraphQL. Înainte de a continua, asigurați-vă că ați descărcat-o.
Odată ce deschideți GraphiQL, trebuie să setați GraphQL Endpoint și Anteturi HTTP.
GraphQL Endpoint: https://api.github.com/graphql
Nume antet: Autorizare
Valoarea Header: Purtător YOUR_TOKEN
Desigur, trebuie să înlocuiți YOUR_TOKEN cu tokenul propriu. Nu uitați să includeți Purtător în fața tokenului dvs. când definiți Valoarea titlurilor.
Dacă nu doriți să descărcați o aplicație, puteți utiliza, de asemenea, GraphQL API Explorer pentru GitHub.
Spre deosebire de un API REST cu mai multe puncte finale, API-ul GraphQL are doar un singur punct final, și doar preluați ceea ce este definit de interogarea dvs..
Documentația API-ului GraphQL GitHub vă oferă mai multe informații.
De asemenea, cea mai bună parte a aplicației GraphiQL este că vă oferă acces la documentația pentru interogări chiar în interiorul aplicației. Puteți vedea bara laterală numită drept Documente.
Să începem cu cea mai simplă interogare:
interogare viewer login
Această interogare vă întoarce informațiile de conectare ale spectatorului. În acest caz, vizualizatorul este tu de când ai folosit propriul token API.
În acest tutorial, nu voi oferi informații detaliate despre întrebări. Puteți să consultați întotdeauna documentația și să încercați interogările din instrumentele GraphQL pentru a vedea dacă obțineți datele corecte.
Să utilizăm următoarea interogare pentru restul tutorialului.
interogare ($ name: String!) căutare (interogare: $ name, last: 10, type: REPOSITORY) edges node ... în Repository id name description url
Această interogare caută ultimele 10 depozite care se potrivesc cu șirul de intrare specific, pe care îl vom defini în aplicația noastră.
Se întoarce id, Nume, Descriere, și URL-ul pentru fiecare rezultat.
Trebuie să importim cele două module de mai jos în componenta noastră React pentru a putea defini interogarea în cadrul componentei și apoi să transmitem rezultatele componentei ca elemente de recuzită.
import gql de la 'graphql-tag'; import graphql de la "react-apollo";
Aici am atribuit interogarea noastră unei variabile constante, dar nu am definit-o Nume parametru încă.
const repoQuery = gql 'interogare ($ name: String!) search (interogare: $ name, last: 10, type: REPOSITORY)
Acum, înfășurați componenta noastră cu graficul HOC (Componenta superioară a ordinului) pentru a defini parametrii interogării, pentru a executa interogarea și apoi pentru a transmite rezultatul ca elemente de recuzită la componenta noastră.
const AppWithData = graphql (repoQuery, opțiuni: variabile: name: "tuts") (App)
Mai jos este versiunea finală a componentei noastre.
import React, Component de la "reacție"; import gql de la 'graphql-tag'; import graphql de la "react-apollo"; clasa App extinde Component render () return (); const repoQuery = gql 'interogare ($ name: String!) search (interogare: $ name, last: 10, type: REPOSITORY) const AppWithData = graphql (repoQuery, opțiuni: variabile: nume: "tuts") (App) export implicit AppWithData;
Rețineți că nu exportim actualul App dar componenta învelită, care este AppWithData.
Să mergem mai departe și să adăugăm console.log (this.props) la metoda de randare a componentei dvs..
clasa App extinde Component render () console.log (this.props) retur ();
Când verificați consola browserului dvs., veți vedea că există două jurnale de obiecte.
În interiorul fiecărui obiect, veți vedea date proprietate. Acest lucru este oferit componentei noastre prin graphql hOC.
Observați că primul jurnal are încărcare: adevărat proprietate în interior date, iar al doilea jurnal are încărcare: falsă și un nou obiect numit căutare, care este exact datele pe care am vrut să le obținem.
Să scriem câteva JSX pentru a afișa datele preluate.
Din moment ce căutare obiectul nu este inițial acolo, nu putem încerca în mod direct să-l facem. Prin urmare, mai întâi trebuie să verificăm dacă am preluat datele și căutare obiect este gata pentru a fi folosit.
Pentru a face acest lucru, vom folosi pur și simplu se incarca informațiile furnizate în interiorul date proprietate.
Dacă se incarca este Adevărat atunci pur și simplu facem se incarca text, în caz contrar datele în sine.
clasa App extinde Component render () return (this.props.data.loading === adevărat? "Încărcare": this.props.data.search.edges.map (date =>);)
- Data.node.name
- Data.node.description
Am folosit ?: operator terestru pentru expresii condiționale inline de bază. Dacă se incarca este Adevărat ne afișăm se incarca,și dacă este falsă, folosim funcția hartă pentru a itera prin matricea noastră de date pentru a afișa informațiile din interiorul element.
Acesta este doar un exemplu de bază. Puteți utiliza o instrucțiune if-else obișnuită și puteți returna rezultate diferite pentru metoda dvs. de redare.
Puteți verifica depozitul Apollo-Client-with-React, îl puteți clona pe computer și puteți juca în jur.
P.S. Nu uitați să înlocuiți jeton variabilă cu propriul token API pentru GitHub.
Am abordat cum să începeți cu Apollo Client for React. Am instalat modulele necesare, am creat clientul și apoi l-am furnizat componentei noastre în partea de sus a ierarhiei componente. Am învățat cum să testați interogările GraphQL rapid înainte de a le implementa în aplicația noastră reală. În final, am integrat interogarea într-o componentă React și am afișat datele preluate.
Accentsconagua