Cómo construir un servidor GraphQL usando rutas API Next.js

Next.js le brinda la mejor experiencia de desarrollador con todas las funciones que necesita para la producción. Proporciona una solución sencilla para construir su API utilizando las rutas API de Next.js.

En esta guía, primero aprenderemos qué son las rutas API y luego crearemos un servidor GraphQL que recupere los datos de la API Github usando las rutas API Next.js.

Para aprovechar al máximo este tutorial, necesita al menos una comprensión básica de GraphQL. El conocimiento de Apollo Server ayudaría, pero no es obligatorio. Este tutorial beneficiaría a aquellos que desean ampliar sus habilidades de React o Next.js al lado del servidor y poder crear también su primera aplicación de pila completa con Next.js y GraphQL.

Entonces, vamos a sumergirnos.

¿Qué son las rutas API de Next.js?

Next.js es un marco que permite renderizar aplicaciones React en el cliente y/o el servidor. Desde la versión 9, Next.js ahora se puede usar para crear API con Node.js, Express, GrapQL, etc. Next.js usa el sistema de archivos para tratar los archivos dentro de la carpeta pages/api como puntos finales de la API. Lo que significa que, ahora, podrá acceder a su punto final de API en la URL https://localhost:3000/api/your-file-name .

Si vino de React y nunca usó Next.js, esto podría ser confuso porque Next.js es un marco de React. Y como ya sabemos, React se usa para crear aplicaciones front-end. Entonces, ¿por qué usar Next.js para aplicaciones de back-end y API?

Bueno, Next.js se puede usar tanto en el lado del cliente como en el del servidor porque está construido con React, Node.js, Babel y Webpack y, obviamente, también debería poder usarse en el servidor. Next.js se basa en el servidor para habilitar las rutas API y le permite usar su lenguaje de back-end favorito, incluso si es técnicamente un marco React. Con suerte, lo haces bien.

Hasta ahora, hemos aprendido qué son las Rutas API. Sin embargo, la verdadera pregunta sigue siendo: ¿por qué usar Next.js para construir un servidor GraphQL ? ¿Por qué no usar GraphQL o Node.js para hacerlo? Entonces, comparemos las rutas API de Next.js con las soluciones existentes para crear API en la siguiente sección.

Rutas API de Next.js frente a REST y GraphQL

GraphQL y REST son excelentes formas de crear API. Son súper populares y utilizados por casi todos los desarrolladores en la actualidad. Entonces, ¿por qué usar un marco React para crear API? Bueno, la respuesta rápida es que las rutas API de Next.js tienen un propósito diferente porque las rutas API le permiten ampliar su aplicación Next.js al agregarle un backend.

Existen mejores soluciones para crear API, como Node.js, Express, GraphQL, etc., ya que se centran en el backend. En mi opinión, las rutas API deben combinarse con un lado del cliente para crear una aplicación de pila completa con Next.js. Usar las rutas de la API para crear una API simple es como subutilizar el poder de Next.js porque es un marco de React que le permite agregarle un backend en muy poco tiempo.

Considere el caso de uso cuando necesite agregar autenticación a una próxima aplicación existente. En lugar de crear la parte de autenticación desde cero con Node.js o GraphQL, puede usar API Routes para agregar autenticación a su aplicación, y seguirá estando disponible en el punto final https://localhost:3000/api/your-file-name Las rutas API no aumentarán el tamaño del paquete del lado del cliente porque son paquetes solo del lado del servidor.

Sin embargo, las rutas API de Next.js solo son accesibles dentro del mismo origen porque las rutas API no especifican encabezados de uso compartido de recursos entre orígenes (CORS). Todavía puede modificar el comportamiento predeterminado agregando CORS a su API, pero es una configuración adicional. Si genera su próxima aplicación de forma estática utilizando next export , no podrá usar rutas API dentro de su aplicación.

Hasta ahora, hemos aprendido cuándo API Routes podría ser una mejor solución en comparación con otras similares. Ahora, ensuciémonos las manos y comencemos a construir nuestro servidor GraphQL.

Configuración

Para iniciar una nueva aplicación con Next.js, iremos a Create Next App. También es posible configurar manualmente una nueva aplicación con Webpack. Usted es más que bienvenido a hacerlo. Dicho esto, abra su interfaz de línea de comandos y ejecute este comando:

 npx create-next-app next-graphql-server

Next.js proporciona una plantilla de inicio para API Routes. Puedes usarlo ejecutando el siguiente comando:

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

En este tutorial, queremos hacer todo desde cero, por lo que usamos Create Next App para iniciar una nueva aplicación y no la plantilla de inicio. Ahora, estructura el proyecto de la siguiente manera:

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

