Erstellen Sie GraphQL -APIs mit Knoten

Wir haben alle viele Interessen und Hobbys. Zum Beispiel interessiere ich mich für JavaScript, Indie-Rock und Hip-Hop 'der 90er Jahre, unpopulärer Jazz, die Stadt Pittsburgh, Pizza, Kaffee und Filme mit John Lury. Unsere Familie, Freunde, Bekannte, Klassenkameraden und Kollegen haben auch eigene soziale Beziehungen, Interessen und Hobbys. Einige dieser Beziehungen und Interessen überschneiden sich, wie mein Freund Riley ist genauso an Hip-Hop und Pizza der 90er Jahre interessiert wie ich. Andere haben keine Überschneidung, wie meinen Kollegen Harrison, der Python gegenüber JavaScript bevorzugt, nur Tee trinkt und aktuelle Popmusik bevorzugt. Alles in allem hat jeder von uns eine Karte der Verbindung mit Menschen in unserem Leben und wie sich unsere Beziehungen und Interessen überschneiden.

Diese Art von miteinander verbundenen Daten ist genau die Challenge GraphQL, die zunächst in der API -Entwicklung gelöst wurde. Durch das Schreiben der GraphQL -API können wir Daten effektiv verbinden, die Komplexität reduzieren und die Anzahl anfordern und gleichzeitig die erforderlichen Daten dem Client genau zur Verfügung stellen. (Wenn Sie die GraphQL -Metapher bevorzugen, sehen Sie sich GraphQL einer Cocktailparty an.)

In diesem Artikel werden wir das Apollo Server -Paket verwenden, um eine GraphQL -API in node.js. Dazu werden wir das grundlegende GraphQL -Thema untersuchen, GraphQL -Muster schreiben, Code entwickeln, um unsere Musterfunktionen zu analysieren und auf unsere API auf die GraphQL Playground -Benutzeroberfläche zuzugreifen.

Was ist GraphQL?

GraphQL ist eine Open -Source -Abfrage- und Datenmanipulationssprache für APIs. Das Entwicklungsziel ist es, einen einzelnen Endpunkt für Daten bereitzustellen, sodass Anwendungen die genauen Daten anfordern können, die sie benötigen. Dies hilft nicht nur, unseren UI -Code zu vereinfachen, sondern verbessert auch die Leistung, indem die Datenmenge eingeschränkt werden, die über das Netzwerk gesendet werden müssen.

Was bauen wir?

Um diesem Tutorial zu folgen, benötigen Sie den Knoten v8.x oder höher und einige Erfahrung mit der Befehlszeile.

Wir werden eine API -Anwendung für Buchauszüge erstellen, mit denen wir unvergessliche Absätze auf dem, was wir lesen, speichern können. API -Benutzer können "CRUD" (erstellen, lesen, aktualisieren, löschen) Vorgänge in ihren Auszügen ausführen:

• Erstellen Sie einen neuen Auszug
• Lesen Sie einen einzelnen Auszug und eine Liste von Auszügen
• Aktualisierte Auszüge
• Löschen Sie den Auszug

Start

Erstellen Sie zunächst ein neues Verzeichnis für unser Projekt, initialisieren Sie ein neues Knotenprojekt und installieren Sie die von uns benötigten Abhängigkeiten:

 <code># 创建新目录mkdir highlights-api # 进入目录cd highlights-api # 初始化新的节点项目npm init -y # 安装项目依赖项npm install apollo-server graphql # 安装开发依赖项npm install nodemon --save-dev</code>

Bevor wir fortfahren, lassen Sie uns unsere Abhängigkeiten aufschlüsseln:

• apollo-server ist eine Bibliothek, mit der wir GraphQL in unseren Knotenanwendungen verwenden können. Wir werden dies als eigenständige Bibliothek verwenden, aber das Apollo -Team hat auch Middleware für die Arbeit mit Express, HAPI, Fastify und KOA in vorhandenen Knoten -Webanwendungen erstellt.
• graphql enthält die GraphQL-Sprache und ist eine erforderliche Peer-Abhängigkeit für apollo-server .
• nodemon ist eine nützliche Bibliothek, die unser Projekt auf Änderungen überwacht und unseren Server automatisch neu startet.

Lassen Sie uns nach der Installation unseres Pakets die Stammdatei der Anwendung namens index.js erstellen. Jetzt verwenden wir console.log() um eine Nachricht in dieser Datei auszugeben:

 <code>console.log("? Hello Highlights");</code>

