So erstellen Sie einen GraphQL-Server mit Next.js-API-Routen

Next.js bietet Ihnen die beste Entwicklererfahrung mit allen Funktionen, die Sie für die Produktion benötigen. Es bietet eine unkomplizierte Lösung zum Erstellen Ihrer API mithilfe von Next.js-API-Routen.

In diesem Leitfaden lernen wir zuerst, was API-Routen sind, und erstellen dann einen GraphQL-Server, der die Daten von der Github-API mithilfe der Next.js-API-Routen abruft.

Um dieses Tutorial optimal nutzen zu können, benötigen Sie zumindest ein grundlegendes Verständnis von GraphQL. Kenntnisse über Apollo Server wären hilfreich, aber nicht zwingend erforderlich. Von diesem Tutorial profitieren diejenigen, die ihre React- oder Next.js-Fähigkeiten auf die Serverseite erweitern und ihre erste Full-Stack-App mit Next.js und GraphQL erstellen möchten.

Tauchen wir also ein.

Was sind Next.js-API-Routen?

Next.js ist ein Framework, das das Rendern von React-Apps auf dem Client oder/und dem Server ermöglicht. Seit Version 9 kann Next.js nun zum Erstellen von APIs mit Node.js, Express, GrapQL usw. verwendet werden. Next.js verwendet das Dateisystem, um Dateien im Ordner „ pages/api “ als API-Endpunkte zu behandeln. Das bedeutet, dass Sie jetzt über die URL https://localhost:3000/api/your-file-name auf Ihren API-Endpunkt zugreifen können.

Wenn Sie von React kommen und Next.js nie verwendet haben, kann dies verwirrend sein, da Next.js ein React-Framework ist. Und wie wir bereits wissen, wird React zum Erstellen von Front-End-Apps verwendet. Warum also Next.js für Backend-Apps und APIs verwenden?

Nun, Next.js kann sowohl auf der Client- als auch auf der Serverseite verwendet werden, da es mit React, Node.js, Babel und Webpack erstellt wurde, und natürlich sollte es auch auf dem Server verwendet werden können. Next.js verlässt sich auf den Server, um API-Routen zu aktivieren, und lässt Sie Ihre bevorzugte Backend-Sprache verwenden, selbst wenn es sich technisch gesehen um ein React-Framework handelt. Hoffentlich verstehst du es richtig.

Bisher haben wir gelernt, was API-Routen sind. Die eigentliche Frage bleibt jedoch: Warum Next.js verwenden, um einen GraphQL-Server zu erstellen ? Warum nicht GraphQL oder Node.js dafür verwenden? Vergleichen wir also im nächsten Abschnitt Next.js-API-Routen mit bestehenden Lösungen zum Erstellen von APIs.

Next.js-API-Routen im Vergleich zu REST und GraphQL

GraphQL und REST sind großartige Möglichkeiten zum Erstellen von APIs. Sie sind sehr beliebt und werden heutzutage von fast jedem Entwickler verwendet. Warum also ein React-Framework zum Erstellen von APIs verwenden? Nun, die schnelle Antwort lautet, dass Next.js-API-Routen einem anderen Zweck dienen, da Sie mit API-Routen Ihre Next.js-App erweitern können, indem Sie ihr ein Backend hinzufügen.

Es gibt bessere Lösungen zum Erstellen von APIs wie Node.js, Express, GraphQL usw., da sie sich auf das Backend konzentrieren. Meiner Meinung nach sollten die API-Routen mit einer Client-Seite gekoppelt werden, um eine Full-Stack-App mit Next.js aufzubauen. Die Verwendung der API-Routen zum Erstellen einer einfachen API ist wie die Unternutzung der Leistungsfähigkeit von Next.js, da es sich um ein React-Framework handelt, mit dem Sie im Handumdrehen ein Backend hinzufügen können.

Betrachten Sie den Anwendungsfall, wenn Sie einer vorhandenen Next App eine Authentifizierung hinzufügen müssen. Anstatt den Authentifizierungsteil mit Node.js oder GraphQL von Grund auf neu zu erstellen, können Sie API-Routen verwenden, um Ihrer App Authentifizierung hinzuzufügen, und sie ist weiterhin auf dem Endpunkt https://localhost:3000/api/your-file-name . Die API-Routen erhöhen nicht Ihre clientseitige Bundle-Größe, da es sich nur um serverseitige Bundles handelt.