Como dijimos anteriormente, la carpeta api es donde vive nuestra API o servidor. Dado que usaremos GraphQL, necesitamos un sistema de resolución y un esquema para crear un servidor GraphQL. Se podrá acceder al punto final del servidor en la ruta /api/graphql , que es el punto de entrada del servidor GraphQL.

Con este paso adelante, ahora podemos crear el esquema GraphQL para nuestro servidor.

Crear los esquemas de GraphQL

Como resumen rápido, un esquema de GraphQL define la forma de su gráfico de datos.

Luego, necesitamos instalar apollo-server-micro para usar Apollo Server dentro de Next.js.

 yarn add apollo-server-micro

para npm

 npm install apollo-server-micro

Ahora, creemos un nuevo esquema de GraphQL.

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

Aquí, definimos un tipo User que describe la forma de un usuario de Github. Espera una id de tipo ID , un inicio de login y una avatar_url de tipo String. Luego, usamos el tipo en la consulta getUsers que tiene que devolver una matriz de usuarios. A continuación, confiamos en la consulta getUser para obtener un solo usuario. Necesita recibir el nombre del usuario para recuperarlo.

Con este esquema GraphQL creado, ahora podemos actualizar el archivo de resolución y crear las funciones para realizar estas consultas anteriores.

Crear los solucionadores de GraphQL

Un solucionador de GraphQL es un conjunto de funciones que le permite generar una respuesta a partir de una consulta de GraphQL.

Para solicitar datos de la API de Github, necesitamos instalar la biblioteca axios . Entonces, abra su CLI y ejecute este comando:

 yarn add axios

O cuando se usa npm

 npm install axios

Una vez que la biblioteca esté instalada, agreguemos un código significativo al archivo de resolución.

En 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 puede ver aquí, hacemos coincidir el nombre de las consultas definidas anteriormente en el esquema de GraphQL con las funciones de resolución. La función getUsers nos permite recuperar todos los usuarios de la API y luego devolver una matriz de usuarios que debe reflejar el tipo User . A continuación, usamos el método getUser para obtener un solo usuario con la ayuda del nombre pasado como parámetro.

Con esto en su lugar, ahora tenemos un esquema GraphQL y un solucionador GraphQL: es hora de combinarlos y construir el servidor GraphQL.

Crear el servidor GraphQL

Un servidor GraphQL expone sus datos como una API GraphQL. Da a las aplicaciones de los clientes el poder de solicitar exactamente los datos que necesitan y nada más.

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

Después de importar ApolloServer , lo usamos para crear una nueva instancia y luego pasamos el esquema y la resolución para crear un servidor GraphQL. A continuación, debemos decirle a Next.js que no analice la solicitud entrante y deje que GraphQL la maneje por nosotros. Finalmente, usamos apolloServer para crear un nuevo controlador, lo que significa que la ruta /api/graphql servirá como punto de entrada para nuestro servidor GraphQL.

A diferencia del servidor Apollo normal, Next.js maneja el inicio del servidor por nosotros, ya que se basa en la representación del lado del servidor. Es por eso que, aquí, no tenemos que iniciar el servidor GraphQL por nuestra cuenta.

¡Genial! Con este paso adelante, ahora podemos probar si el servidor GraphQL funciona.

Probar el servidor GraphQL

Una vez que navegue hasta la raíz del proyecto, ábralo en la CLI y luego ejecute este comando:

 yarn dev

O para npm

 npm run dev

Ahora, visite https://localhost:3000/api/graphql y agregue la consulta GraphQL a continuación para recuperar todos los usuarios de Github.

 { getUsers { id login avatar_url } }

Verifiquemos si podemos obtener un solo usuario con esta consulta.

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

¡Genial! Nuestro servidor funciona como se esperaba. Terminamos de construir un servidor GraphQL usando las rutas API de Next.js.

Conclusión

En este tutorial, analizamos las rutas API de Next.js explicando primero qué son y luego construimos un servidor GraphQL con Next.js. La capacidad de agregar un backend a las aplicaciones de Next.js es una característica muy buena. Nos permite ampliar nuestras aplicaciones con un backend real. Incluso puede ir más allá y conectar una base de datos para crear una API completa utilizando API Routes. Next.js definitivamente facilita la creación de una aplicación completa con API Routes.

Puede obtener una vista previa del proyecto terminado en CodeSandbox.

¡Gracias por leer!

Más recursos

Estos útiles recursos lo llevarán más allá del alcance de este tutorial.

• Introducción a las rutas API (Next.js 9)
• Rutas de API de Next.js
• Middleware de rutas API