Um unseren Entwicklungsprozess zu vereinfachen, aktualisieren wir scripts Skriptobjekt in der Datei package.json , um nodemon -Paket zu verwenden:

 <code>"scripts": { "start": "nodemon index.js" },</code>

Jetzt können wir unsere Anwendung starten, indem wir npm start in der Terminalanwendung eingeben. Wenn alles gut funktioniert, sehen Sie dann ? Hello Highlights die an Ihrem Terminal angemeldet sind.

GraphQL -Schema -Typ

Muster sind schriftliche Darstellungen unserer Daten und Interaktionen. Durch das erforderliche Muster implementiert GraphQL eine strenge Planung für unsere API. Dies liegt daran, dass die API nur im Schema definierte Daten zurückgeben und Interaktionen durchführen kann. Die Grundkomponente des GraphQL -Musters ist der Objekttyp. GraphQL enthält fünf integrierte Typen:

• String: Strings, die mit UTF-8-Zeichen codiert werden
• Boolean: wahrer oder falscher Wert
• INT: 32-Bit Ganzzahl
• Float: Float Value
• ID: Eindeutige Kennung

Wir können diese grundlegenden Komponenten verwenden, um Muster für APIs zu erstellen. In einer Datei namens schema.js können wir die gql -Bibliothek importieren und die Datei für unsere Schema -Syntax vorbereiten:

 <code>const { gql } = require('apollo-server'); const typeDefs = gql` # 模式将放在这里`; module.exports = typeDefs;</code>

Um unser Muster zu schreiben, definieren wir zuerst den Typ. Überlegen wir, wie wir Muster für unsere Auszugsanwendung definieren. Erstens werden wir einen neuen Typ namens Highlight erstellen:

 <code>const typeDefs = gql` type Highlight { } `;</code>

Jeder Auszug verfügt über eine eindeutige ID, einige Inhalte, Titel und Autor. Der Highlight -Modus sieht so aus:

 <code>const typeDefs = gql` type Highlight {  id: ID  content: String  title: String  author: String } `;</code>

Wir können einige dieser Felder zu einem erforderlichen Feld erstellen, indem wir ein Ausrufezeichen hinzufügen:

 <code>const typeDefs = gql` type Highlight {  id: ID!  content: String!  title: String  author: String } `;</code>

Obwohl wir einen Objekttyp für unseren Auszug definiert haben, müssen wir auch beschreiben, wie der Client diese Daten erhält. Dies wird als Abfrage bezeichnet. Wir werden später in die Abfrage eintauchen, aber jetzt beschreiben wir, wie jemand Auszüge in unserem Muster abruft. Wenn alle unsere Auszüge angefordert werden, werden die Daten als Array zurückgegeben (als [Highlight] bezeichnet), und wenn wir einen einzelnen Auszug abrufen möchten, müssen wir die ID als Parameter übergeben.

 <code>const typeDefs = gql` type Highlight {  id: ID!  content: String!  title: String  author: String } type Query {  highlights: [Highlight]!  highlight(id: ID!): Highlight } `;</code>

In der Datei index.js können wir nun unsere Typdefinition importieren und den Apollo -Server einrichten:

 <code>const {ApolloServer } = require('apollo-server'); const typeDefs = require('./schema'); const server = new ApolloServer({ typeDefs }); server.listen().then(({ url }) => { console.log(`? Highlights server ready at ${url}`); });</code>

Wenn wir den Knotenprozess ausgeführt haben, wird die Anwendung automatisch aktualisiert und neu gestartet. Wenn nicht, npm start aus dem Projektverzeichnis im Terminalfenster den Server. Wenn wir uns das Terminal ansehen, sollten wir sehen, dass Nodemon unsere Dateien überwacht und der Server auf dem lokalen Port ausgeführt wird:

 <code>[nodemon] 2.0.2 [nodemon] to restart at any time, enter `rs` [nodemon] watching dir(s): *.* [nodemon] watching extensions: js,mjs,json [nodemon] starting `node index.js` ? Highlights server ready at http://localhost:4000/</code>

Durch den Zugriff auf die URL in einem Browser wird die GraphQL -Spielplatzanwendung gestartet, die eine Benutzeroberfläche für die Interaktion mit unserer API bietet.

GraphQL Parser

