Share
GraphQL ist in letzter Zeit populär geworden und wird wahrscheinlich die Rest-API ersetzen. In diesem Lernprogramm verwenden wir den Apollo-Client für die Kommunikation mit der GraphQL-API von GitHub. Wir werden Apollo Client mit ReactJS integrieren, Sie können es jedoch auch mit mehreren anderen Client-Plattformen verwenden.
In diesem Lernprogramm wird nicht erläutert, wie ein React-Projekt gestartet wird. Sie können jedoch verwenden Create-React-App anfangen.
Sobald die Reakt-App fertig ist, müssen Sie als Nächstes die erforderlichen Module installieren.
In der folgenden Zeile werden alle erforderlichen Module installiert.
npm install Apollo-Client-Preset Reakt-Apollo Graphql-Tag Graphql --save
Jetzt können wir unsere Komponente mit einem Kunden versehen.
Sie können einen Client an beliebiger Stelle in Ihrer React-Komponentenhierarchie bereitstellen. Es ist jedoch immer eine gute Praxis, die Komponente bereitzustellen, die Ihre gesamte Anwendung mit dem Client umgibt.
import Reagieren von 'Reagieren'; importiere ReactDOM von 'reag-dom'; App aus './App' importieren; importiere ApolloProvider aus 'reag-apollo'; ApolloClient aus 'Apollo-Client' importieren; HttpLink von 'apollo-link-http' importieren; import InMemoryCache aus 'apollo-cache-inmemory'; const token = "YOUR_TOKEN"; const httpLink = uri: 'https://api.github.com/graphql', Header: Berechtigung: 'Träger $ token'; const client = new ApolloClient (link: new HttpLink (httpLink), cache: new InMemoryCache ()); ReactDOM.render (, document.getElementById ('root'));
Oben sehen Sie, dass wir das definiert haben uri für GitHub und auch ein bestimmtes Token für Überschriften. Sie sollten Ihr eigenes, von GitHub generiertes Token verwenden. Vergessen Sie nicht, es durch zu ersetzen YOUR_TOKEN.
Für dieses Beispiel haben wir das API-Token auf der Clientseite definiert. Sie sollten Ihr API-Token jedoch nicht öffentlich zugänglich machen. Daher ist es immer gut, es auf dem Server zu lassen, der von der Clientseite abstrahiert ist.
Beachten Sie, dass wir die verpackt haben ApolloProvider und benutzte die Klient Variable, die wir für die erstellt haben Klient Stütze.
Bevor ich in die Abfragen eintauche, möchte ich darauf hinweisen, dass es ein sehr praktisches Tool namens GraphiQL gibt, mit dem Sie Ihre GraphQL-Abfragen testen können. Vergewissern Sie sich vor dem Fortfahren, dass Sie es heruntergeladen haben.
Nachdem Sie GraphiQL geöffnet haben, müssen Sie die Option festlegen GraphQL-Endpunkt und HTTP-Header.
GraphQL-Endpunkt: https://api.github.com/graphql
Header Name: Genehmigung
Header-Wert: Inhaberin YOUR_TOKEN
Sie müssen natürlich ersetzen YOUR_TOKEN mit deinem eigenen token. Vergessen Sie nicht, die Träger vor Ihrem Token bei der Definition der Kopfwert.
Wenn Sie keine Anwendung herunterladen möchten, können Sie auch den Online-GraphQL-API-Explorer für GitHub verwenden.
Im Gegensatz zu einer REST-API mit mehreren Endpunkten hat die GraphQL-API nur einen Endpunkt, und Sie rufen nur das ab, was durch Ihre Abfrage definiert wird.
Die Dokumentation der GraphQL-API von GitHub gibt Ihnen einen besseren Einblick.
Der beste Teil der GraphiQL-Anwendung besteht auch darin, dass Sie auf die Dokumentation für Abfragen direkt in der Anwendung zugreifen können. Sie sehen die Sidebar auf der rechten Seite Docs.
Beginnen wir mit der einfachsten Abfrage:
Abfrage Betrachter Login
Diese Abfrage gibt Ihnen die Anmeldeinformationen des Viewers zurück. In diesem Fall sind Sie der Betrachter, seit Sie Ihr eigenes API-Token verwendet haben.
In diesem Tutorial werde ich keine detaillierten Informationen zu Fragen geben. Sie können jederzeit auf die Dokumentation zugreifen und Abfragen in GraphQL-Tools durchführen, um zu sehen, ob Sie die korrekten Daten erhalten.
Verwenden Sie die folgende Abfrage für den Rest des Lernprogramms.
Abfrage ($ Name: String!) Suche (Abfrage: $ Name, letzte: 10, Typ: REPOSITORY) Kanten Knoten … im Repository ID-Name Beschreibungs-URL
Diese Abfrage sucht nach den letzten 10 Repositorys, die der spezifischen Eingabezeichenfolge entsprechen, die wir in unserer Anwendung definieren.
Es gibt das zurück Ich würde, Name, Beschreibung, und url für jedes Ergebnis.
Wir müssen die beiden folgenden Module in unsere React-Komponente importieren, um die Abfrage innerhalb der Komponente definieren zu können und die Ergebnisse als Requisiten an die Komponente zu übergeben.
importiere gql aus 'graphql-tag'; import graphql aus 'reag-apollo';
Hier haben wir unsere Abfrage einer konstanten Variablen zugewiesen, die aber nicht definiert Name Parameter noch.
const repoQuery = gql 'query ($ name: String!) search (Abfrage: $ name, last: 10, Typ: REPOSITORY) Kanten Knoten … auf Repository ID-Name Beschreibung URL
Jetzt wickeln wir unsere Komponente mit dem graphql HOC (Higher Order Component) um die Abfrageparameter zu definieren, führen die Abfrage aus und übergeben das Ergebnis als Requisiten an unsere Komponente.
const AppWithData = graphql (repoQuery, Optionen: Variablen: Name: "Tuts") (App)
Unten ist die endgültige Version unserer Komponente.
importieren Sie React, Component aus 'reagieren'; importiere gql aus 'graphql-tag'; import graphql aus 'reag-apollo'; Die Klasse App erweitert die Komponente render () return (); const repoQuery = gql 'query ($ name: String!) search (Abfrage: $ name, last: 10, Typ: REPOSITORY) Kanten Knoten … im Repository ID-Name Beschreibungs-URL' const AppWithData = graphql (repoQuery, Optionen: Variablen: Name: "Tuts") (App) Export von Standard-AppWithData;
Beachten Sie, dass wir das Ist nicht exportieren App Komponente aber die umwickelte Komponente, die ist AppWithData.
Lassen Sie uns fortfahren und hinzufügen console.log (this.props) zur Rendermethode Ihrer Komponente.
Klasse App erweitert Component render () console.log (this.props) return ();
Wenn Sie die Konsole Ihres Browsers überprüfen, werden zwei Objektprotokolle angezeigt.
In jedem Objekt sehen Sie die Daten Eigentum. Dies wird unserer Komponente durch die bereitgestellt graphql HOC.
Beachten Sie, dass das erste Protokoll die Laden: stimmt Eigentum innen Daten, und das zweite Protokoll hat Laden: falsch und ein neues Objekt namens Suche, Das sind genau die Daten, die wir bekommen wollten.
Lassen Sie uns etwas JSX schreiben, um die abgerufenen Daten anzuzeigen.
Seit der Suche Objekt ist anfangs nicht vorhanden, wir können nicht direkt versuchen, es zu rendern. Deshalb müssen wir zunächst prüfen, ob wir die Daten abgerufen haben und die Suche Objekt ist einsatzbereit.
Dazu benutzen wir einfach die Wird geladen Informationen in der Daten Eigentum.
Ob Wird geladen ist wahr dann rendern wir einfach das Wird geladen ansonsten die Daten selbst.
Die Klasse App erweitert die Komponente render () return (this.props.data.loading === wahr? "Laden": this.props.data.search.edges.map (data =>);)
- data.node.name
- data.node.description
Ich habe die ?: ternärer Operator für grundlegende inline bedingte Ausdrücke. Ob Wird geladen ist wahr wir zeigen an Wird geladen,und wenn es falsch ist, verwenden wir die Kartenfunktion, um durch unser Datenarray zu iterieren, um die Informationen im anzuzeigen Elemente.
Dies ist nur ein einfaches Beispiel. Sie können eine normale if-else-Anweisung verwenden und unterschiedliche Ergebnisse für Ihre Render-Methode zurückgeben.
Sie können das Apollo-Client-with-React-Repository überprüfen, auf Ihrem Computer klonen und herumspielen.
P.S. Vergessen Sie nicht, das zu ersetzen Zeichen Variable mit Ihrem eigenen API-Token für GitHub.
Wir haben behandelt, wie Sie mit Apollo Client for React loslegen können. Wir haben die erforderlichen Module installiert, den Client eingerichtet und dann unserer Komponente oben in der Komponentenhierarchie bereitgestellt. Wir haben gelernt, wie Sie GraphQL-Abfragen schnell testen können, bevor Sie sie in unserer aktuellen Anwendung implementieren. Schließlich haben wir die Abfrage in eine React-Komponente integriert und die abgerufenen Daten angezeigt.
Accentsconagua