Cum se construiește un server GraphQL utilizând rutele API Next.js

Publicat: 2022-03-10

Rezumat rapid ↬ Acest ghid vă va învăța elementele de bază ale rutelor API Next.js. Vom începe prin a explica ce sunt acestea și de ce rutele API sunt utile în comparație cu API-urile REST sau GraphQL. Apoi, vă vom ghida printr-un tutorial pas cu pas despre cum să vă construiți primul server GraphQL cu Next.js și API-ul Github.

Next.js vă oferă cea mai bună experiență de dezvoltator cu toate funcțiile de care aveți nevoie pentru producție. Oferă o soluție simplă pentru a vă construi API-ul folosind rutele API Next.js.

În acest ghid, vom afla mai întâi ce sunt rutele API, apoi vom crea un server GraphQL care preia datele din API-ul Github folosind rutele API Next.js.

Pentru a profita la maximum de acest tutorial, aveți nevoie de cel puțin o înțelegere de bază a GraphQL. Cunoașterea Apollo Server ar ajuta, dar nu este obligatorie. Acest tutorial i-ar beneficia pe cei care doresc să-și extindă abilitățile React sau Next.js pe partea serverului și să poată construi și prima lor aplicație full-stack cu Next.js și GraphQL.

Deci, hai să ne scufundăm.

Ce sunt rutele API Next.js?

Next.js este un cadru care permite redarea aplicațiilor React pe client sau/și pe server. Începând cu versiunea 9, Next.js poate fi folosit acum pentru a construi API-uri cu Node.js, Express, GrapQL și așa mai departe. Next.js folosește sistemul de fișiere pentru a trata fișierele din pages/api ca puncte finale API. Înseamnă că, acum, veți putea accesa punctul final API pe adresa URL https://localhost:3000/api/your-file-name .

Dacă ați venit de la React și nu ați folosit niciodată Next.js, acest lucru ar putea fi confuz, deoarece Next.js este un cadru React. Și după cum știm deja, React este folosit pentru a construi aplicații front-end. Deci, de ce să folosiți Next.js pentru aplicații și API-uri de backend?

Ei bine, Next.js poate fi folosit atât pe partea client, cât și pe server, deoarece este construit cu React, Node.js, Babel și Webpack și, evident, ar trebui să fie utilizabil și pe server. Next.js se bazează pe server pentru a activa rutele API și vă permite să utilizați limbajul dvs. de backend preferat, chiar dacă din punct de vedere tehnic este un framework React. Să sperăm că ai înțeles bine.

Până acum, am aflat ce sunt rutele API. Cu toate acestea, adevărata întrebare rămâne: de ce să folosiți Next.js pentru a construi un server GraphQL ? De ce să nu folosiți GraphQL sau Node.js pentru a face acest lucru? Deci, să comparăm rutele API Next.js cu soluțiile existente pentru construirea de API-uri în secțiunea următoare.

Rutele API Next.js versus REST și GraphQL

GraphQL și REST sunt modalități excelente de a construi API-uri. Sunt foarte populare și folosite de aproape toți dezvoltatorii din ziua de azi. Deci, de ce să folosiți un cadru React pentru a construi API-uri? Ei bine, răspunsul rapid este că rutele API Next.js au un scop diferit, deoarece rutele API vă permit să vă extindeți aplicația Next.js adăugând un backend la aceasta.

Există soluții mai bune pentru construirea de API-uri precum Node.js, Express, GraphQL și așa mai departe, deoarece acestea sunt concentrate pe backend. În opinia mea, rutele API ar trebui să fie cuplate cu o parte client pentru a construi o aplicație full-stack cu Next.js. Utilizarea rutelor API pentru a construi un API simplu este ca și cum ați subutiliza puterea Next.js, deoarece este un cadru React care vă permite să adăugați un backend la acesta în cel mai scurt timp.

Luați în considerare cazul de utilizare când trebuie să adăugați autentificare la o aplicație Next existentă. În loc să construiți partea de autentificare de la zero cu Node.js sau GraphQL, puteți utiliza API Routes pentru a adăuga autentificare la aplicația dvs. și va fi în continuare disponibilă pe punctul final https://localhost:3000/api/your-file-name . Rutele API nu vor crește dimensiunea pachetului dvs. de client, deoarece sunt pachete doar de server.

Cu toate acestea, rutele API Next.js sunt accesibile numai în cadrul aceleiași origini, deoarece rutele API nu specifică antetele CORS (cross-Origin Resource Sharing). Puteți în continuare să modificați comportamentul implicit adăugând CORS la API-ul dvs. - dar este o configurare suplimentară. Dacă generați următoarea aplicație în mod static utilizând next export - nu veți putea folosi rutele API în aplicația dvs.

Până acum, am aflat când rutele API ar putea fi o soluție mai bună în comparație cu altele asemănătoare. Acum, să ne murdărim mâinile și să începem să construim serverul nostru GraphQL.

Mai multe după săritură! Continuați să citiți mai jos ↓

Configurare

Pentru a porni o nouă aplicație cu Next.js, vom alege Crearea următoarei aplicații. De asemenea, este posibil să configurați manual o nouă aplicație cu Webpack. Ești mai mult decât binevenit să faci asta. Acestea fiind spuse, deschideți interfața de linie de comandă și rulați această comandă:

 npx create-next-app next-graphql-server