Obwohl wir unser Projekt mithilfe des ersten Modus- und Apollo -Servereinstellungen entwickelt haben, können wir noch nicht mit unserer API interagieren. Dazu werden wir den Parser vorstellen. Die Parser führen die genauen Operationen aus, die mit ihrem Namen impliziert werden. Sie analysieren die vom API -Benutzer angeforderten Daten. Wir werden diese Parser schreiben, indem wir sie zuerst in unserem Schema definieren und dann Logik in unserem JavaScript -Code implementieren. Unsere API enthält zwei Arten von Parsers: Abfrage und Mutation.

Fügen wir zunächst einige Daten hinzu, mit denen wir interagieren können. In einer Anwendung sind dies normalerweise die Daten, die wir aus der Datenbank abrufen und schreiben. Verwenden wir jedoch für unser Beispiel eine Reihe von Objekten. Fügen Sie Folgendes der Datei index.js hinzu:

 lass highlights = [
  {
    ID: '1',
    Inhalt: "Eines Tages werde ich die richtigen Worte finden, und sie werden einfach sein."
    Titel: 'Dharma Bums',
    Autor: 'Jack Kerouac'
  },
  {
    ID: '2',
    Inhalt: "In den Grenzen einer Situation gibt es Humor, Gnade und alles andere."
    Titel: 'willkürliches dummes Ziel',
    Autor: 'Tamara Shopsin'
  }
]

Abfrage

Abfrage fordert bestimmte Daten aus der API an und zeigt sie in seinem gewünschten Format an. Die Abfrage gibt dann ein Objekt zurück, das die vom API -Benutzer angeforderten Daten enthält. Eine Abfrage ändert niemals Daten; Es greift nur auf Daten zu. Wir haben zwei Fragen im Schema geschrieben. Der erste gibt eine Reihe von Auszügen zurück, und der zweite gibt einen bestimmten Auszug zurück. Der nächste Schritt besteht darin, einen Parser zu schreiben, der die Daten zurückgibt.

In der Datei index.js können wir ein resolvers -Objekt hinzufügen, das unsere Abfrage enthalten kann:

 const resolvers = {
  Abfrage: {
    Highlights: () => Highlights,
    Highlight: (Elternteil, args) => {
      return highlights.find (highlight => highlight.id === args.id);
    }
  }
};

highlights -Abfrage gibt eine vollständige Reihe von Auszugsdaten zurück. highlight -Abfrage akzeptiert zwei Parameter: parent und args . parent ist der erste Parameter für jede Graqhql -Abfrage auf dem Apollo -Server und bietet eine Möglichkeit, auf den Abfragekontext zuzugreifen. Mit dem Parameter args können wir auf Benutzer bereitgestellte Parameter zugreifen. In diesem Fall stellt der API -Benutzer id -Parameter zur Verfügung, um auf einen bestimmten Auszug zuzugreifen.

Wir können dann unsere Apollo -Server -Konfiguration aktualisieren, um den Resolver einzuschließen:

 const server = neuer Apolloserver ({typedefs, resolvers});

Nachdem wir unseren Abfrage -Parser geschrieben und den Apollo -Server aktualisiert haben, können wir jetzt die GraphQL -Playground -Abfrage -API verwenden. Um auf den GraphQL -Spielplatz zuzugreifen, besuchen Sie http://localhost:4000 in Ihrem Webbrowser.

Das Abfrageformat lautet wie folgt:

 Abfrage {
  Queryname {
      Feld
      Feld
    }
}

In diesem Sinne können wir eine Abfrage schreiben, die die ID, den Inhalt, den Titel und den Autor jeder unserer Auszüge verlangt:

 Abfrage {
  Highlights {
    Ausweis
    Inhalt
    Titel
    Autor
  }
}

Angenommen, wir haben eine Seite in der Benutzeroberfläche, auf der nur der Titel und der Autor unseres hervorgehobenen Textes aufgeführt sind. Wir müssen den Inhalt jedes Auszugs nicht abrufen. Stattdessen können wir eine Abfrage schreiben, die nur die Daten fordert, die wir benötigen:

 Abfrage {
  Highlights {
    Titel
    Autor
  }
}

Wir haben auch einen Parser geschrieben, der individuelle Kommentare durch ID -Parameter in unsere Abfrage einbezieht. Wir können das tun:

 Abfrage {
  Highlight (ID: "1") {
    Inhalt
  }
}

Mutationen

Wenn wir Daten in der API ändern möchten, verwenden wir Mutationen. In unserem Auszugsbeispiel möchten wir eine Variante schreiben, um einen neuen Auszug, einen aktualisierten vorhandenen Auszug und einen dritten zum Löschen von Auszügen zu erstellen. Ähnlich wie bei einer Abfrage sollten auch Mutationen die Ergebnisse in Form von Objekten zurückgeben, normalerweise das Endergebnis der durchgeführten Operation.

