¿Cómo crear un backend con GraphQL?

En el artículo de introducción a GraphQL te expliqué los conceptos fundamentales sobre esta tecnología y hoy te enseñaré a crear un backend con Nodejs. Para este fin usaremos:

• Apollo Server
• Paquete graphql (implementación de la referencia de GraphQL para Nodejs)

Para empezar nuestro proyecto tenemos que instalar Apollo Server y graphql:

npm i apollo-server graphql

Definiendo nuestro esquema de GraphQL

Creamos el archivo typeDefs.js y definimos nuestro esquema, (queries, mutaciones y tipo)

const { gql } = require('apollo-server');

const typeDefs = gql`
  type Task {
    id: Int!
    name: String!
    description: String!
    completed: Boolean!
  }

  type Query {
    tasks: [Task]!
    task(id: Int!): Task
  }

  type Mutation {
    addTask(
      name: String!,
      description: String!,
      completed: Boolean!
    ): Task!
  }
`;

module.exports = typeDefs;

Usamos gql para definir un esquema de GraphQL, en este hay tres componentes principales:

• Task. Dentro del cual definimos los campos id, name, description y completed.
• Las queries que soportará nuestro servicio. Son tasks y task, estas consiguen una lista de tareas y una tarea en específico dado su id.
• Mutaciones:addTask que recibirá los argumentos name, description y completed y a su vez retornará una tarea.

Al final exportamos la definición de nuestro esquema.

Definiendo nuestros resolvers

Los resolvers son las funciones que satisfacen las queries y mutaciones. Es en los resolvers donde estaremos implementando la lógica para conseguir y agregar las tareas. Para hacerlo crearemos un archivo llamado resolvers.js:

const tasks = [];

module.exports = {
  Query: {
    tasks: (parent, args, context) => tasks,
    task: (parent, args, context) => {
      const task = tasks.find((task) => task.id === args.id);
      return task;
    },
  },
  Mutation: {
    addTask: (parent, args, context) => {
      const newTask = {
        id: tasks.length,
        name: args.name,
        description: args.description,
        completed: args.completed,
      };

      tasks.push(newTask);
      return newTask;
    },
  },
};

En este archivo definimos un array tasks que usaremos como fuente de datos en nuestra aplicación.

Ten presente que GraphQL es independiente de la base o fuente de datos que estemos usando. Puedes usar bases de datos como mongo o bases de datos SQL, incluso puedes obtener la información a través de otras apis.

Después de creado el array, exportaremos un objeto que tendrá las propiedades Query y Mutation

Query

 Query: {
    tasks: (parent, args, context) => tasks,
    task: (parent, args, context) => {
      const task = tasks.find((task) => task.id === args.id);
      return task;
    },
  },

Aquí es donde estarán definidas todos los resolvers para devolver la información en las queries que nos hagan nuestros clientes. Las funciones dentro de la propiedad Query deben llamarse igual a la query que van a satisfacer.

En nuestro esquema definimos la query tasks así que en la propiedad Query de nuestros resolvers crearemos la propiedad tasks, que tendrá la función que nos devuelve las tareas cuando alguno de nuestros clientes haga alguna query a tasks.

Luego definimos otro resolver para la query de task y en esta función usamos los parámetros que nos provee apollo para todos nuestros resolvers (parent, args y context ). Para más información acerca de estos parámetros los invito a leer este artículo en la documentación de apollo. En el caso del resolver para task solo haremos uso del parámetro args, en este nos llegará el argumento id que se definió en la query task de nuestro esquema:

// En nuestro esquema definimos que en esta query ibamos a recibir un campo id de tipo Int
// Y que devolveriamos una tarea
task(id: Int!): Task

Lo que hace args es reunir esos argumentos definidos en nuestro esquema en un objeto que es lo que representa args y con el valor que se le pase a id buscamos en nuestra lista de tareas alguna que tenga el mismo id y lo retornamos, este retorno es el que dará la respuesta a la petición del cliente.

Mutation

Mutation: {
    addTask: (parent, args, context) => {
      const newTask = {
        id: tasks.length,
        name: args.name,
        description: args.description,
        completed: args.completed,
      };

      tasks.push(newTask);
      return newTask;
    },
  },

Solo nos queda nuestra mutación para agregar una nueva tarea, esta debe ubicarse dentro de la propiedad Mutation y al igual que en las queries debe de llamarse igual a la mutación definida en nuestro esquema que espera satisfacer. Aquí también recibimos en args los argumentos name, description y completed (así está definido en el esquema). Con estos campos formamos el objeto que agregaremos en el array y lo retornamos, es muy importante que este objeto cumpla con la estructura definida en el type Task, en caso contrario tendríamos errores.

Levantar el servidor GraphQL

para eso tenemos el siguiente código en el archivo index.js:

const { ApolloServer } = require('apollo-server');
const typeDefs = require('./typeDefs');
const resolvers = require('./resolvers');

const server = new ApolloServer({
  typeDefs,
  resolvers,
  playground: true,
});

server.listen().then(() => {
  console.log('Corriendo aplicación graphQL en <http://localhost:4000/grapqhql>');
});

• Aquí importamos la definición de nuestro esquema y nuestros resolvers y los usamos para construir una instancia de ApolloServer,
• Además ponemos la propiedad playground en true que permite tener un entorno gráfico donde interactuaremos con el servidor.
• Y para levantar el servidor usamos la función listen().

Si abrimos http://localhost:4000/grapqhql podremos ver lo siguiente:

Este playground que nos da apollo nos servirá para probar nuestro servicio, por ejemplo: ejecutamos la mutación addTask para agregar una tarea al array.

Al lado izquierdo escribimos nuestra mutación pasándole los argumentos que nos pide para crear la tarea y diciéndole que de la tarea resultante queremos conseguir el id y el nombre. Al darle click al botón de play conseguiremos como respuesta lo que tenemos a la derecha, donde podemos ver solamente el id y el nombre como lo indiqué cuando escribí la mutación.

Ahora veamos la query de tasks:

Como ves estoy usando la query de tasks, está como la definimos en el esquema, nos retorna un array con todas las tareas, en este caso solo retorna la que acabamos de crear y con los campos que le especifiqué: id, name y description.

Al igual podemos probar la query task:

Aquí usamos la query task buscando una tarea por un id en especial, 0 en este caso, al lado derecho recibimos un único objeto task con los campos id, name y completed como lo definí al momento de hacer la query.

Eso es todo, espero que te haya gustado este artículo. Si quieres ver el código, te dejo el repositorio con todo lo que hicimos. Próximamente te enseñaré a consumir este servicio desde frontend con vanilla js y React. ¡Hasta pronto!