Next.js oferă un șablon de pornire pentru rutele API. Îl poți folosi executând următoarea comandă:

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

În acest tutorial, dorim să facem totul de la zero, motiv pentru care folosim Create Next App pentru a porni o nouă aplicație și nu șablonul de pornire. Acum, structurați proiectul după cum urmează:

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

După cum am spus mai devreme, folderul api este locul în care locuiește API-ul sau serverul nostru. Deoarece vom folosi GraphQL, avem nevoie de un resolver și de o schemă pentru a crea un server GraphQL. Punctul final al serverului va fi accesibil pe calea /api/graphql , care este punctul de intrare al serverului GraphQL.

Cu acest pas înainte, acum putem crea schema GraphQL pentru serverul nostru.

Creați Schemele GraphQL

Ca o scurtă recapitulare, o schemă GraphQL definește forma graficului dvs. de date.

Apoi, trebuie să instalăm apollo-server-micro pentru a folosi Apollo Server în Next.js.

 yarn add apollo-server-micro

Pentru npm

 npm install apollo-server-micro

Acum, să creăm o nouă schemă GraphQL.

În 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! }`

Aici definim un tip de User care descrie forma unui utilizator Github. Se așteaptă un id de tip ID , un login și un avatar_url de tip String. Apoi, folosim tipul din interogarea getUsers care trebuie să returneze o serie de utilizatori. Apoi, ne bazăm pe interogarea getUser pentru a prelua un singur utilizator. Trebuie să primească numele utilizatorului pentru a-l recupera.

Cu această schemă GraphQL creată, acum putem actualiza fișierul de rezolvare și putem crea funcțiile pentru a efectua aceste interogări de mai sus.

Creați rezolutorii GraphQL

Un rezolutor GraphQL este un set de funcții care vă permite să generați un răspuns dintr-o interogare GraphQL.

Pentru a solicita date de la API-ul Github, trebuie să instalăm biblioteca axios . Deci, deschideți CLI și executați această comandă:

 yarn add axios

Sau când folosești npm

 npm install axios

Odată ce biblioteca este instalată, acum să adăugăm un cod semnificativ în fișierul de rezolvare.

În 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; } } } };

După cum puteți vedea aici, potrivim numele interogărilor definite mai devreme în Schema GraphQL cu funcțiile de rezoluție. Funcția getUsers ne permite să recuperăm toți utilizatorii din API și apoi să returnăm o serie de utilizatori care trebuie să reflecte tipul de User . Apoi, folosim metoda getUser pentru a prelua un singur utilizator cu ajutorul numelui transmis ca parametru.

Cu acest lucru, acum avem o schemă GraphQL și un rezolutor GraphQL - este timpul să le combinăm și să construim serverul GraphQL.

Creați serverul GraphQL

Un server GraphQL vă expune datele ca API GraphQL. Oferă aplicațiilor clienților puterea de a cere exact datele de care au nevoie și nimic mai mult.

În 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" });

După importul ApolloServer , îl folosim pentru a crea o instanță nouă și apoi trecem schema și soluția pentru a crea un server GraphQL. În continuare, trebuie să îi spunem lui Next.js să nu analizeze cererea primită și să lăsăm GraphQL să o gestioneze pentru noi. În cele din urmă, folosim apolloServer pentru a crea un nou handler, ceea ce înseamnă că calea /api/graphql va servi ca punct de intrare pentru serverul nostru GraphQL.

Spre deosebire de Apollo Server obișnuit, Next.js se ocupă de pornirea serverului pentru noi, deoarece se bazează pe randarea pe server. De aceea, aici, nu trebuie să pornim singuri serverul GraphQL.

Grozav! Cu acest pas înainte, putem testa acum dacă serverul GraphQL funcționează.

Testați serverul GraphQL

Odată ce răsfoiți la rădăcina proiectului, deschideți-l pe CLI și apoi executați această comandă:

 yarn dev

Sau pentru npm

 npm run dev

Acum, vizitați https://localhost:3000/api/graphql și adăugați interogarea GraphQL de mai jos pentru a prelua toți utilizatorii din Github.

 { getUsers { id login avatar_url } }

obțineți-toți utilizatorii. (Previzualizare mare)

Să verificăm dacă putem prelua un singur utilizator cu această interogare.

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

obţine-utilizator. (Previzualizare mare)

Grozav! Serverul nostru funcționează conform așteptărilor. Am terminat de construit un server GraphQL folosind rutele API Next.js.

Concluzie

În acest tutorial, am parcurs rutele API Next.js, explicând mai întâi ce sunt acestea și apoi construim un server GraphQL cu Next.js. Capacitatea de a adăuga un backend la aplicațiile Next.js este o caracteristică foarte frumoasă. Ne permite să ne extindem aplicațiile cu un backend real. Puteți chiar să mergeți mai departe și să conectați o bază de date pentru a construi un API complet folosind API Routes. Next.js face cu siguranță mai ușoară construirea unei aplicații full-stack cu API Routes.

Puteți previzualiza proiectul finalizat pe CodeSandbox.

Multumesc pentru lectura!

Resurse suplimentare

Aceste resurse utile vă vor duce dincolo de scopul acestui tutorial.

Prezentarea rutelor API (Next.js 9)
Rute API Next.js
API Routes Middleware