Share
GraphQL har blivit populärt nyligen och kommer sannolikt att ersätta resten API. I den här handledningen använder vi Apollo Client för att kommunicera med GitHubs GraphQL API. Vi kommer att integrera Apollo Client med ReactJS, men du kan använda den med flera andra klientplattformar också.
Denna handledning täcker inte hur man startar ett React-projekt, men du kan använda skapa reagera-app för att starta.
När vi har reagera appen klar att gå, är nästa sak att installera de nödvändiga modulerna.
Följande rad installerar alla nödvändiga moduler.
npm installera apollo-klientens förinställda reagera-apollo graphql-tag graphql -save
Nu kan vi tillhandahålla vår komponent med en klient.
Du kan ge en klient någonstans i din React-komponenthierarki. Det är dock alltid en bra praxis att tillhandahålla komponenten, förpackning hela applikationen, med kunden.
Import Reakt från "reagera"; Importera ReactDOM från 'react-dom'; importera app från './App'; importera ApolloProvider från "reagera apollo"; importera ApolloClient från "apollo-client"; importera HttpLink från "apollo-link-http"; importera InMemoryCache från "apollo-cache-inmemory"; const token = "YOUR_TOKEN"; const httpLink = uri: 'https://api.github.com/graphql', rubriker: behörighet: 'Bearer $ token'; const klient = ny ApolloClient (länk: ny HttpLink (httpLink), cache: ny InMemoryCache ()); ReactDOM.render (, document.getElementById ( 'root'));
Ovan kan du se att vi definierade uri för GitHub och använde också en specifik token för headers. Du borde använda din egen token genererad från GitHub. Så glöm inte att byta ut det med YOUR_TOKEN.
I det här exemplet definierade vi API-token på klientsidan. Du bör dock inte avslöja ditt API-token offentligt. Så det är alltid bra att hålla det på servern abstraherad från klientsidan.
Lägg märke till att vi har packat in ApolloProvider och använde klient variabel som vi skapade för klient stötta.
Innan du dyker in i frågorna vill jag påpeka att det finns ett mycket användbart verktyg som heter GraphiQL för att testa dina GraphQL-frågor. Innan du fortsätter, se till att du har laddat ner den.
När du har öppnat GraphiQL måste du ställa in GraphQL Endpoint och HTTP-huvuden.
GraphQL slutpunkt: https://api.github.com/graphql
Rubriknamn: Tillstånd
Rubrikvärde: Bärare YOUR_TOKEN
Självklart måste du byta ut YOUR_TOKEN med din egen token. Glöm inte att inkludera Bärare framför din token när du definierar Rubrikvärde.
Om du inte vill ladda ner ett program kan du också använda online GraphQL API Explorer för GitHub.
Till skillnad från ett REST API med flera slutpunkter, har GraphQL API endast en slutpunkt, och du hämtar bara det som definieras av din fråga.
Dokumentationen av GitHubs GraphQL API ger dig mer insikt.
Den bästa delen av GraphiQL-applikationen är också att den ger dig tillgång till dokumentation för frågor direkt inuti programmet. Du kan se sidofältet till höger heter Dokument.
Låt oss börja med den enklaste frågan:
fråga tittare inloggning
Den här frågan returnerar användarens inloggningsinformation. I det här fallet är tittaren dig sedan du använde din egen API-token.
I denna handledning kommer jag inte att ge detaljerad information om frågor. Du kan alltid referera till dokumentationen och försöka få frågor om GraphQL-verktyg för att se om du får rätt data.
Låt oss använda följande fråga för resten av handledningen.
fråga ($ namn: String!) sök (fråga: $ namn, sista: 10, typ: REPOSITORY) kanter node ... på Repository id namnbeskrivning url
Den här frågan söker efter de senaste 10 repositoriesna som matchar den specifika inmatningssträngen, som vi definierar i vår applikation.
Den returnerar id, namn, beskrivning, och url för varje resultat.
Vi måste importera de två modulerna nedan till vår React-komponent för att kunna definiera frågan inom komponenten och sedan överföra resultaten till komponenten som rekvisita.
importera gql från 'graphql-tag'; importera graphql från "reagera-apollo";
Här tilldelade vi vår fråga till en konstant variabel, men vi har inte definierat namn parameter ännu.
repetition rep
Nu sätter vi in vår komponent med graphql HOC (Higher Order Component) för att definiera sökparametrarna, utföra frågan och sedan skicka resultatet som rekvisita till vår komponent.
const AppWithData = graphql (repoQuery, alternativ: variabler: namn: "tuts") (App)
Nedan är den slutliga versionen av vår komponent.
Importreakt, Komponent från "reagera"; importera gql från 'graphql-tag'; importera graphql från "reagera-apollo"; klass App utökar komponent render () return (); const quote const AppWithData = graphql (repoQuery, options: variabler: name: "tuts") (App) exportera standard AppWithData;
Observera att vi inte exporterar själva App komponent men den inslagna komponenten, vilken är AppWithData.
Låt oss fortsätta och lägga till console.log (this.props) till komponentens renderingsmetod.
klass App utökar komponent render () console.log (this.props) returnera ();
När du kontrollerar din webbläsares konsol ser du att det finns två objektloggar.
Inuti varje objekt ser du data fast egendom. Detta tillhandahålls till vår komponent genom graphql HOC.
Observera att den första loggen har loading: true egendom inomhus data, och den andra loggen har loading: false och ett nytt objekt som heter Sök, vilket är exakt de uppgifter vi ville få.
Låt oss skriva lite JSX för att visa den hämtade data.
Sedan Sök objektet är inte ursprungligen där, vi kan inte direkt försöka göra det. Därför måste vi först kontrollera om vi hämtade data och Sök objektet är klart att användas.
För att göra det ska vi helt enkelt använda läser in information som tillhandahålls inuti data fast egendom.
Om läser in är Sann då gör vi helt enkelt Läser in text, annars själva data.
klass App utökar komponent render () return (this.props.data.loading === true? "Laddar": this.props.data.search.edges.map (data =>);)
- Data.node.name
- Data.node.description
Jag använde ?: ternär operatör för grundläggande inline villkorliga uttryck. Om läser in är Sann vi visar Läser in,och om det är felaktigt använder vi kartfunktionen för att iterera genom vår datarray för att visa informationen inuti element.
Detta är bara ett grundläggande exempel. Du kan använda ett regelbundet if-else-meddelande och returnera olika resultat för din renderingsmetod.
Du kan kolla Apollo-Client-with-React-arkivet, klona det på din dator och spela runt.
P.S. Glöm inte att byta ut tecken variabel med din egen API-token för GitHub.
Vi omfattade hur man började med Apollo Client for React. Vi installerade de nödvändiga modulerna, konfigurerar klienten och gav den till vår komponent överst i komponenthierarkin. Vi lärde oss hur man testar GraphQL-frågor snabbt innan de implementeras i vår faktiska applikation. Slutligen integrerade vi frågan i en React-komponent och visade den hämtade data.
Accentsconagua