Como criar um servidor GraphQL usando as rotas da API Next.js

O Next.js oferece a melhor experiência de desenvolvedor com todos os recursos necessários para produção. Ele fornece uma solução simples para criar sua API usando as rotas da API Next.js.

Neste guia, aprenderemos primeiro o que são rotas de API e, em seguida, criaremos um servidor GraphQL que recupera os dados da API do Github usando as rotas de API Next.js.

Para tirar o máximo proveito deste tutorial, você precisa de pelo menos uma compreensão básica do GraphQL. O conhecimento do Apollo Server ajudaria, mas não é obrigatório. Este tutorial beneficiaria aqueles que desejam estender suas habilidades de React ou Next.js para o lado do servidor e também poder construir seu primeiro aplicativo full-stack com Next.js e GraphQL.

Então, vamos mergulhar.

O que são as rotas da API Next.js?

Next.js é uma estrutura que permite renderizar aplicativos React no cliente e/ou no servidor. Desde a versão 9, o Next.js agora pode ser usado para criar APIs com Node.js, Express, GrapQL e assim por diante. Next.js usa o sistema de arquivos para tratar arquivos dentro da pasta pages/api como endpoints de API. O que significa que, agora, você poderá acessar seu endpoint de API na URL https://localhost:3000/api/your-file-name .

Se você veio do React e nunca usou o Next.js, isso pode ser confuso porque o Next.js é um framework React. E como já sabemos, o React é usado para construir aplicativos front-end. Então, por que usar Next.js para aplicativos de back-end e APIs?

Bem, o Next.js pode ser usado tanto no lado cliente quanto no servidor porque ele é construído com React, Node.js, Babel e Webpack e, obviamente, deve ser usado no servidor também. O Next.js depende do servidor para habilitar Rotas de API e permite que você use sua linguagem de back-end favorita, mesmo que seja tecnicamente uma estrutura React. Espero que você acerte.

Até agora, aprendemos o que são Rotas de API. No entanto, a verdadeira questão permanece: por que usar Next.js para construir um GraphQL Server ? Por que não usar GraphQL ou Node.js para fazer isso? Então, vamos comparar as rotas da API Next.js com as soluções existentes para criar APIs na próxima seção.

Rotas da API Next.js versus REST e GraphQL

GraphQL e REST são ótimas maneiras de construir APIs. Eles são super populares e usados ​​por quase todos os desenvolvedores hoje em dia. Então, por que usar um framework React para construir APIs? Bem, a resposta rápida é que as Rotas de API Next.js têm uma finalidade diferente porque as Rotas de API permitem estender seu aplicativo Next.js adicionando um back-end a ele.

Existem soluções melhores para criar APIs como Node.js, Express, GraphQL e assim por diante, pois são focadas no back-end. Na minha opinião, as Rotas de API devem ser acopladas a um lado do cliente para criar um aplicativo full-stack com Next.js. Usar as Rotas de API para criar uma API simples é como subutilizar o poder do Next.js porque é uma estrutura React que permite adicionar um back-end a ela rapidamente.

Considere o caso de uso quando você precisar adicionar autenticação a um próximo aplicativo existente. Em vez de criar a parte de autenticação do zero com Node.js ou GraphQL, você pode usar API Routes para adicionar autenticação ao seu aplicativo, e ela ainda estará disponível no endpoint https://localhost:3000/api/your-file-name . As Rotas de API não aumentarão o tamanho do pacote do lado do cliente porque são pacotes apenas do lado do servidor.

No entanto, as Rotas da API Next.js só podem ser acessadas na mesma origem porque as Rotas da API não especificam cabeçalhos CORS (Cross-Origin Resource Sharing). Você ainda pode ajustar o comportamento padrão adicionando CORS à sua API — mas é uma configuração extra. Se você gerar seu próximo aplicativo estaticamente usando next export , não poderá usar rotas de API em seu aplicativo.

Até agora, aprendemos quando as API Routes podem ser uma solução melhor em comparação com outras semelhantes. Agora, vamos colocar a mão na massa e começar a construir nosso GraphQL Server.

Configurando

Para iniciar um novo aplicativo com Next.js, iremos para Create Next App. Também é possível configurar manualmente um novo aplicativo com o Webpack. Você é mais do que bem-vindo para fazê-lo. Dito isto, abra sua interface de linha de comando e execute este comando:

 npx create-next-app next-graphql-server

O Next.js fornece um modelo inicial para rotas de API. Você pode usá-lo executando o seguinte comando:

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

Neste tutorial, queremos fazer tudo do zero, e é por isso que usamos Create Next App para iniciar um novo aplicativo e não o modelo inicial. Agora, estruture o projeto da seguinte forma:

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

