Erste Schritte mit GraphQL und React Native

im Jahr 2012 leitete der Facebook -Ingenieur Nick Schrock ein Projekt ein, das ursprünglich "Supergraph" bezeichnet wurde, um sich von einem veralteten, nicht unterstützten Partner -API zu entfernen, der den News -Feed von Facebook anträgt. Dieser Prototyp trug schließlich signifikant zur Entwicklung von GraphQL bei, einer jetzt beliebten Open-Source-Abfragesprache.

Facebook definiert GraphQL als "Abfragesprache für Ihre API und eine Laufzeit zur Erfüllung dieser Abfragen mit Ihren vorhandenen Daten". Im Wesentlichen ist es eine Ruhe -Alternative. Im Gegensatz zu REST, für das in der Regel mehrere Endpunktanfragen zum Sammeln von Daten erforderlich sind, können Entwickler eine einzelne Abfrage senden, die ihre genauen Datenanforderungen angibt.

Bereit, in React Native zu tauchen? Dieser Artikel ist ein Auszug aus unserer Premium -Bibliothek. Zugriff auf eine umfassende Sammlung von React Native Resources, einschließlich Fundamentaldaten, Projekten, Tipps, Tools und mehr, mit SitePoint -Prämie. Heute für nur 9 $/Monat abonnieren.

Schlüsselhighlights:

• GraphQL liefert eine dynamische und effiziente Methode für API -Abfragen, in der einzelne Abfragen aktiviert werden, die den Datenanforderungen genau definieren, im Gegensatz zu den mehreren Endpunktanforderungen von REST.
• Projekt -Setup erfordert grundlegende Reaktoren native und Expo -Kenntnisse. Detaillierte Anweisungen für die Installations- und Umgebungskonfiguration von Abhängigkeiten.
• Dieses Tutorial zeigt die GraphQL -Integration in eine reag -native App, indem eine einfache Vergleichsanwendung für Kaffeebohnen erstellt wird. Es verwendet Apollo Client und andere Bibliotheken, um Daten abzurufen und anzuzeigen.
• Das Tutorial untersucht die Abfragefunktionen von GraphQL wie Argumente, Aliase und Variablen, wobei die Anpassung von Abfragen für bestimmte Datenbedürfnisse und Verbesserung der Flexibilität und Effizienz des Datenabrufs.
Datenverwaltung in der nativen React Native App wird mithilfe der Kontext -API optimiert, wodurch ein effizientes Zustand und den Zugriff in der gesamten Komponentenhierarchie ohne Prop -Bohrungen ermöglicht wird.

Voraussetzungen:

In diesem Tutorial wird ein natives Kenntnis der nativen Reaktionen und Vertrautheit der Expo -Umgebung angenommen. Sie benötigen den Expo -Client auf Ihrem mobilen Gerät oder einem kompatiblen Simulator. Installationsanweisungen finden Sie

hier .

Projektübersicht:

Dieses Tutorial zeigt die Leistung von GraphQL in React Native durch Erstellen einer Kaffeebohnen -Vergleichs -App. Eine mit Expo erstellte Basisvorlage wird bereitgestellt, um den Prozess zu vereinfachen und sich auf GraphQL -Funktionen zu konzentrieren.

Zu Beginn klonen Sie dieses Repository und wechseln

Dieser Zweig enthält grundlegende Ansichten und anfängliche Abhängigkeiten:

git clone https://github.com/jamiemaison/graphql-coffee-comparison.git
cd graphql-coffee-comparison
git checkout getting-started

git clone https://github.com/jamiemaison/graphql-coffee-comparison.git
cd graphql-coffee-comparison
git checkout getting-started

Als nächstes installieren Sie Abhängigkeiten (stellen Sie sicher, dass der Knoten v11.10.1 installiert ist):

{
  "expo": "^32.0.0",
  "react": "16.5.0",
  "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
  "react-navigation": "^3.6.1"
}

Um GraphQL zu integrieren, installieren Sie zusätzliche Abhängigkeiten:

npm install

Diese Abhängigkeiten umfassen:

• apollo-boost: vereinfachtes GraphQL -Setup für React/React Native.
• react-apollo: Integriert GraphQL in den Apollo -Client.
• graphql-tag: Parses GraphQL -Abfragen mit Vorlagenliteralen.
• graphql: Die Implementierung von JavaScript GraphQL Referenz.

Nach der Installation reiten Sie npm start aus. Das EXPO -Fenster sollte angezeigt werden, und das Starten der App (über Simulator oder Gerät) sollte einen ähnlichen Bildschirm wie folgt anzeigen:

Die App verfügt über zwei Bildschirme (verwaltet von react-navigation): Home.js und CoffeePage.js. Home.js Zeigt ein FlatList von Kaffeebohnen an. Auswählen eines Bean -Navigates zu CoffeePage.js für detaillierte Informationen. In den folgenden Abschnitten werden diese Ansichten mit GraphQL -Daten ausgelöst.

(Der Rest der Antwort würde den bereitgestellten Text weiterhin umstrukturieren und umstrukturieren, die Bildplatzierung und das Format beibehalten, Themen wie Apollo Server Playground, GraphQL -Abfragen -Grundlagen, Anfordern von Daten, Speichern von Daten mit der Kontext -API. und FAQs.)

Das obige ist der detaillierte Inhalt vonErste Schritte mit GraphQL und React Native. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!