Guía para entender la magia de GraphQL.

Que es GraphQL?

Jorge Mendez Ortega
7 min readApr 4, 2019

--

Es un query language, es decir, un lenguaje de consultas. Un lenguaje es un sistema compartido por dos partes que les permite comunicarse entre sí.

Un lenguaje de consultas como GraphQL nos permite hacer consultas y esperar una respuesta predecible. Un ejemplo de una lenguaje de consultas es SQL, el cual se enfoca en las consultas a una base de datos.

Aunque suene un poco confuso, SQL no tiene nada que ver con GraphQL, ya que el primero está pensado para trabajar con bases de datos, y GraphQL es para comunicar clientes y servidores.

GraphQL es una herramienta que se presenta como una alternativa a REST. La principal mejora que propone es la optimización, además de trasladar la información del servidor al cliente.

Una de las ventajas más importantes de GraphQL es que es agnóstico de plataforma, lo que quiere decir que se puede implementar en más de 20 lenguajes.

El principal objetivo de GraphQL es evitar las múltiples consultas al servidor.

Diferencias entre ApiRest y GraphQL

ApiRest

  • Es solo una convención: Es una manera de comunicarse entre el servidor y cliente, cada uno tiene sus reglas.
  • El servidor expone recursos: Los clientes se tienen que adecuarse a como están expuestos.
  • Hace overfetching: Envía más información de la que se necesita.
  • Múltiples request por vista: Muy costoso en performance, básicamente es una aplicación en blanco que aún no ha cargado datos o tiene custom endpoints.
  • Documentación ajena al desarrollo: No hay un estándar por lo que depende mucho del desarrollador para mantenerla.

GraphQL

  • Lenguaje tipado y validable: Le damos una forma de lo que recibe y lo que devolvemos, Además de agregarle seguridad.
  • El Cliente define que recibe: Haciendo una consulta, de la estructura que se define como respuesta.
  • Envía lo necesario: Se tiene control total de las respuestas que se esperan del servidor.
  • Hace un solo request por vista: Se maneja un solo row, prácticamente en solo request puedes mandar todo lo que necesitas.

Schemas(GQL)

El manejo de esquemas dentro de GQL(GraphQL) facilita la forma en la que se deciden las entidades, cómo se relacionan entre ellas, cuáles son las entidades que están disponibles para cada cliente, en pocas palabras, es todo lo que el cliente puede pedir a través de GQL, Un punto importante a tomar en cuenta es que los Schemas están compuestos de types los cuales se conocen como scalars.

Scalars

Permiten definir la mayoría de las propiedades de las entidades que utilizaremos, los tipos que nos permite manejar son

  • Int: Números enteros.
  • Float: Números con decimales.
  • String: Cadenas de texto.
  • Boolean: maneja los valores True o False.
  • ID: Identificador único(GQL se encargará de esto) este puede ser de tipo Int o String

Objects

Permite definir las entidades que conforman nuestro esquema por ejemplo.

Fig 1: Ejemplo de Objects

En el ejemplo anterior podemos ver que para definir el tipo de dato para las propiedades de la entidad definida se utilizan los valores de los scalars además de que el objeto Curso tiene un referencia al Objeto Profesor.

Enum

También es conocido como enumeradores, los cuales permiten listar entre una o varias opciones posibles, ejemplo.

Fig 2: Ejemplo Enum

Interface

Proporciona la capacidad de describir campos que se comparten en diferentes tipos, es la definición de campos requeridos que sabemos que todas las implementaciones se van a cumplir, si en un futuro necesitáramos que todas las implementaciones de perfil tuvieran un nuevo campo, solamente debemos agregarlo a la Interface.

Fig 3: Ejemplo Interface

Es importante mencionar que el concepto de extender la lógica no existe en GQL es una manera de asegurarse que las implementaciones están al día, de una manera más sencilla podríamos mencionar que el uso de interface funciona con una validación previa al ejecutar un query.

Unión

Permite agrupar diferentes tipos en los cuales se puede realizar una búsqueda siempre dentro de los tipos agrupados, ejemplo.

Fig 4: Ejemplo Unión

Como se muestra en el ejemplo puede verse que estamos utilizando la opción union para realizar la búsqueda dentro de los Objects Profesor y Curso además se utiliza un tercero el cual tendrá el resultado de la búsqueda.

Modificadores de tipo