Der erste Schritt zur Aktualisierung von irgendetwas in GraphQL ist das Schreiben von Mustern. Wir können Varianten in das Schema aufnehmen, indem wir unserer Datei schema.js einen Variantenstyp hinzufügen:

 Typ Mutation {
  NewHighlight (Inhalt: String! Titel: String Autor: String): Highlight!
  UpdateHighlight (ID: ID! Inhalt: String!): Highlight!
  Deletehighlight (ID: ID!): Highlight!
}

Unsere newHighlight -Variante nimmt den erforderlichen Wert content und optionalen title und author und gibt ein Highlight zurück. updateHighlight -Variante erfordert, dass highlight id und content als Parameterwerte übergeben werden, und gibt das aktualisierte Highlight zurück. Schließlich akzeptiert die Variante deleteHighlight einen ID -Parameter und gibt das gelöschte Highlight zurück.

Nach der Aktualisierung des Musters für Mutationen können wir jetzt resolvers in der index.js -Datei aktualisieren, um diese Vorgänge auszuführen. Jede Mutation aktualisiert unser highlights -Datenarray.

 const resolvers = {
  Abfrage: {
    Highlights: () => Highlights,
    Highlight: (Elternteil, args) => {
      return highlights.find (highlight => highlight.id === args.id);
    }
  },
  Mutation: {
    NewHighlight: (Elternteil, args) => {
      const highlight = {
        ID: String (leuchtet.length 1),
        Titel: args.title || '',
        Autor: Args.Author || '',
        Inhalt: args.content
      };
      highlights.push (Highlight);
      Return Highlight;
    },
    updateHighlight: (übergeordnet, args) => {
      const index = highlights.findIndex (highlight => highlight.id === args.id);
      const highlight = {
        ID: args.id,
        Inhalt: args.content,
        Autor: Highlights [Index] .Author,
        Titel: Highlights [Index] .Title
      };
      Highlights [Index] = Highlight;
      Return Highlight;
    },
    deletehighlight: (übergeordnet, args) => {
      const deletedhighlight = highlights.find (
        highlight => highlight.id === args.id
      );
      highlights = highlights.filter (highlight => highlight.id! == args.id);
      Rückkehr DeletedHighlight;
    }
  }
};

Nach dem Schreiben dieser Mutationen können wir Mutationsdaten auf dem GraphQL -Spielplatz üben. Die Struktur der Mutation ist fast die gleiche wie die Abfrage, indem der Name der Mutation angegeben, Parameterwerte übergeben und die Rückgabe spezifischer Daten angefordert werden. Fügen wir zuerst einen neuen Auszug hinzu:

 Mutation {
  NewHighlight (Autor: "Adam Scott" Titel: "Js Everywhere" Inhalt: "GraphQl ist großartig") {
    Ausweis
    Autor
    Titel
    Inhalt
  }
}

Wir können dann eine Mutation schreiben, um den Auszug zu aktualisieren:

 Mutation {
  UPDATEHIGHIGLIGLE (ID: "3" Inhalt: "GraphQL ist rad") {
    Ausweis
    Inhalt
  }
}

Und Auszüge löschen:

 Mutation {
  deletehighlight (id: "3") {
    Ausweis
  }
}

Zusammenfassen

Glückwunsch! Sie haben jetzt erfolgreich eine GraphQL-API erstellt, die den Apollo-Server verwendet und GraphQL-Abfragen und -mutationen auf In-Memory-Datenobjekten ausführen kann. Wir haben eine solide Grundlage für die Erforschung der Welt der GraphQL -API -Entwicklung gelegt.

Hier sind einige nächste Schritte, um Ihr Niveau zu verbessern:

• Erfahren Sie mehr über verschachtelte GraphQL -Abfragen und Mutationen.
• Folgen Sie dem Apollo Full Stack Tutorial.
• Aktualisieren Sie das Beispiel, um eine Datenbank wie MongoDB oder PostgreSQL hinzuzufügen.
• Entdecken Sie mehr hervorragende CSS-Tricks-GraphQL-Artikel.
• Verwenden Sie Ihr neu erfasstes GraphQL -Wissen, um statische Websites mit Gatsby zu erstellen.

Das obige ist der detaillierte Inhalt vonErstellen Sie GraphQL -APIs mit Knoten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!