Tutorial GraphQL para principiantes: qué es, características y ejemplo

¿Qué es GraphQL?

GraphQL es una tecnología del lado del servidor de capa de aplicación desarrollada por Facebook para ejecutar consultas con datos existentes. GraphQL puede optimizar las llamadas a la API RESTful. Proporciona una forma declarativa de recuperar y actualizar sus datos. GraphQL le ayuda a cargar datos del servidor al cliente. Permite a los programadores elegir los tipos de solicitudes que les gusta realizar.

¿Por qué utilizar GraphQL?

Las siguientes son las razones para utilizar GraphQL:

• Proporciona una consulta legible para humanos.
• En GraphQL, es muy fácil trabajar con muchas bases de datos.
• Es adecuado para microservicios y sistemas complejos.
• Puede recuperar datos con una única llamada API.
• Le ayuda con el procesamiento por lotes y el almacenamiento en caché de consultas.
• No se enfrenta a problemas de recuperación excesivos o insuficientes.
• Adaptando las solicitudes a sus necesidades.
• Le ayuda a descubrir el esquema en el formato adecuado.
• GraphQL mantiene automáticamente la documentación sincronizada con los cambios de API.
• La evolución de API es posible sin control de versiones.
• Los campos GraphQL se utilizan en múltiples consultas que se pueden compartir con un nivel de componente superior para su reutilización.
• Puede elegir qué funciones exponer y cómo funcionan.
• Se puede utilizar para la creación rápida de prototipos de aplicaciones.

Aplicaciones de GraphQL

Estas son las aplicaciones importantes de GraphQL:

• Proporciona Relay y otros marcos de cliente.
• GraphQL le ayuda a mejorar el rendimiento de la aplicación móvil.
• Puede reducir el problema de recuperación excesiva para reducir el servicio en la nube del lado del servidor y disminuir el uso de la red del lado del cliente.
• Se puede utilizar cuando la aplicación cliente tiene que especificar qué campos se necesitan en formato de consulta larga.
• GraphQL se puede utilizar por completo cuando necesita agregar funcionalidad a su API antigua o existente.
• Se utiliza cuando es necesario simplificar una API compleja.
• Mezcle y combine el patrón de fachada, que se usa comúnmente en la programación orientada a objetos.
• Cuando tienes que agregar datos de más de un lugar en una API conveniente.
• Puede utilizar GraphQL como una abstracción en una API existente para especificar la estructura de respuesta según las necesidades del usuario.

¿Qué necesitas aprender antes de aprender GraphQl?

Este tutorial de GraphQL se basa en Express y NodeJs. Por lo tanto, puedes aprender GraphQL muy fácilmente con un conocimiento básico de NodeJS.

Componentes clave de GraphQL

Ahora, en este tutorial de GraphQL, aprendamos los componentes clave de GraphQL:

Como se muestra en la figura anterior, hay tres componentes clave de GraphQL: 1) Consulta, 2) Resolver y 3) Esquema.

Consulta

La consulta es una solicitud API realizada por la aplicación de la máquina cliente. Admite aumentos y apunta a matrices. La consulta se utiliza para leer o recuperar valores.

Partes de la consulta:

A continuación se muestran las partes importantes de la consulta

1. Campo:

Un campo simplemente indica que estamos solicitando al servidor información específica. A continuación, se muestra un ejemplo de GraphQL de un campo en una consulta GraphQL.

query {
    team {
        id name
    }
}

"data": {
    "team":[ {
        "id": 1, 
        "name": "Avengers"
    }
    ,
    …
]
}
}

En el ejemplo de GraphQL anterior, le pedimos al servidor el campo llamado equipo y sus subcampos como identificación y nombre. El servidor GraphQL devuelve los datos que solicitamos.

2. Argumentos

In RESTSolo podemos pasar un único conjunto de argumentos como segmentos de URL y parámetros de consulta. Para obtener un perfil en particular, una llamada REST típica se verá así:

GET /api'team?id=2 Content-Type: application JSON
 {
    "id": 2, 
    "name": "Justice League."
}

Resolver

Los solucionadores proporcionan las instrucciones para convertir la operación GraphQL en datos. Resuelven la consulta en datos definiendo funciones de resolución.

Muestra al servidor el proceso y la ubicación para recuperar datos de acuerdo con un campo específico. El solucionador también separa el esquema de la base de datos y el esquema de API. La información separada ayuda a modificar el contenido obtenido de la base de datos.

Esquema

Un esquema GraphQL es el centro de la implementación de GraphQL. Describe la funcionalidad disponible para los clientes que se conectan a él.

Características de GraphQL

Estas son las características importantes de GraphQL:

• Proporciona un lenguaje de consulta declarativo, que no es imperativo.
• Es jerárquico y centrado en el producto.
• GraphQL está fuertemente tipado, lo que significa que las consultas se ejecutan dentro del contexto de un sistema en particular.
• Las consultas en GraphQL están codificadas en el cliente, no en el servidor.
• Tiene todas las características de la capa de aplicación del modelo OSI.

Clientes GraphQL

El cliente GraphQL es un código que realiza solicitudes POST a un servidor GraphQL relevante. Puede consultar una API GraphQL directamente, pero el buen enfoque es aprovechar una biblioteca cliente dedicada mediante Relay.

Este JavaLa biblioteca de scripts fue desarrollada por Facebook para crear aplicaciones React con GraphQL. Los clientes GraphQL pueden ser un CMS como Drupal, una aplicación de una sola página, una aplicación móvil, etc.

Servidores GraphQL

Los servidores GraphQL son una implementación del lado del servidor de la especificación de GraphQL. Representa sus datos como API GraphQL, que su programa cliente puede consultar para obtener el base de datos.

Puertas de enlace GraphQL

Gateway es un patrón de microservicio en el que puede crear un servicio independiente para hacer frente a otros servicios de backend. Ofrece documentación viable y brinda una manera conveniente de recopilar datos de más de una fuente con una sola solicitud.

GraphQL tiene una buena manera de factorizar los valores dinámicos fuera de la consulta. Los pasa como un diccionario separado. Estos valores se conocen como variables. Siempre que trabajamos con variables, debemos hacer las siguientes tres cosas:

1. Reemplace el valor estático en la consulta con un nombre de variable.
2. Declare el nombre de la variable como una de las variables aceptadas por la consulta GraphQL.
3. Pase el valor en el diccionario de variables específico del transporte.

Así es como se ve todo junto:

query HeroNameAndFriends($episode: Episode) {
  hero(episode: $episode) {
    name
    friends {
      name
    }
  }
}
{
  "episode": "JEDI"
}
{
  "data": {
    "hero": {
      "name": "R2-D2",
      "friends": [
        {
          "name": "Luke Skywalker"
        },
        {
          "name": "Han Solo"
        },
        {
          "name": "Leia Organa"
        }
      ]
    }
  }
}

Como puede ver en el ejemplo de GraphQL anterior, simplemente pasamos una variable diferente a la necesidad de construir una nueva consulta.

¿Qué es la mutación?

Una mutación es una forma de cambiar el conjunto de datos en GraphQL. Modifica datos en el almacén de datos y devuelve un valor. Las mutaciones le ayudan a insertar, actualizar o eliminar datos. Generalmente, las mutaciones se definen como una parte del esquema.

Puntos a considerar al diseñar mutaciones GraphQL

Estos son los puntos importantes al diseñar GraphQL:

• Nombrar: En primer lugar, debes nombrar el verbo de tus mutaciones. Luego el sustantivo u “objeto” si corresponde. Utilice camelCase al nombrar mutaciones.
• Especificidad: Tienes que hacer que la mutación sea lo más específica posible. Las mutaciones deben representar acciones semánticas realizadas por el usuario.
• Objeto de entrada: Utilice un tipo de objeto de entrada único, obligatorio y único como argumento para ejecutar la mutación en el cliente.
• Tipo de carga útil único: Debes utilizar un tipo de carga útil único para cada mutación. También puede agregar la salida de la mutación como un campo a ese tipo de carga útil en particular.
• Anidamiento: Utilice el anidamiento de su mutación siempre que tenga sentido. Le permite utilizar completamente la API GraphQL.

