Как создать сервер GraphQL с использованием маршрутов API Next.js

Опубликовано: 2022-03-10

Краткое резюме ↬ Это руководство научит вас основам маршрутов API Next.js. Мы начнем с объяснения того, что они из себя представляют и почему маршруты API полезны по сравнению с API REST или GraphQL. Затем мы проведем вас через пошаговое руководство по созданию вашего самого первого сервера GraphQL с помощью Next.js и Github API.

Next.js дает вам лучший опыт разработки со всеми функциями, необходимыми для производства. Он предоставляет простое решение для создания вашего API с использованием маршрутов API Next.js.

В этом руководстве мы сначала узнаем, что такое маршруты API, а затем создадим сервер GraphQL, который извлекает данные из API Github с использованием маршрутов API Next.js.

Чтобы получить максимальную отдачу от этого руководства, вам необходимо хотя бы базовое понимание GraphQL. Знание Apollo Server может помочь, но не является обязательным. Это руководство будет полезно тем, кто хочет расширить свои навыки работы с React или Next.js на стороне сервера, а также сможет создать свое первое полнофункциональное приложение с Next.js и GraphQL.

Итак, давайте погрузимся.

Что такое маршруты API Next.js?

Next.js — это фреймворк, который позволяет отображать приложения React на клиенте и/или сервере. Начиная с версии 9, Next.js теперь можно использовать для создания API с Node.js, Express, GrapQL и т. д. Next.js использует файловую систему для обработки файлов внутри папки pages/api как конечных точек API. Это означает, что теперь вы сможете получить доступ к конечной точке API по URL-адресу https://localhost:3000/api/your-file-name .

Если вы пришли из React и никогда не использовали Next.js, это может сбивать с толку, потому что Next.js — это фреймворк React. И, как мы уже знаем, React используется для создания интерфейсных приложений. Так зачем использовать Next.js для серверных приложений и API?

Что ж, Next.js можно использовать как на стороне клиента, так и на стороне сервера, потому что он создан с помощью React, Node.js, Babel и Webpack, и, очевидно, его можно использовать и на сервере. Next.js полагается на сервер для включения маршрутов API и позволяет вам использовать ваш любимый внутренний язык, даже если технически это фреймворк React. Надеюсь, вы поняли правильно.

Итак, мы узнали, что такое маршруты API. Однако остается реальный вопрос: зачем использовать Next.js для создания сервера GraphQL ? Почему бы не использовать для этого GraphQL или Node.js? Итак, давайте сравним маршруты API Next.js с существующими решениями для создания API в следующем разделе.

Маршруты API Next.js по сравнению с REST и GraphQL

GraphQL и REST — отличные способы создания API. Они очень популярны и используются почти каждым разработчиком в наши дни. Итак, зачем использовать фреймворк React для создания API? Ну, быстрый ответ заключается в том, что маршруты API Next.js предназначены для другой цели, потому что маршруты API позволяют вам расширить ваше приложение Next.js, добавив к нему серверную часть.

Существуют лучшие решения для создания API, такие как Node.js, Express, GraphQL и т. д., поскольку они ориентированы на серверную часть. На мой взгляд, API-маршруты должны быть связаны с клиентской частью для создания полнофункционального приложения с Next.js. Использование API-маршрутов для создания простого API похоже на недостаточное использование возможностей Next.js, потому что это среда React, которая позволяет вам мгновенно добавлять к ней серверную часть.

Рассмотрим вариант использования, когда вам нужно добавить аутентификацию в существующее приложение Next. Вместо того, чтобы создавать часть аутентификации с нуля с помощью Node.js или GraphQL, вы можете использовать маршруты API для добавления аутентификации в свое приложение, и она по-прежнему будет доступна на конечной точке https://localhost:3000/api/your-file-name . Маршруты API не увеличат размер пакета на стороне клиента, поскольку они являются пакетами только на стороне сервера.

Однако маршруты API Next.js доступны только в пределах одного и того же источника, поскольку маршруты API не указывают заголовки совместного использования ресурсов между источниками (CORS). Вы по-прежнему можете настроить поведение по умолчанию, добавив CORS в свой API, но это дополнительная настройка. Если вы создаете свое следующее приложение статически, используя next export , вы не сможете использовать маршруты API в своем приложении.

На данный момент мы узнали, когда API-маршруты могут быть лучшим решением по сравнению с подобными. Теперь давайте запачкаем руки и начнем создавать наш сервер GraphQL.

Еще после прыжка! Продолжить чтение ниже ↓

Настройка

Чтобы запустить новое приложение с помощью Next.js, мы выберем Create Next App. Также можно вручную настроить новое приложение с помощью Webpack. Вы можете это сделать. При этом откройте интерфейс командной строки и выполните следующую команду:

 npx create-next-app next-graphql-server

