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

1. ¿Qué son las rutas API de Next.js?
2. Rutas API de Next.js frente a REST y GraphQL
3. Configuración
4. Crear los esquemas GraphQL
5. Cree los solucionadores GraphQL
6. Crear el servidor GraphQL
7. Pruebe el servidor GraphQL
8. Conclusión
   1. Recursos adicionales

Esta guía le enseñará los conceptos básicos de las rutas API de Next.js. Comenzaremos explicando qué son y por qué las rutas API son útiles en comparación con las API REST o GraphQL. Luego, lo guiaremos a través de un tutorial paso a paso sobre cómo construir su primer servidor GraphQL con Next.js y la API de Github.

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 crear su API utilizando 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 de Github utilizando las rutas API de Next.js.

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

Entonces, profundicemos.

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

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

Si vienes de React y nunca usaste Next.js, esto puede resultar confuso porque Next.js es un marco de React. Y como ya sabemos, React se utiliza para crear aplicaciones front-end. Entonces, ¿por qué utilizar Next.js para aplicaciones backend 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 depende del servidor para habilitar rutas API y le permite usar su lenguaje de backend favorito incluso si técnicamente es 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é utilizar Next.js para crear un servidor GraphQL ? ¿Por qué no utilizar 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 muy populares y utilizados por casi todos los desarrolladores hoy en día. Entonces, ¿por qué utilizar 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 agregándole 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 deberían combinarse con un lado del cliente para crear una aplicación completa con Next.js. Usar las rutas 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 poco tiempo.

Considere el caso de uso en el que necesita agregar autenticación a una aplicación Next existente. En lugar de crear la parte de autenticación desde cero con Node.js o GraphQL, puede usar rutas API 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 únicamente del lado del servidor.

Sin embargo, solo se puede acceder a las rutas API de Next.js dentro del mismo origen porque las rutas API no especifican encabezados de intercambio de recursos entre orígenes (CORS) . Aún puedes modificar el comportamiento predeterminado agregando CORS a tu API, pero es una configuración adicional. Si genera su próxima aplicación de forma estática next export, no podrá utilizar rutas API dentro de su aplicación.

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

Configuración

Para iniciar una nueva aplicación con Next.js, elegiremos Crear la siguiente aplicación. También es posible configurar manualmente una nueva aplicación con Webpack. Eres 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 inicial para rutas API. 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 eso usamos Crear siguiente aplicación para iniciar una nueva aplicación y no la plantilla inicial. Ahora, estructure el proyecto de la siguiente manera: Viajes y turismo

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

Como dijimos anteriormente, la apicarpeta es donde reside nuestra API o servidor. Como usaremos GraphQL, necesitamos un solucionador 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 GraphQL

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

A continuación, debemos realizar la instalación apollo-server-micropara utilizar Apollo Server dentro de Next.js.

yarn add apollo-server-micro

Paranpm

npm install apollo-server-micro

Ahora, creemos un nuevo esquema GraphQL.

Enapi/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 Usertipo que describe la forma de un usuario de Github. Espera un idtipo ID, un loginy un avatar_urltipo Cadena. Luego, usamos el tipo en la getUsersconsulta que debe devolver una serie de usuarios. A continuación, confiamos en la getUserconsulta para buscar un único usuario. Necesita recibir el nombre del usuario para poder recuperarlo.

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

Cree los solucionadores GraphQL

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

Para solicitar datos de la API de Github, necesitamos instalar la axiosbiblioteca. Entonces, abre tu CLI y ejecuta este comando:

yarn add axios

O al usarnpm

npm install axios

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

Enapi/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 definido anteriormente en el esquema GraphQL con las funciones de resolución. La getUsersfunción nos permite recuperar todos los usuarios de la API y luego devolver una matriz de usuarios que necesita reflejar el Usertipo. A continuación, utilizamos el getUsermétodo para buscar un único usuario con la ayuda del nombre pasado como parámetro.

Una vez implementado esto, 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. Ofrece a las aplicaciones de los clientes el poder de solicitar exactamente los datos que necesitan y nada más.

Enapi/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 el solucionador para crear un servidor GraphQL. A continuación, debemos decirle a Next.js que no analice la solicitud entrante y dejar que GraphQL la maneje por nosotros. Finalmente, usamos apolloServerpara crear un nuevo controlador, lo que significa que la ruta /api/graphqlservirá 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.

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

Pruebe 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 pornpm

npm run dev

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

{ getUsers { id login avatar_url }}

Comprobemos si podemos buscar un solo usuario con esta consulta.

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

¡Excelente! Nuestro servidor funciona como se esperaba. Hemos terminado de construir un servidor GraphQL utilizando las rutas API de Next.js.

Conclusión

En este tutorial, recorrimos las rutas API de Next.js explicando primero qué son y luego construyendo un servidor GraphQL con Next.js. La capacidad de agregar un backend a las aplicaciones Next.js es una característica realmente interesante. 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 rutas API. Next.js definitivamente facilita la creación de una aplicación completa con rutas API.

Puede obtener una vista previa del proyecto terminado en CodeSandbox .

¡Gracias por leer!

Recursos adicionales

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

• Presentación de rutas API (Next.js 9)
• Rutas API de Next.js
• Middleware de rutas API

(ks, ra, yk, il)Explora más en

• API
• Reaccionar
• javascript
• GrafoQL
• Siguiente.js

Tal vez te puede interesar:

1. ¿Deberían abrirse los enlaces en ventanas nuevas?
2. 24 excelentes tutoriales de AJAX
3. 70 técnicas nuevas y útiles de AJAX y JavaScript
4. Más de 45 excelentes recursos y repositorios de fragmentos de código

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

¿Qué son las rutas API de Next.js?Rutas API de Next.js frente a REST y GraphQLConfiguraciónCrear los esquemas GraphQLCree los solucionadores GraphQLCrear el

programar

es

https://aprendeprogramando.es/static/images/programar-como-construir-un-servidor-graphql-usando-rutas-api-de-next-1070-0.jpg

2024-09-23

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente