Que es GraphQL?

41547

<h1>Que es GraphQL?</h1>

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.

<h1>Diferencias entre ApiRest y GraphQL</h1>

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.

<h1>Schemas(GQL)</h1>

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.

<h1>Scalars</h1>

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

<h1>Objects</h1>

Permite definir las entidades que conforman nuestro esquema por ejemplo.

// al usar Type indica que esto es un objeto
    type Curso {
        // al usar el signo ! indica que // el valor es obligatrioid: ID!
        descripcion: String// la utilizar [] indica que es una lista// los que nos indica que puedes tener 1 o mas // profesoresprofesores: [Profesor]
    }
    
    type Profesor {
        id: ID!
        nombre: Stringedad: Int
        tieneCurso: Boolean
    }****

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.

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

// al usar emun indica  el inicio del tipo emumenumCurso{
        // Listado de las opciones posibles
        REACT
        GRAPHQL
        REDUX
    }

<h1>Interface</h1>

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.

// Al usar interface se indica el uso de interface
    interface Perfil {
        // para este ejemplo se setea// el uso de campos obligadosnombre: String!
        email: String!
        edad: Int!
    }
    
    // Al usar implements se indica que usar al interface Perfil
    type Alumno implements Perfil {
        // De igual manera tenemos que declarar// los cambpos que se utilizan en la interfacenombre: String!
        email: String!
        edad: Int!
        cruso: String
    }

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.

<h1>Unión</h1>

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

// Al usar union se indica  que busqueda es tipo union
    union Busqueda = Profesor | Curso 
    
    // Objecto en el que se realiza la busqueda
    type Curso {
        id: ID!
        descripcion: Stringprofesores: [Profesor]
    }
    
    // Objecto en el que se realiza la busqueda
    type Profesor {
        id: ID!
        nombre: Stringedad: Int
        tieneCurso: Boolean
    }
    
    // Objecto que muestra el resultado de la busqueda
    type QueryBusqueda {
        // Al usar [] indica que puede ser 1 o mas valores// practicamente puede ser una listaresults: [Busqueda]
    }

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.

<h1>Modificadores de tipo</h1>

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.

typeProfesor {
        name: String!
    }

[] : 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.

typeProfesor {
        name: String!
        cursos: [String]
    }

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.

type Profesor {
        name: String!
        // Para este caso se indica que la lista no puedeser null// pero si la lista recibe algo como esto [null, "jorge", null]// seria valido.cursos: [String]!
    }

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.

type Profesor {
        name: String!
        // Para este caso se indica que la lista no puedeser null// al igual que el contenido por lo que si la lista// algo como esto [null, "jorge", null] no seria valido.cursos: [String!]!
    }

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.

<h1>Root Type: Query</h1>

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.

// Esta declaracion es epsecial ya que // Dicta el unicio punto de entrada
    Type Query {
        // Dentro se colocan los puntos de entrada//  y se le asignan las entidades a las cuales//  puedes tener accesocursos: [Curso]
        profesores: [Profesores]
        // Tabien dentro de los puntos de entrada se le pueden // mandar parametros para resolver querys es importante // mencionar que al resilver un query se tiene que indicar // en que entidad se resuelve dicho query.
        curso(id: String!): Curso
        profesor(id: String!, limite: init): Profesores
    }

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.

<h1>Root Type: Mutation</h1>

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.

// punto de entrada especial que permite// agregar, modificar y borrar contenido typeMutation {
        // Declaracuon del punto de  entradaagregarCurso {
            // De claracion de los campos a modificar o agregardescripcion: String
            profesorId: String
        } : Curso// identidad a la que se le agregaran los nuevos campos
    }

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.

<h1>Declaración de variables</h1>

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.

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.

{
        [nombre Entidad] {
            // listado de campos a solicitar
        }
    }
    
    // ejemplo query base
    
    {
        cursos {
            id,
            titulo,
        }
    }

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.

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.

{
        [nombre Entidad] {
            // listado de campos a solicitar
            [nombre de entidar con laquese tiene realción] {
                // listado de campos a solicitar
            }
        }
    }
    
    // ejemplo de consulta consiguiendo data de una relación
    
    {
        cursos {
            id,
            titulo,
            comentarios {
                nombre
                cuerpo
            }
        }
    }

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

<h1>Conclusión</h1>

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.

<h1>Extras</h1>

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.

Repositorio de practica realizada

Si te gusto el articulo puedes ver mas en mi espacio de Medium agradeceria mucho el feedbak, de ante mano gracias

hace 5 años

Escribe tu comentario

+ 2