Share
GraphQL is recent populair geworden en zal waarschijnlijk de Rest API vervangen. In deze tutorial gebruiken we Apollo Client om te communiceren met de GraphQL API van GitHub. We zullen Apollo Client integreren met ReactJS, maar u kunt het ook gebruiken met verschillende andere clientplatforms.
Deze tutorial behandelt niet hoe een React-project moet worden gestart, maar u kunt gebruiken create-reactie-app starten.
Zodra we de react-app klaar hebben om te starten, moeten we de vereiste modules installeren.
De volgende regel installeert alle vereiste modules.
npm install apollo-client-preset react-apollo graphql-tag graphql --save
Nu kunnen we onze component voorzien van een klant.
U kunt een client overal in uw componentcomponenthiërarchie opgeven. Het is echter altijd een goede gewoonte om de component, die uw hele applicatie verpakt, aan de klant te leveren.
import Reageren van 'reageren'; import ReactDOM van 'react-dom'; importeer de app van './App'; importeer ApolloProvider van 'react-apollo'; importeer ApolloClient van 'apollo-client'; importeer HttpLink van 'apollo-link-http'; import InMemoryCache van 'apollo-cache-inmemory'; const token = "YOUR_TOKEN"; const httpLink = uri: 'https://api.github.com/graphql', headers: authorization: 'Bearer $ token'; const client = nieuwe ApolloClient (link: new HttpLink (httpLink), cache: new InMemoryCache ()); ReactDOM.render (, document.getElementById ( 'root'));
Hierboven zie je dat we de uri voor GitHub en heeft ook een specifiek token gebruikt headers. Je zou je eigen token moeten gebruiken die gegenereerd is met GitHub. Dus vergeet niet om het te vervangen YOUR_TOKEN.
Voor dit voorbeeld hebben we de API-token aan de clientzijde gedefinieerd. U mag uw API-token echter niet publiekelijk bekendmaken. Het is dus altijd goed om het op de server geabstraheerd van de client te houden.
Merk op dat we de hebben ingepakt ApolloProvider en gebruikte de cliënt variabele die we hebben gemaakt voor de cliënt stutten.
Voordat ik met de vragen aan de slag ga, wil ik erop wijzen dat er een handige tool, GraphiQL, is voor het testen van je GraphQL-query's. Voordat u doorgaat, controleert u of u het hebt gedownload.
Zodra u GraphiQL opent, moet u de GraphQL-eindpunt en HTTP-headers.
GraphQL-eindpunt: https://api.github.com/graphql
Headernaam: machtiging
Header Value: Drager YOUR_TOKEN
Natuurlijk moet je het vervangen YOUR_TOKEN met je eigen token. Vergeet niet om de Toonder voor je token bij het definiëren van de Header Value.
Als u geen applicatie wilt downloaden, kunt u ook de online GraphQL API Explorer voor GitHub gebruiken.
In tegenstelling tot een REST-API met verschillende eindpunten, heeft de GraphQL-API maar één eindpunt en u haalt alleen datgene op dat is gedefinieerd door uw query.
De documentatie van GitHub's GraphQL API geeft je meer inzicht.
Het beste deel van de GraphiQL-toepassing is dat deze u toegang geeft tot documentatie voor vragen binnen de toepassing. U kunt de zijbalk aan de rechterkant met de naam zien Docs.
Laten we beginnen met de eenvoudigste zoekopdracht:
query viewer login
Deze query retourneert de aanmeldingsgegevens van de viewer. In dit geval bent u de kijker omdat u uw eigen API-token heeft gebruikt.
In deze zelfstudie zal ik geen gedetailleerde informatie over vragen geven. U kunt altijd de documentatie raadplegen en vragen over GraphQL-tools uitproberen om te zien of u de juiste gegevens krijgt.
Laten we de volgende vraag gebruiken voor de rest van de zelfstudie.
query ($ name: String!) search (query: $ name, last: 10, type: REPOSITORY) edges node ... on Repository id name description url
Deze query zoekt naar de laatste 10 opslagplaatsen die overeenkomen met de specifieke invoerreeks, die we in onze toepassing zullen definiëren.
Het geeft het ID kaart, naam, Omschrijving, en url voor elk resultaat.
We moeten de twee onderstaande modules importeren in onze React-component om de query binnen de component te kunnen definiëren en de resultaten vervolgens door te geven aan de component als rekwisieten.
importeer gql van 'graphql-tag'; importeer graphql van 'react-apollo';
Hier hebben we onze query toegewezen aan een constante variabele, maar we hebben de parameter niet gedefinieerd naam parameter.
const repoQuery = gql 'query ($ name: String!) search (query: $ name, last: 10, type: REPOSITORY) edges node ... on Repository id name description url'
Nu pakken we onze component in met de graphql HOC (hogere-ordecomponent) om de queryparameters te definiëren, de query uit te voeren en vervolgens het resultaat als rekwisieten door te geven aan onze component.
const AppWithData = graphql (repoQuery, options: variables: name: "tuts") (App)
Hieronder is de definitieve versie van onze component.
import Reageren, Component uit 'reageren'; importeer gql van 'graphql-tag'; importeer graphql van 'react-apollo'; class-app breidt component render () terug (); const repoQuery = gql 'query ($ name: String!) search (query: $ name, last: 10, type: REPOSITORY) edges node ... on Repository id name description url' const AppWithData = graphql (repoQuery, options: variables: name: "tuts") (App) export standaard AppWithData;
Merk op dat we de feitelijke niet exporteren App component maar de ingepakte component, dat is AppWithData.
Laten we doorgaan en toevoegen Console.log (this.props) naar de rendermethode van uw component.
class-app breidt component render () console.log (this.props) return ();
Wanneer u de console van uw browser controleert, ziet u dat er twee objectlogboeken zijn.
Binnen elk object ziet u de gegevens eigendom. Dit wordt aan ons onderdeel geleverd via de graphql HOC.
Merk op dat het eerste logboek het laden: waar eigendom binnen gegevens, en het tweede logboek heeft laden: false en een nieuw genoemd object zoeken, dat is precies de data die we wilden hebben.
Laten we wat JSX schrijven om de opgehaalde gegevens weer te geven.
Sinds de zoeken object is er initieel niet, we kunnen het niet direct proberen te renderen. Daarom moeten we eerst controleren of we de gegevens hebben opgehaald en de zoeken object is klaar voor gebruik.
Om dat te doen, zullen we gewoon de bezig met laden informatie verstrekt binnen de gegevens eigendom.
Als bezig met laden is waar dan geven we gewoon de Bezig met laden tekst, anders de gegevens zelf.
class-app breidt component render () terug (this.props.data.loading === waar? "Bezig met laden": this.props.data.search.edges.map (data =>);)
- Data.node.name
- Data.node.description
Ik gebruikte de ?: ternaire operator voor standaard inline conditionele expressies. Als bezig met laden is waar we tonen Bezig met laden,en als het vals is, gebruiken we de kaartfunctie om onze gegevensmatrix te doorlopen om de informatie binnen de elementen.
Dit is slechts een eenvoudig voorbeeld. U kunt een normale if-else-instructie gebruiken en verschillende resultaten retourneren voor uw weergavenmethode.
Je kunt de Apollo-Client-with-React-repository bekijken, deze op je computer klonen en rondkijken.
Postscriptum Vergeet niet om de blijk variabele met uw eigen API-token voor GitHub.
We hebben besproken hoe u aan de slag kunt met Apollo Client for React. We hebben de vereiste modules geïnstalleerd, de client ingesteld en vervolgens geleverd aan onze component bovenaan de componenthiërarchie. We hebben geleerd om GraphQL-query's snel te testen voordat ze in onze daadwerkelijke toepassing worden geïmplementeerd. Ten slotte hebben we de query geïntegreerd in een component React en de opgehaalde gegevens weergegeven.
Accentsconagua