"Gateando" con Graphql - Lo básico
Tags: graphql, angular, react, spanish
Published: 2020-06-01 22:02:43

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/b0whzrn5fciqmti26gpw.png)

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.

<h2>API REST vrs GraphQL</h2>
<h3>API REST</h3>
- 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.

<h3>GraphQL</h3>
- 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.

<h2>Schemas(GQL)</h2>
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.

<h3>Scalars</h3>
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

<h3>Objects</h3>
Permite definir las entidades que conforman nuestro esquema por ejemplo.
```
// al usar Type indica que esto es un objeto
    type Compañía {
        // al usar el signo ! indica que el valor es obligatrio
        id: ID!
        descripcion: String
        // la utilizar [] indica que es una lista, los que nos indica que puedes tener 1 o mas usuarios
        usuarios: [Usuario]
    }
    
    type Usuario {
        id: ID!
        nombre: String
        edad: Int
    }
```
<h2>Root Type: Query</h2>
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 acceso
        compañías: [Compañía]
        usuarios: [Usuario]
        compañía(id: String!): Compañía
    }
```
<h2>Root Type: Mutation</h2>
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 
    type Mutation {
        // Declaración del punto de  entrada
        agregarCurso {
            descripcion: String
            profesorId: String
        } : Curso
    }
```