Jak zbudować serwer GraphQL przy użyciu tras API Next.js?

Opublikowany: 2022-03-10

Krótkie podsumowanie ↬ Ten przewodnik nauczy Cię podstaw tras API Next.js. Zaczniemy od wyjaśnienia, czym one są i dlaczego trasy API są przydatne w porównaniu z API REST lub GraphQL. Następnie przeprowadzimy Cię krok po kroku przez samouczek, jak zbudować swój pierwszy serwer GraphQL z Next.js i interfejsem API Github.

Next.js zapewnia najlepsze wrażenia programistyczne ze wszystkimi funkcjami potrzebnymi do produkcji. Zapewnia proste rozwiązanie do budowania interfejsu API przy użyciu tras API Next.js.

W tym przewodniku najpierw nauczymy się, czym są trasy API, a następnie utworzymy serwer GraphQL, który pobiera dane z API Github przy użyciu tras API Next.js.

Aby w pełni wykorzystać ten samouczek, potrzebujesz przynajmniej podstawowej wiedzy na temat GraphQL. Znajomość Apollo Server pomogłaby, ale nie jest obowiązkowa. Ten samouczek przyda się tym, którzy chcą rozszerzyć swoje umiejętności React lub Next.js po stronie serwera i być w stanie zbudować swoją pierwszą aplikację z pełnym stosem za pomocą Next.js i GraphQL.

Więc zanurkujmy.

Co to są trasy API Next.js?

Next.js to framework, który umożliwia renderowanie aplikacji React na kliencie lub/i serwerze. Od wersji 9 Next.js może być teraz używany do budowania interfejsów API z Node.js, Express, GrapQL i tak dalej. Next.js używa systemu plików do traktowania plików w folderze pages/api jako punktów końcowych API. Oznacza to, że teraz będziesz mógł uzyskać dostęp do punktu końcowego interfejsu API pod adresem URL https://localhost:3000/api/your-file-name .

Jeśli pochodzisz z Reacta i nigdy nie używałeś Next.js, może to być mylące, ponieważ Next.js jest frameworkiem React. A jak już wiemy, React służy do budowania aplikacji front-endowych. Dlaczego więc używać Next.js dla aplikacji backendowych i interfejsów API?

Cóż, Next.js może być używany zarówno po stronie klienta, jak i serwera, ponieważ jest zbudowany z React, Node.js, Babel i Webpack, i oczywiście powinien być używany również na serwerze. Next.js opiera się na serwerze, aby włączyć Trasy API i pozwala używać Twojego ulubionego języka zaplecza, nawet jeśli jest to technicznie framework React. Mam nadzieję, że masz rację.

Do tej pory dowiedzieliśmy się, czym są trasy API. Pozostaje jednak prawdziwe pytanie: po co używać Next.js do budowy serwera GraphQL ? Dlaczego nie użyć do tego GraphQL lub Node.js? Porównajmy więc trasy API Next.js z istniejącymi rozwiązaniami do tworzenia interfejsów API w następnej sekcji.

Trasy API Next.js a REST i GraphQL

GraphQL i REST to świetne sposoby budowania API. Są bardzo popularne i używane przez prawie każdego programistę w dzisiejszych czasach. Po co więc używać frameworka React do tworzenia interfejsów API? Cóż, szybką odpowiedzią jest to, że trasy API Next.js mają inny cel, ponieważ trasy API umożliwiają rozszerzenie aplikacji Next.js poprzez dodanie do niej zaplecza.

Istnieją lepsze rozwiązania do tworzenia interfejsów API, takich jak Node.js, Express, GraphQL itd., ponieważ koncentrują się one na zapleczu. Moim zdaniem trasy API powinny być połączone z klientem, aby zbudować pełną aplikację z Next.js. Korzystanie z API Routes do zbudowania prostego API jest jak niepełne wykorzystanie możliwości Next.js, ponieważ jest to framework React, który umożliwia dodanie do niego backendu w mgnieniu oka.

Rozważ przypadek użycia, gdy musisz dodać uwierzytelnianie do istniejącej aplikacji Next. Zamiast budować część auth od podstaw za pomocą Node.js lub GraphQL, możesz użyć API Routes, aby dodać uwierzytelnianie do swojej aplikacji i nadal będzie ono dostępne na punkcie końcowym https://localhost:3000/api/your-file-name . Trasy interfejsu API nie zwiększą rozmiaru pakietu po stronie klienta, ponieważ są to pakiety tylko po stronie serwera.

Jednak trasy API Next.js są dostępne tylko w ramach tego samego pochodzenia, ponieważ trasy API nie określają nagłówków udostępniania zasobów między źródłami (CORS). Nadal możesz dostosować domyślne zachowanie, dodając CORS do swojego interfejsu API — ale jest to dodatkowa konfiguracja. Jeśli wygenerujesz następną aplikację statycznie przy użyciu next export — nie będziesz mógł korzystać z tras API w swojej aplikacji.

Do tej pory dowiedzieliśmy się, kiedy API Routes może być lepszym rozwiązaniem w porównaniu do podobnych. Teraz ubrudźmy sobie ręce i zacznijmy budować nasz serwer GraphQL.

Więcej po skoku! Kontynuuj czytanie poniżej ↓

Konfiguracja

Aby uruchomić nową aplikację z Next.js, wybierzemy Utwórz następną aplikację. Możliwe jest również ręczne skonfigurowanie nowej aplikacji za pomocą Webpack. Serdecznie zapraszamy. Biorąc to pod uwagę, otwórz interfejs wiersza poleceń i uruchom to polecenie:

 npx create-next-app next-graphql-server