Auf Next.js-API-Routen kann jedoch nur innerhalb desselben Ursprungs zugegriffen werden, da API-Routen keine Cross-Origin Resource Sharing (CORS)-Header angeben. Sie können das Standardverhalten immer noch optimieren, indem Sie CORS zu Ihrer API hinzufügen – aber es ist eine zusätzliche Einrichtung. Wenn Sie Ihre nächste App statisch mit dem next export generieren, können Sie keine API-Routen in Ihrer App verwenden.

Bisher haben wir gelernt, wann API-Routen im Vergleich zu ähnlichen eine bessere Lösung sein könnten. Machen wir uns jetzt die Hände schmutzig und beginnen mit dem Aufbau unseres GraphQL-Servers.

Einrichten

Um eine neue App mit Next.js zu starten, gehen wir zu Create Next App. Es ist auch möglich, manuell eine neue App mit Webpack einzurichten. Gerne können Sie dies tun. Öffnen Sie jedoch Ihre Befehlszeilenschnittstelle und führen Sie diesen Befehl aus:

 npx create-next-app next-graphql-server

Next.js bietet eine Startvorlage für API-Routen. Sie können es verwenden, indem Sie den folgenden Befehl ausführen:

 npx create-next-app --example api-routes api-routes-app

In diesem Tutorial wollen wir alles von Grund auf neu machen, weshalb wir Create Next App verwenden, um eine neue App zu starten und nicht das Starter-Template. Strukturieren Sie nun das Projekt wie folgt:

 ├── pages | ├── api | | ├── graphql.js | | ├── resolvers | | | └── index.js | | └── schemas | | └── index.js | └── index.js ├── package.json └── yarn.lock

Wie wir bereits gesagt haben, befindet sich im api -Ordner unsere API oder unser Server. Da wir GraphQL verwenden werden, benötigen wir einen Resolver und ein Schema, um einen GraphQL-Server zu erstellen. Der Endpunkt des Servers ist über den Pfad /api/graphql , der der Einstiegspunkt des GraphQL-Servers ist.

Mit diesem Schritt nach vorne können wir jetzt das GraphQL-Schema für unseren Server erstellen.

Erstellen Sie die GraphQL-Schemas

Kurz zusammengefasst: Ein GraphQL-Schema definiert die Form Ihres Datendiagramms.

Als nächstes müssen wir apollo-server-micro installieren, um Apollo Server in Next.js zu verwenden.

 yarn add apollo-server-micro

Für npm

 npm install apollo-server-micro

Lassen Sie uns nun ein neues GraphQL-Schema erstellen.

In api/schemas/index.js

 import { gql } from "apollo-server-micro"; export const typeDefs = gql` type User { id: ID login: String avatar_url: String } type Query { getUsers: [User] getUser(name: String!): User! }`

Hier definieren wir einen User , der die Form eines Github-Benutzers beschreibt. Es erwartet eine id vom Typ ID , ein login und eine avatar_url vom Typ String. Dann verwenden wir den Typ in der getUsers Abfrage, die ein Array von Benutzern zurückgeben muss. Als nächstes verlassen wir uns auf die getUser Abfrage, um einen einzelnen Benutzer abzurufen. Es muss den Namen des Benutzers erhalten, um es abzurufen.

Mit diesem erstellten GraphQL-Schema können wir nun die Resolver-Datei aktualisieren und die Funktionen erstellen, um diese Abfragen oben auszuführen.

Erstellen Sie die GraphQL-Resolver

Ein GraphQL-Resolver ist eine Reihe von Funktionen, mit denen Sie eine Antwort aus einer GraphQL-Abfrage generieren können.

Um Daten von der Github-API anzufordern, müssen wir die axios Bibliothek installieren. Öffnen Sie also Ihre CLI und führen Sie diesen Befehl aus:

 yarn add axios

Oder wenn npm verwenden

 npm install axios

Sobald die Bibliothek installiert ist, fügen wir der Resolvers-Datei nun einen aussagekräftigen Code hinzu.

