Share
GraphQL har blitt populært nylig og vil sannsynligvis erstatte resten API. I denne opplæringen bruker vi Apollo Client til å kommunisere med GitHubs GraphQL API. Vi integrerer Apollo Client med ReactJS, men du kan også bruke den med flere andre klientplattformer.
Denne opplæringen dekker ikke hvordan du starter et React-prosjekt, men du kan bruke create reagere-app å komme i gang.
Når vi har reageringsprogrammet klar til å gå, er det neste å installere de nødvendige modulene.
Følgende linje installerer alle nødvendige moduler.
npm installere apollo-klient-forhåndsinnstilte reagere-apollo graphql-tag graphql --save
Nå kan vi tilby vår komponent med en klient.
Du kan gi en klient hvor som helst i React-komponenthierarkiet. Det er imidlertid alltid en god praksis å levere komponenten, pakke hele applikasjonen, med klienten.
Import Reakt fra 'reagere'; importere ReactDOM fra 'react-dom'; importer app fra './App'; importer ApolloProvider fra 'reagere-apollo'; importer ApolloClient fra 'apollo-client'; importer HttpLink fra 'apollo-link-http'; importer InMemoryCache fra 'apollo-cache-inmemory'; const token = "YOUR_TOKEN"; const httpLink = uri: 'https://api.github.com/graphql', overskrifter: autorisasjon: 'Bearer $ token'; const klient = ny ApolloClient (lenke: ny HttpLink (httpLink), cache: ny InMemoryCache ()); ReactDOM.render (, document.getElementById ( 'root'));
Over kan du se at vi definerte uri for GitHub og også brukt et bestemt token for overskrifter. Du bør bruke din egen token generert fra GitHub. Så ikke glem å erstatte den med YOUR_TOKEN.
For dette eksempelet definerte vi API-token på klientsiden. Du bør imidlertid ikke avsløre API-token din offentlig. Så det er alltid godt å beholde det på serveren abstrahert fra klientsiden.
Legg merke til at vi har pakket inn ApolloProvider og brukte klient variabel vi opprettet for klient rekvisitt.
Før du drar inn i spørringene, vil jeg påpeke at det er et veldig praktisk verktøy kalt GraphiQL for å teste GraphQL-spørringene dine. Før du fortsetter, sørg for at du har lastet ned den.
Når du har åpnet GraphiQL, må du sette GraphQL Endpoint og HTTP Headers.
GraphQL Endpoint: https://api.github.com/graphql
Header Name: Autorisasjon
Overskriftsverdi: Bærer YOUR_TOKEN
Selvfølgelig må du erstatte YOUR_TOKEN med ditt eget token. Ikke glem å inkludere bærer foran din token når du definerer Header Value.
Hvis du ikke vil laste ned et program, kan du også bruke online GraphQL API Explorer for GitHub.
I motsetning til en REST API med flere endepunkter, har GraphQL API bare ett sluttpunkt, og du henter bare det som er definert av spørringen din.
Dokumentasjonen for GitHubs GraphQL API gir deg mer innsikt.
Den beste delen av GraphiQL-applikasjonen er også at den gir deg tilgang til dokumentasjon for spørsmål rett inn i applikasjonen. Du kan se sidefeltet til høyre som heter Dokumenter.
La oss starte med det enkleste spørsmålet:
forespørsel viewer login
Denne spørringen returnerer deg innloggingsinformasjonen til seeren. I dette tilfellet er seeren deg siden du brukte din egen API-token.
I denne opplæringen vil jeg ikke gi detaljert informasjon om spørsmål. Du kan alltid referere til dokumentasjonen og prøve spørsmål på GraphQL-verktøy for å se om du får de riktige dataene.
La oss bruke følgende spørring for resten av opplæringen.
forespørsel ($ navn: String!) søk (spørring: $ navn, siste: 10, type: REPOSITORY) kanter node ... på Repository id navn beskrivelse url
Denne søken søker etter de siste 10 lagringsplassene som samsvarer med den spesifikke inntastingsstrengen, som vi vil definere i vår søknad.
Den returnerer id, Navn, beskrivelse, og url for hvert resultat.
Vi må importere de to modulene nedenfor til vår React-komponent for å kunne definere spørringen i komponenten og deretter sende resultatene til komponenten som rekvisitter.
importer gql fra 'graphql-tag'; importer graphql fra 'reagere-apollo';
Her tildelte vi spørringen til en konstant variabel, men vi har ikke definert Navn parameteren ennå.
const repoQuery = gql 'query ($ navn: String!) søk (spørring: $ navn, siste: 10, type: REPOSITORY) kanter node ... på Repository id navn beskrivelse url'
Nå pakker vi vår komponent sammen med graphql HOC (Higher Order Component) for å definere søkeparametrene, utføre spørringen og deretter sende resultatet som rekvisitter til komponenten vår.
const AppWithData = graphql (repoQuery, alternativer: variabler: navn: "tuts") (App)
Nedenfor er den endelige versjonen av vår komponent.
Import React, Component fra 'reagere'; importer gql fra 'graphql-tag'; importer graphql fra 'reagere-apollo'; klassen App utvider komponent render () return (); const repoQuery = gql 'query ($ navn: String!) søk (spørring: $ navn, siste: 10, type: REPOSITORY) kanter node ... på Repository id navn beskrivelse url' const AppWithData = graphql (repoQuery, alternativer: variabler: navn: "tuts") (App) eksporter standard AppWithData;
Vær oppmerksom på at vi ikke eksporterer selve app komponent, men den innpakket komponenten, som er AppWithData.
La oss gå videre og legge til console.log (this.props) til gjengivelsesmetoden til komponenten din.
klassen App utvider komponent render () console.log (this.props) returnerer ();
Når du sjekker konsollen til nettleseren din, ser du at det er to objektslogger.
Inne i hver gjenstand ser du data eiendom. Dette leveres til vår komponent gjennom graphql HOC.
Legg merke til at den første loggen har lasting: sant eiendom inni data, og den andre loggen har lasting: false og et nytt objekt som heter Søke, som er akkurat de dataene vi ønsket å få.
La oss skrive noen JSX for å vise de hentede dataene.
Siden Søke objektet er ikke først der, vi kan ikke prøve å gjengi det direkte. Derfor må vi først sjekke om vi hentet dataene og Søke objektet er klar til bruk.
For å gjøre det, vil vi bare bruke lasting informasjon gitt i data eiendom.
Hvis lasting er ekte da gjør vi bare Laster tekst, ellers dataene selv.
klassen App utvider komponent render () return (this.props.data.loading === true? "Loading": this.props.data.search.edges.map (data =>);)
- Data.node.name
- Data.node.description
Jeg brukte ?: ternær operatør for grunnleggende inline betingede uttrykk. Hvis lasting er ekte vi viser Laster,og hvis det er feil, bruker vi kartfunksjonen til å iterere gjennom vår dataregruppe for å vise informasjonen inne i elementer.
Dette er bare et grunnleggende eksempel. Du kan bruke en vanlig if-else-setning og returnere forskjellige resultater for gjengivelsesmetoden din.
Du kan sjekke Apollo-Client-with-React-depotet, klone det på datamaskinen din og spille rundt.
PS! Ikke glem å erstatte pollett variabel med din egen API-token for GitHub.
Vi dekket hvordan du kommer i gang med Apollo Client for React. Vi installerte de nødvendige modulene, satt opp klienten, og ga den til vår komponent øverst på komponenthierarkiet. Vi lærte å teste GraphQL-spørringer raskt før de implementerte dem i vår faktiske applikasjon. Til slutt integrerte vi spørringen i en React-komponent og viste de hentede dataene.
Accentsconagua