Next.js udostępnia szablon startowy dla tras API. Możesz go użyć, wykonując następujące polecenie:

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

W tym samouczku chcemy zrobić wszystko od zera, dlatego używamy Utwórz następną aplikację, aby uruchomić nową aplikację, a nie szablon startowy. Teraz zorganizuj projekt w następujący sposób:

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

Jak powiedzieliśmy wcześniej, folder api to miejsce, w którym znajduje się nasze API lub serwer. Ponieważ będziemy używać GraphQL, potrzebujemy przelicznika i schematu do stworzenia serwera GraphQL. Punkt końcowy serwera będzie dostępny na ścieżce /api/graphql , która jest punktem wejścia serwera GraphQL.

Dzięki temu krokowi możemy teraz stworzyć schemat GraphQL dla naszego serwera.

Utwórz schematy GraphQL

Krótko mówiąc, schemat GraphQL definiuje kształt wykresu danych.

Następnie musimy zainstalować apollo-server-micro aby korzystać z serwera Apollo w Next.js.

 yarn add apollo-server-micro

Dla npm

 npm install apollo-server-micro

Teraz stwórzmy nowy schemat GraphQL.

W 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! }`

Tutaj definiujemy typ User , który opisuje kształt użytkownika Github. Oczekuje id typu ID , login i avatar_url typu String. Następnie używamy typu w zapytaniu getUsers , które ma zwrócić tablicę użytkowników. Następnie polegamy na zapytaniu getUser , aby pobrać pojedynczego użytkownika. Aby go pobrać, musi otrzymać nazwę użytkownika.

Po utworzeniu tego schematu GraphQL możemy teraz zaktualizować plik resolvera i utworzyć funkcje do wykonywania powyższych zapytań.

Utwórz rozwiązania GraphQL

Przelicznik GraphQL to zestaw funkcji, które umożliwiają generowanie odpowiedzi z zapytania GraphQL.

Aby zażądać danych z Github API, musimy zainstalować bibliotekę axios . Więc otwórz swój CLI i wykonaj to polecenie:

 yarn add axios

Lub podczas korzystania z npm

 npm install axios

Po zainstalowaniu biblioteki dodajmy teraz sensowny kod do pliku przeliczników.

W 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; } } } };

Jak widać tutaj, dopasowujemy nazwy zapytań zdefiniowane wcześniej w schemacie GraphQL do funkcji przelicznika. Funkcja getUsers umożliwia nam pobranie wszystkich użytkowników z API, a następnie zwrócenie tablicy użytkowników, która musi odzwierciedlać typ User . Następnie używamy metody getUser do pobrania pojedynczego użytkownika za pomocą nazwy przekazanej jako parametr.

Dzięki temu mamy teraz schemat GraphQL i przelicznik GraphQL — nadszedł czas, aby je połączyć i zbudować serwer GraphQL.

Utwórz serwer GraphQL

Serwer GraphQL udostępnia Twoje dane jako GraphQL API. Daje aplikacjom klientów możliwość żądania dokładnie tych danych, których potrzebują, i nic więcej.

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

Po zaimportowaniu ApolloServer , używamy go do stworzenia nowej instancji, a następnie przekazujemy schemat i resolver, aby utworzyć serwer GraphQL. Następnie musimy powiedzieć Next.js, aby nie analizował przychodzącego żądania i pozwolił GraphQL zająć się nim za nas. Na koniec używamy apolloServer do stworzenia nowego handlera, co oznacza, że ścieżka /api/graphql będzie służyć jako punkt wejścia dla naszego serwera GraphQL.

W przeciwieństwie do zwykłego serwera Apollo, Next.js obsługuje za nas uruchomienie serwera, ponieważ opiera się na renderowaniu po stronie serwera. Dlatego tutaj nie musimy samodzielnie uruchamiać serwera GraphQL.

Świetnie! Wykonując ten krok naprzód, możemy teraz przetestować, czy serwer GraphQL działa.

Przetestuj serwer GraphQL

Po przejściu do katalogu głównego projektu otwórz go w CLI, a następnie wykonaj to polecenie:

 yarn dev

Lub dla npm

 npm run dev

Teraz odwiedź https://localhost:3000/api/graphql i dodaj poniżej zapytanie GraphQL, aby pobrać wszystkich użytkowników z Github.

 { getUsers { id login avatar_url } }

zdobądź wszystkich użytkowników. (duży podgląd)

Sprawdźmy, czy za pomocą tego zapytania możemy pobrać pojedynczego użytkownika.

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

Świetnie! Nasz serwer działa zgodnie z oczekiwaniami. Skończyliśmy budować serwer GraphQL przy użyciu tras API Next.js.

Wniosek

W tym samouczku omówiliśmy trasy API Next.js, najpierw wyjaśniając, czym one są, a następnie budując serwer GraphQL za pomocą Next.js. Możliwość dodania backendu do aplikacji Next.js to naprawdę fajna funkcja. Pozwala nam to rozszerzyć nasze aplikacje o prawdziwy backend. Możesz nawet pójść dalej i podłączyć bazę danych, aby zbudować kompletne API za pomocą API Routes. Next.js zdecydowanie ułatwia budowanie aplikacji z pełnym stosem za pomocą API Routes.

Gotowy projekt możesz podejrzeć na CodeSandbox.

Dziękuje za przeczytanie!

Dalsze zasoby

Te przydatne zasoby wyprowadzą Cię poza zakres tego samouczka.

Przedstawiamy trasy API (Next.js 9)
Trasy API Next.js
Oprogramowanie pośredniczące dla tras API