¿Qué es GraphQL? 🤯 Programar un servidor GraphQL con Deno

¿Qué es GraphQL?

GraphQL es un lenguaje de consultas de código abierto desarrollado para simplificar la comunicación entre el cliente y el servidor en aplicaciones web y móviles.

Su nombre, GraphQL es una composición entre Graph (grafo) y Query Language (lenguaje de consulta).

A diferencia de REST (Representational State Transfer), que utiliza varias rutas de URL para solicitar recursos específicos, GraphQL proporciona un único punto de acceso (endpoint) para todas las solicitudes y permite que los clientes soliciten solo los datos que necesitan.

GraphQL se basa en un esquema que define los tipos de datos, las relaciones y las operaciones que se pueden realizar en los datos.

Los clientes envían consultas GraphQL al servidor para obtener los datos solicitados.

El servidor procesa la consulta y devuelve solo los datos solicitados en el formato especificado por el cliente, esto hace que disminuya en gran medida el tráfico de datos por la red.

GraphQL también permite la creación de suscripciones, que son solicitudes persistentes en tiempo real a los cambios de datos.

Esto hace que GraphQL sea una tecnología muy adecuada para aplicaciones web y móviles en tiempo real, así como para entornos con redes de baja latencia o ancho de banda limitado.

Características principales de GraphQL

Las características principales muy resumidas son:

• El cliente especificará exactamente el tipo de datos necesita.
• El cliente solitará qué datos necesita, si GraphQL por detrás tiene que hacer varias consultas a nosotros nos da igual, es totalmente declarativo.
• Datos con tipos predecibles, esto viene implícito con el primer punto.

¿Por qué me gusta más que API REST?

Fundamentalmente porque siempre sé con el formato que me va a devolver los datos, esto no pasa con API REST.

Hay ocasiones en las que hacen revisión de una API que estás consumiendo y puede que lo que antes te enviaban como un objeto ahora te lo envíen como un array.

Con GraphQL puedo preveer el tipo de los datos solicitados porque yo se los especifico en la petición.

Ejemplo de concepto

Supongamos que tienes una aplicación de compras y quieres obtener información sobre un usuario en particular, como su nombre de usuario, su lista de artículos que más compra y los pedidos más recientes que ha hecho.

La consulta GraphQL se vería así:

query {
    user(username: "ejemplo") {
      username
      products {
        productName
      }
      orders(limit: 5) {
        idOrder
        date
      }
    }
  }
      

En esta consulta, estamos solicitando información sobre un usuario con el nombre de usuario "ejemplo".

Dentro del objeto de usuario, estamos solicitando su nombre de usuario y su lista de productos que ha comprado.

También estamos solicitando los cinco pedidos más recientes que ha hecho, cada uno con su número de pedido y fecha.

El servidor procesaría esta consulta y devolvería solo la información solicitada en el formato especificado por la consulta.

Esto significa que, en lugar de devolver todos los datos del usuario y todos sus pedidos, como podría hacerse con una API REST, el servidor solo devolvería la información solicitada, lo que reducirá significativamente el tamaño de la respuesta y mejorará la eficiencia de la aplicación.

Hola mundo con GraphQL y Deno

¿Qué es Apollo Server?

Apollo Server es una plataforma de servidor GraphQL de código abierto que permite a los desarrolladores crear fácilmente un servidor GraphQL seguro y escalable para sus aplicaciones web y móviles.

Apollo Server se integra con varias herramientas y marcos populares de Node.js y otros lenguajes para crear aplicaciones web y móviles.

Programando el servidor GraphQL en Deno

No te voy a enseñar a crear un servidor GraphQL con Apollo Server, en internet es lo más común y puedes encontrar muchos ejemplos.

Voy a ir un pasito más allá 😉

Los pasos que seguiremos para crear nuestro servidor GraphQL con Deno serán:

1. Instalar Deno
2. Iniciar proyecto con Deno
3. Instalar librerías necesarias para el servidor GraphQL
4. Programar el esquema del servidor GraphQL
5. Programar los resolvers a las peticiones
6. Programar el esquema ejecutable de GraphQL con typeDefs y resolvers
7. Creamos un servidor de Apollo GraphQL
8. Definimos la ruta raíz para la aplicación e implementamos un router
9. Iniciamos el servidor en el puerto 4000

Instalar Deno

Puedes hacerlo siguiendo las instrucciones que te dejo en mi artículo de primero pasos con Deno.

Primeros pasos con Deno 🐱‍🐉

Comienza a usar Deno, yo ya no quiero otra cosa 🤓

Iniciar proyecto con Deno

