Entdecken Sie GraphQL mit Apollo & React: Erstellen Sie eine Superhelden -Datenbank

Tauchen Sie in die Welt von GraphQL und entdecken Sie, warum es so viel Aufregung erzeugt! Dieses Tutorial liefert eine klare Erklärung von GraphQL und bietet praktische Erfahrung.

Besprechen wir zuerst die Kernfrage: Was ist GraphQl? Es ist keine dunkle Taschenrechnerfunktion; Stattdessen handelt es sich um eine leistungsstarke Abfragesprache (oder genauer gesagt eine Abfragespezifikation) zum Abholen von Daten aus verschiedenen Quellen. Sein wichtiger Vorteil? Es wird nur die erforderlichen Daten in einer einzelnen Netzwerkanforderung abgerufen, wodurch die Ineffizienzen traditioneller REST -APIs eliminiert werden.

Dieses Tutorial verwendet einen Apollo -Server als Endpunkt und eine React -App mit dem Apollo -Client, um auf die Daten zuzugreifen. Wir beginnen mit dem Server.

Schlüsselkonzepte:

• GraphQL ist eine Abfragesprache, die präzise Datenabrufe in einer einzelnen Anforderung einer beliebigen Datenquelle bietet und die REST -APIs in Effizienz und Flexibilität übertreffen.
• Ein Apollo -Server (Endpunkt) und eine React -App mit dem Apollo -Client sind für die GraphQL -Datenauslastung unerlässlich.
• Das Tutorial veranschaulicht die Schemaerstellung, Datenentwicklung, Resolver -Definition und Integration unter Verwendung eines Superhelden -Datenbankbeispiels.
• Es zeigt, wie Front-End- und Back-End-Entwicklung weitgehend unabhängig verlaufen kann, wobei das Schema als Schnittstelle fungiert.

Einrichten des Apollo -Servers:

1. Erstellen Sie ein apollo-server Verzeichnis.
2. navigieren Sie dazu und installieren Sie die erforderlichen Pakete:

npm install apollo-server apollo-server-express graphql

3. erstellen index.js und fügen Sie:
hinzu

const { ApolloServer, gql } = require('apollo-server');

Dies importiert die wesentlichen Komponenten für den Apollo -Server und die GraphQL -Abfrage -Analyse.

Erstellen des GraphQL -Schemas:

Definieren Sie als nächstes das Schema in index.js:

const typeDefs = gql`
  type User {
    id: ID!
    name: String
    superpowers: [Superpower]!
  }

  type Superpower {
    id: ID!
    text: String
  }

  type Query {
    users: [User]
    user(id: ID!): User
  }
`;

Dies definiert User und Superpower Typen und zwei Abfragen: users (Rückgabe alle Benutzer) und user (gibt einen Benutzer durch ID zurück).

Beispieldaten hinzufügen:

Mockdaten zu index.js:

hinzufügen

const users = [
  { id: '1', name: 'Peter Parker', superpowers: [{ id: '1', text: 'Web slinging' }, { id: '2', text: 'Spidey sense' }] },
  { id: '2', name: 'Tony Stark', superpowers: [{ id: '3', text: 'Industrial design' }, { id: '4', text: 'Robotic fashion' }] }
];

Dies liefert Beispieldaten für die Abfrage. Denken Sie daran, dass GraphQL nicht auf JavaScript -Arrays beschränkt ist. Es kann eine Verbindung zu jeder Datenquelle herstellen.

Definieren von Resolver:

Resolver interpretieren die Abfragen. Fügen Sie diese zu index.js:

hinzu

const resolvers = {
  Query: {
    users: () => users,
    user: (root, { id }) => users.find(user => user.id === id),
  },
};

Der users Resolver gibt alle Benutzer zurück, während user einen Benutzer durch ID findet.

Starten Sie den Server:

vollständig index.js durch Instanziieren und Starten des Servers:

const server = new ApolloServer({ typeDefs, resolvers });
server.listen().then(({ url }) => console.log(`Apollo server started at ${url}`));

Ausführen node index.js und greifen Sie auf den GraphQL -Spielplatz unter http://localhost:4000/ zu

zu

Interaktive Abfragen:

Probieren Sie diese Fragen im Spielplatz aus:

• Peter Parkers Name abrufen:

npm install apollo-server apollo-server-express graphql

• Peter Parkers Name und Supermächte abrufen:

const { ApolloServer, gql } = require('apollo-server');

• Alle Benutzer und ihre Supermächte abrufen:

const typeDefs = gql`
  type User {
    id: ID!
    name: String
    superpowers: [Superpower]!
  }

  type Superpower {
    id: ID!
    text: String
  }

  type Query {
    users: [User]
    user(id: ID!): User
  }
`;

Integration in React:

1. Erstellen Sie eine React -App:

const users = [
  { id: '1', name: 'Peter Parker', superpowers: [{ id: '1', text: 'Web slinging' }, { id: '2', text: 'Spidey sense' }] },
  { id: '2', name: 'Tony Stark', superpowers: [{ id: '3', text: 'Industrial design' }, { id: '4', text: 'Robotic fashion' }] }
];

2. modifizieren Sie src/index.js:

const resolvers = {
  Query: {
    users: () => users,
    user: (root, { id }) => users.find(user => user.id === id),
  },
};

3. ersetzen src/App.js:

const server = new ApolloServer({ typeDefs, resolvers });
server.listen().then(({ url }) => console.log(`Apollo server started at ${url}`));

Ausführen npm start im Verzeichnis my-graphql, um die Ergebnisse unter http://localhost:3000/ zu sehen.

Dieses Tutorial bietet eine Grundlage für die Verwendung von GraphQL. Erforschen Sie Mutationen (für die Datenänderung) und andere erweiterte Funktionen, um Ihre Fähigkeiten weiter zu verbessern. Happy Coding!

GraphQL FAQs:

• Was ist GraphQl? Es ist eine effizientere und flexiblere Alternative zur Ruhe.

• GraphQL vs. REST: rEl rest verwendet mehrere Endpunkte, während GraphQL ermöglicht, nur die benötigten Daten in einer einzelnen Abfrage anzufordern, wodurch Überrückung und Unterregung verhindert wird.

• SchlüsselgraphQL-Funktionen: Hierarchische Abfragestruktur, starke Typisierung, Echtzeitdaten mit Abonnements und Introspection (Abfrage des Schemas selbst).

• GraphQL Schema: definiert die Datentypen und Beziehungen und wirkt als Vertrag zwischen Client und Server.

• Abfragestruktur: Hierarchisch, spiegelt die Antwortdatenstruktur wider. Clients fordern bestimmte Felder an und nisten sie für komplexes Datenabruf.

• Resolver: Funktionen, die definieren, wie Daten für bestimmte Schemafelder abgerufen oder mutieren. Sie verbinden die Abfragen mit der Datenquelle.

Das obige ist der detaillierte Inhalt vonEntdecken Sie GraphQL mit Apollo & React: Erstellen Sie eine Superhelden -Datenbank. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!