Dentro de GQL existen dos tipos de modificadores los cuales son.

! : El signo de exclamación permite indicar que un valor es requerido, de una manera más sencilla el campo que se requiera no puede ser null ya que si lo fuera GQL mostraría un error, en caso de que el campo no cuente con un el signo de exclamación esto nos indica que el campo es opcional.

Fig 5: Ejemplo del modificador !

[] : el uso de corchetes permite indicar que se espera mas de una valor, se podría decir que similar a los famosos arreglos que utilizamos en cualquier lenguaje de programación.

Fig 6: Ejemplo del modificador []

Algo interesante de los 2 modificadores de tipo pueden utilizarse juntos por ejemplo.

[]! : El usos de los corchetes con el signo de exclamación permite indicar que nuestra lista no puede ser null pero alguno de los valores contenido si pueden serlo por lo que esto no generaría un error.

Fig 7: Ejemplo del modificador []!

En el ejemplo anterior se indica que la lista no puede ser null ya que es requerida pero dentro de la lista si pueden existir valores null por lo que seria valido y no se mostraría un Error.

[!]! : el uso de corchetes con el signo de exclamación dentro y fuera permite indicar que tanto la lista como el contenido no pueden ser null.

Fig 8: Ejemplo del modificador [!]!

Como se muestra en el ejemplo anterior se puede ver que tanto los valores que reciba la lista como la lista no pueden ser null.

Root Type: Query

Es el punto de entrada para realizar las consultas, se puede ver como una analogía a los endpoints que encontramos dentro de una arquitectura REST, un punto importante dentro de GQL es que solo existe un solo punto de entrada.

Fig 9: Ejemplo RootQuery

En el ejemplo anterior podemos ver lo que es la declaración de nuestros puntos de entrada, unos de los casos a destacar es que se pueden manejar paramentos, con los cuales se pueden mandar ciertos valores que necesitemos dentro de nuestra consulta.

Root Type: Mutation

GQL no solo permite realizar consultas sino que también tiene la capacidad de insertar, Borrar y editar elementos, GQL nos facilita un tipo especial de endPoint el cual nos permite realizar las acciones ya mencionadas.

Fig 10: Ejemplo Mutation

Como podemos ver en el ejemplo anterior se utiliza mutation para agregar nuevos valores a la entidad curso, es importante mencionar que como estamos afectando a curso en futuras consultas podríamos conseguir los campos agregados.

Declaración de variables

Antes de entender cómo se manejan la variables es importante decir y saber que en GQL no puedes tener nada sin saber de qué tipo es por lo cual es importante tomar en cuenta los saclars, en el siguiente ejemplo se muestra el uso de variables.

Fig 11: Declaración de variables usando GraphiQL

En la imagen anterior podemos ver que se declara la variable id la cual se pasa de manera directa al query como se muestra en la Línea 1, GQL permite el manejo de queries ya que cuenta con una sintaxis propia la cual se muestra en el siguiente ejemplo.

Fig 12: Ejemplo de Query

el ejemplo anterior es un query básico ya que GQL nos permite realizar búsquedas un poco más complejas y extensas por ejemplo supongamos el siguiente caso.

Fig 13: Diagrama de un query

Como podemos ver en la imagen se muestra una relación de la tabla cursos con la tabla comentarios al iniciar el uso de GQL podemos resolver la consulta de una manera muy sencilla.

Fig 13: Ejemplo de Query resolviendo una relación

como se muestra en el ejemplo anterior podemos ver que resolver la consulta es muy sencillo.

Conclusión

Como hemos podido ver, GQL nos da herramientas para desarrollar un API de forma rápida, natural e independiente del acceso a base de datos o en algunos casos conectarnos a un CMS. Además soporta una gran cantidad de lenguajes y clientes.

Extras

como material extra dejo el repositorio que arme al llevar un pequeño curso de GQL en este repositorio encontraremos paso a paso cómo se configura un servidor y el uso de GQL además de que ya cuenta con una la integración de Apollo, es importante mencionar que por cada acción que se realiza en el proyecto se cuenta con TAG el cual corresponde a cada paso realizado.

Fig 14: Cheat Sheet

Entradas anteriores

--

--

Jorge Mendez Ortega

Con más de 15 años de experiencia en desarrollo web, he colaborado con empresas líderes, contribuyendo al éxito de proyectos diversos. me gusta aprender