Como dissemos anteriormente, a pasta api é onde nossa API ou servidor reside. Como usaremos o GraphQL, precisamos de um resolvedor e de um esquema para criar um servidor GraphQL. O endpoint do servidor estará acessível no caminho /api/graphql , que é o ponto de entrada do servidor GraphQL.

Com este passo adiante, agora podemos criar o esquema GraphQL para nosso servidor.

Criar os esquemas do GraphQL

Como uma recapitulação rápida, um esquema GraphQL define a forma do seu gráfico de dados.

Em seguida, precisamos instalar apollo-server-micro para usar o Apollo Server no Next.js.

 yarn add apollo-server-micro

Para npm

 npm install apollo-server-micro

Agora, vamos criar um novo esquema GraphQL.

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

Aqui, definimos um tipo de User que descreve a forma de um usuário do Github. Ele espera um id do tipo ID , um login e um avatar_url do tipo String. Em seguida, usamos o tipo na consulta getUsers que deve retornar uma matriz de usuários. Em seguida, contamos com a consulta getUser para buscar um único usuário. Ele precisa receber o nome do usuário para recuperá-lo.

Com este GraphQL Schema criado, agora podemos atualizar o arquivo resolvedor e criar as funções para realizar essas consultas acima.

Criar os resolvedores GraphQL

Um resolvedor GraphQL é um conjunto de funções que permite gerar uma resposta de uma consulta GraphQL.

Para solicitar dados da API do Github, precisamos instalar a biblioteca axios . Então, abra sua CLI e execute este comando:

 yarn add axios

Ou ao usar npm

 npm install axios

Depois que a biblioteca estiver instalada, vamos agora adicionar algum código significativo ao arquivo de resolvedores.

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

Como você pode ver aqui, combinamos o nome das consultas definido anteriormente no esquema do GraphQL com as funções do resolvedor. A função getUsers nos permite recuperar todos os usuários da API e, em seguida, retornar uma matriz de usuários que precisa espelhar o tipo de User . Em seguida, usamos o método getUser para buscar um único usuário com a ajuda do nome passado como parâmetro.

Com isso em vigor, agora temos um esquema GraphQL e um resolvedor GraphQL — é hora de combiná-los e construir o servidor GraphQL.

Criar o servidor GraphQL

Um servidor GraphQL expõe seus dados como uma API GraphQL. Ele dá aos aplicativos dos clientes o poder de solicitar exatamente os dados de que precisam e nada mais.

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

Depois de importar o ApolloServer , nós o usamos para criar uma nova instância e, em seguida, passamos o esquema e o resolvedor para criar um servidor GraphQL. Em seguida, precisamos dizer ao Next.js para não analisar a solicitação recebida e deixar o GraphQL lidar com isso para nós. Por fim, usamos o apolloServer para criar um novo manipulador, o que significa que o caminho /api/graphql servirá como ponto de entrada para nosso servidor GraphQL.

Ao contrário do Apollo Server comum, o Next.js lida com o início do servidor para nós, pois depende da renderização do lado do servidor. É por isso que, aqui, não precisamos iniciar o servidor GraphQL por conta própria.

Excelente! Com este passo adiante, agora podemos testar se o servidor GraphQL funciona.

Testar o servidor GraphQL

Depois de navegar até a raiz do projeto, abra-o na CLI e execute este comando:

 yarn dev

Ou para npm

 npm run dev

Agora, visite https://localhost:3000/api/graphql e adicione a consulta GraphQL abaixo para recuperar todos os usuários do Github.

 { getUsers { id login avatar_url } }

Vamos verificar se podemos buscar um único usuário com esta consulta.

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

Excelente! Nosso servidor funciona como esperado. Concluímos a criação de um servidor GraphQL usando as rotas da API Next.js.

Conclusão

Neste tutorial, percorremos as rotas da API Next.js explicando primeiro o que são e, em seguida, criamos um servidor GraphQL com Next.js. A capacidade de adicionar um back-end aos aplicativos Next.js é um recurso muito bom. Ele nos permite estender nossos aplicativos com um backend real. Você pode ir além e conectar um banco de dados para construir uma API completa usando API Routes. O Next.js definitivamente facilita a criação de um aplicativo full-stack com as Rotas de API.

Você pode visualizar o projeto finalizado no CodeSandbox.

Obrigado por ler!

Recursos adicionais

Esses recursos úteis levarão você além do escopo deste tutorial.

• Apresentando as rotas da API (Next.js 9)
• Rotas da API Next.js
• Middleware de rotas de API