In api/resolvers/index.js

 import axios from "axios"; export const resolvers = { Query: { getUsers: async () => { try { const users = await axios.get("https://api.github.com/users"); return users.data.map(({ id, login, avatar_url }) => ({ id, login, avatar_url })); } catch (error) { throw error; } }, getUser: async (_, args) => { try { const user = await axios.get( `https://api.github.com/users/${args.name}` ); return { id: user.data.id, login: user.data.login, avatar_url: user.data.avatar_url }; } catch (error) { throw error; } } } };

Wie Sie hier sehen können, gleichen wir den zuvor im GraphQL-Schema definierten Abfragenamen mit den Resolver-Funktionen ab. Die getUsers Funktion ermöglicht es uns, alle Benutzer aus der API abzurufen und dann ein Array von Benutzern zurückzugeben, das den User widerspiegeln muss. Als nächstes verwenden wir die getUser Methode, um einen einzelnen Benutzer mit Hilfe des als Parameter übergebenen Namens abzurufen.

Damit haben wir jetzt ein GraphQL-Schema und einen GraphQL-Resolver – es ist an der Zeit, sie zu kombinieren und den GraphQL-Server aufzubauen.

Erstellen Sie den GraphQL-Server

Ein GraphQL-Server stellt Ihre Daten als GraphQL-API bereit. Es gibt Client-Apps die Möglichkeit, genau die Daten anzufordern, die sie benötigen, und nicht mehr.

In api/graphql.js

 import { ApolloServer } from "apollo-server-micro"; import { typeDefs } from "./schemas"; import { resolvers } from "./resolvers"; const apolloServer = new ApolloServer({ typeDefs, resolvers }); export const config = { api: { bodyParser: false } }; export default apolloServer.createHandler({ path: "/api/graphql" });

Nach dem Importieren ApolloServer verwenden wir es, um eine neue Instanz zu erstellen, und übergeben dann das Schema und den Resolver, um einen GraphQL-Server zu erstellen. Als nächstes müssen wir Next.js anweisen, die eingehende Anfrage nicht zu parsen und GraphQL dies für uns erledigen zu lassen. Schließlich verwenden wir apolloServer , um einen neuen Handler zu erstellen, was bedeutet, dass der Pfad /api/graphql als Einstiegspunkt für unseren GraphQL-Server dient.

Im Gegensatz zum regulären Apollo-Server übernimmt Next.js den Start des Servers für uns, da es auf serverseitiges Rendering angewiesen ist. Deshalb müssen wir hier den GraphQL-Server nicht selbst starten.

Toll! Mit diesem Schritt nach vorne können wir nun testen, ob der GraphQL-Server funktioniert.

Testen Sie den GraphQL-Server

Sobald Sie zum Stammverzeichnis des Projekts navigieren, öffnen Sie es auf der CLI und führen Sie dann diesen Befehl aus:

 yarn dev

Oder für npm

 npm run dev

Besuchen Sie jetzt https://localhost:3000/api/graphql und fügen Sie die GraphQL-Abfrage unten hinzu, um alle Benutzer von Github abzurufen.

 { getUsers { id login avatar_url } }

Lassen Sie uns prüfen, ob wir mit dieser Abfrage einen einzelnen Benutzer abrufen können.

 query($name: String!){ getUser(name:$name){ login id avatar_url } }

Toll! Unser Server funktioniert wie erwartet. Wir sind damit fertig, einen GraphQL-Server mit Next.js-API-Routen zu erstellen.

Fazit

In diesem Tutorial sind wir durch die Next.js-API-Routen gegangen, indem wir zuerst erklärt haben, was sie sind, und dann einen GraphQL-Server mit Next.js erstellt haben. Die Möglichkeit, Next.js-Apps ein Backend hinzuzufügen, ist eine wirklich nette Funktion. Damit können wir unsere Apps um ein echtes Backend erweitern. Sie können sogar noch weiter gehen und eine Datenbank verbinden, um eine vollständige API mithilfe von API-Routen zu erstellen. Next.js macht es definitiv einfacher, eine Full-Stack-App mit den API-Routen zu erstellen.

Sie können das fertige Projekt auf CodeSandbox in der Vorschau anzeigen.

Danke fürs Lesen!

Weitere Ressourcen

Diese nützlichen Ressourcen gehen über den Rahmen dieses Tutorials hinaus.

• Einführung von API-Routen (Next.js 9)
• Next.js-API-Routen
• API-Routen-Middleware