Next.js предоставляет начальный шаблон для маршрутов API. Вы можете использовать его, выполнив следующую команду:

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

В этом руководстве мы хотим сделать все с нуля, поэтому мы используем «Создать следующее приложение», чтобы запустить новое приложение, а не начальный шаблон. Теперь структурируйте проект следующим образом:

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

Как мы уже говорили ранее, в папке api находится наш API или сервер. Поскольку мы будем использовать GraphQL, нам нужен преобразователь и схема для создания сервера GraphQL. Конечная точка сервера будет доступна по пути /api/graphql , который является точкой входа сервера GraphQL.

Сделав этот шаг вперед, мы теперь можем создать схему GraphQL для нашего сервера.

Создайте схемы GraphQL

Вкратце: схема GraphQL определяет форму вашего графика данных.

Затем нам нужно установить apollo-server-micro , чтобы использовать сервер Apollo в Next.js.

 yarn add apollo-server-micro

Для npm

 npm install apollo-server-micro

Теперь давайте создадим новую схему GraphQL.

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

Здесь мы определяем тип User , который описывает форму пользователя Github. Он ожидает id типа ID , login и avatar_url типа String. Затем мы используем тип запроса getUsers , который должен возвращать массив пользователей. Затем мы полагаемся на запрос getUser для получения одного пользователя. Он должен получить имя пользователя, чтобы получить его.

Создав эту схему GraphQL, мы теперь можем обновить файл преобразователя и создать функции для выполнения этих запросов выше.

Создайте резолверы GraphQL

Преобразователь GraphQL — это набор функций, который позволяет генерировать ответ на запрос GraphQL.

Чтобы запросить данные из Github API, нам нужно установить библиотеку axios . Итак, откройте CLI и выполните эту команду:

 yarn add axios

Или при использовании npm

 npm install axios

После установки библиотеки давайте теперь добавим в файл распознавателей какой-нибудь значимый код.

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

Как вы можете видеть здесь, мы сопоставляем имя запросов, определенное ранее на схеме GraphQL, с функциями преобразователя. Функция getUsers позволяет нам получить всех пользователей из API, а затем вернуть массив пользователей, который должен отражать тип User . Затем мы используем метод getUser для получения одного пользователя с помощью имени, переданного в качестве параметра.

Теперь у нас есть схема GraphQL и преобразователь GraphQL — пришло время объединить их и создать сервер GraphQL.

Создайте сервер GraphQL

Сервер GraphQL предоставляет ваши данные как GraphQL API. Это дает клиентским приложениям возможность запрашивать именно те данные, которые им нужны, и ничего более.

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

После импорта ApolloServer мы используем его для создания нового экземпляра, а затем передаем схему и преобразователь для создания сервера GraphQL. Затем нам нужно указать Next.js не анализировать входящий запрос и позволить GraphQL обработать его за нас. Наконец, мы используем apolloServer для создания нового обработчика, что означает, что путь /api/graphql будет служить точкой входа для нашего сервера GraphQL.

В отличие от обычного сервера Apollo, Next.js обрабатывает запуск сервера за нас, поскольку он полагается на рендеринг на стороне сервера. Вот почему здесь нам не нужно запускать сервер GraphQL самостоятельно.

Здорово! Сделав этот шаг вперед, мы теперь можем проверить, работает ли сервер GraphQL.

Протестируйте сервер GraphQL

Как только вы перейдете к корню проекта, откройте его в CLI, а затем выполните эту команду:

 yarn dev

Или для npm

 npm run dev

Теперь посетите https://localhost:3000/api/graphql и добавьте приведенный ниже запрос GraphQL, чтобы получить всех пользователей из Github.

 { getUsers { id login avatar_url } }

Давайте проверим, можем ли мы получить одного пользователя с помощью этого запроса.

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

Здорово! Наш сервер работает как положено. Мы закончили создание сервера GraphQL с использованием маршрутов API Next.js.

Заключение

В этом руководстве мы рассмотрели маршруты API Next.js, сначала объяснив, что они из себя представляют, а затем создав сервер GraphQL с помощью Next.js. Возможность добавить бэкэнд в приложения Next.js — действительно приятная функция. Это позволяет нам расширять наши приложения с помощью реального бэкэнда. Вы даже можете пойти дальше и подключить базу данных для создания полноценного API с помощью API-маршрутов. Next.js определенно упрощает создание полнофункционального приложения с помощью API-маршрутов.

Вы можете предварительно просмотреть готовый проект в CodeSandbox.

Спасибо за прочтение!

Дополнительные ресурсы

Эти полезные ресурсы выведут вас за рамки данного руководства.

Знакомство с маршрутами API (Next.js 9)
Маршруты API Next.js
ПО промежуточного слоя для маршрутов API