Crea una nueva carpeta para tu proyecto y navega hasta ella en tu terminal.

Crea un archivo server.ts en la carpeta de tu proyecto.

Este archivo será el punto de entrada de tu servidor GraphQL.

🔥 Recuerda activar el complemento de Deno en VSCode, para ello:

1. Pulsas F1 dentro de VS Code
2. Buscas Deno:Inicialize WorkSpace Configuration
3. Y listo!

Importar librerías necesarias para el servidor GraphQL

Instala los módulos necesarios para el proyecto.

En este caso, necesitaremos instalar el módulo graphql y el módulo graphql-tools de npm.

Para hacerlo, ejecuta el siguiente comando:

          
import { Server } from "https://deno.land/std@0.166.0/http/server.ts";
import { GraphQLHTTP } from "https://deno.land/x/gql@1.1.2/mod.ts";
import { makeExecutableSchema } from "https://deno.land/x/graphql_tools@0.0.2/mod.ts";
import { gql } from "https://deno.land/x/graphql_tag@0.0.1/mod.ts";
          

Programar el esquema del servidor GraphQL

Abre el archivo server.ts en tu editor de código y escribe el siguiente código:

const typeDefs = gql`{
  type Query 
    hello: String   
  }     
`;

El tipo Query es un tipo especial y específico de GraphQL para enviarle las querys.

Programar los resolvers a las peticiones

const resolvers = {
  Query: {
    hello: () => "Hola mundo!",
  },
};
        

Programar el esquema ejecutable de GraphQL con typeDefs y resolvers

const schema = makeExecutableSchema({ resolvers, typeDefs });
                

Definimos el servidor y lo iniciamos en el puerto 3000

const server = new Server({
  handler: async (req) => {
    const { pathname } = new URL(req.url);
          
    return pathname === "/graphql"
      ? await GraphQLHTTP<Request>({
        schema,
        graphiql: true,
        })(req)
      : new Response("Not Found", { status: 404 });
      },
  port: 3000,
  });
          
server.listenAndServe();
                

Guardamos y ejecutamos el servidor

deno run --allow-net server.ts

Probamos nuestro servidor GraphQL

Con el código corriendo, navega a http://localhost:3000/graphql y si todo ha ido bien verás una pantalla como la siguiente:

Y te preguntarás... ¡pero esto qué es!...

Esto es de las mejores cosas que tiene GraphQL, el playground de GraphQL 🤯

Con el cursor en la pantalla de la izquierda, si pulsas Ctrl y la barra espaciadora verás las opciones que te da, nosotros hasta ahora sólo hemos programado query, pero puedes ver que también hay mutation, subscription y fragment 👇

Bien, elegimos query, y como GraphQL es un lenguaje de consulta requiere que a continuación se usen braces ({}) y si dentro de los braces pulsas Ctrl más la barra espaciadora te despliega las queries que tiene disponibles, en nuestro caso está disponible la query hello, una maravilla 🎉

Ejecuta la query:

query {
  hello
}
    

Y recibirás la respuesta:

{
  "data": {
    "hello": "Hola mundo!"
  }
}
      

Repositorio

Este punto lo verás como versión 0.1

Te dejo el repositorio aquí 👈

Más queries en nuestro servidor GraphQL con Deno

Vamos añadir un poco de más chicha, vamos a añadir una nueva query que nos devuelva el número de elementos que contiene un array.

Ese array lo vamos a extraer de un fichero json de mis artículos.

🟣 Leyendo JSON de artículos

Voy a añadir al repositorio un fichero articles.json.

Para poder leerlo con Deno 👇

import { readJsonSync } from "https://deno.land/x/jsonfile@1.0.0/mod.ts";
import {ArticleInterface} from "./article.interface.ts"

const articlesRaw = readJsonSync('./articles.json');
const articlesString=JSON.stringify(articlesRaw);
const articles=JSON.parse(articlesString) as ArticleInterface[];
        

🟣 Añadiendo nuevos tipos y el nuevo resolver

Defino una nueva query que llamaré articlesCount y el código con la nueva query quedará:

const typeDefs = gql`
  type Query {
    hello: String
    articlesCount: Int! 👈
  }`;

const resolvers = {
  Query: {
    hello: () => "Hola mundo!",
    articlesCount: () => articles.length 👈
  },
};
      

Si ahora volvemos a ejecutar nuestro código veremos que ahora también está la query articlesCount disponible 🔥

🟣 Repositorio

Este punto lo verás como versión 0.2

Te dejo el repositorio aquí 👈

Este artículo ya ha quedado largo, haré otro profundizando más en GraphQL, que lo merece.

Hasta luego 🖖