Diferencia entre GraphQL y REST

La siguiente tabla muestra una diferencia importante entre GraphQL y DESCANSO.

GraphQL	REST
Sigue una arquitectura impulsada por el cliente.	Sigue una arquitectura basada en servidor.
GraphQL se puede organizar en términos de un esquema.	REST se puede organizar en términos de puntos finales.
GraphQL es una comunidad en crecimiento.	REST es una comunidad muy grande.
La velocidad de desarrollo en GraphQL es rápida.	La velocidad de desarrollo en REST es lenta.
La curva de aprendizaje en GraphQL es difícil.	La curva de aprendizaje en REST es moderada.
La identidad está separada de cómo se obtiene.	El punto final al que llama en REST es la identidad de un objeto en particular.
En GraphQL, el servidor determina los recursos disponibles.	La forma y el tamaño del recurso los determina el servidor en REST.
GraphQL proporciona una alta coherencia en todas las plataformas.	Es difícil lograr coherencia en todas las plataformas.

Aplicaciones y herramientas de código abierto utilizadas por GraphQL

Las importantes aplicaciones y herramientas de código abierto utilizadas por GraphQL son las siguientes:

• Gatsby: Gastby es una aplicación impulsada por GraphQL que puede utilizar datos derivados de más de una fuente de API GraphQL. Puede usarlo para desarrollar una aplicación React estática y basada en cliente.
• GrafiQL: Es un ID que se integra con el navegador y también interactúa con la API de GraphQL. Algunas de las funciones que incluye GraphiQL son mutaciones, consulta de datos y consultas de autocompletar.
• Zona de juegos GraphQL: Es un IDE potente que tiene un editor incorporado para manejar mutaciones, validación, consultas GraphQl, suscripciones, etc. El desarrollador puede utilizar este IDE para visualizar la estructura del esquema.
• Prisma: Prisma es una capa de abstracción de base de datos que convierte sus bases de datos en API GraphQL con operaciones CRUD (crear, leer, actualizar y eliminar).
• Poco: Es una herramienta y plataforma de código abierto que convierte código reutilizable en componentes. Los desarrolladores pueden utilizarlos para compartir y desarrollar varios proyectos.

Resum

• GraphQL es una tecnología del lado del servidor de capa de aplicación desarrollada por Facebook para ejecutar consultas con datos existentes.
• Puede utilizar GraphQL para recuperar datos con una única llamada a la API.
• GraphQL le ayuda a mejorar el rendimiento de la aplicación móvil.
• Los componentes importantes de la consulta GraphQL son: 1) Consulta, 2) Resolvedor, 3) Esquema.
• GraphQL está fuertemente tipado, lo que significa que las consultas se ejecutan dentro del contexto de un sistema en particular.
• El cliente GraphQL es un código que realiza solicitudes POST a un servidor GraphQL relevante.
• Los servidores GraphQL son una implementación del lado del servidor de la especificación de GraphQL.
• Gateway es un patrón de microservicio en el que puede crear un servicio independiente para hacer frente a otros servicios de backend.
• GraphQL tiene una buena manera de factorizar los valores dinámicos de la consulta.
• Una mutación es una forma de cambiar el conjunto de datos en GraphQL.
• Los puntos importantes al diseñar GraphQL son: 1) Denominación, 2) Especificidad, 3) Objeto de entrada Tipo de carga útil único y 4) Anidamiento.
• GraphQL se puede organizar en términos de un esquema, mientras que REST se puede organizar en términos de puntos finales.
• La desventaja de GraphQL es que carece de recursos en la parte backend.