Introducción a GraphQL y primeras consultas

1. ¿Qué es GraphQL?

Históricamente, el modelo REST dominaba el panorama, en el que cada entidad de datos está asociada a una URL específica. Cada vez que se realiza una solicitud, la API devuelve todos los datos vinculados a esa entidad. Aunque este mecanismo parece sencillo e intuitivo, tiene dos grandes inconvenientes:

Si se necesitan varias entidades al mismo tiempo, hay que ejecutar varias consultas, que pueden no proporcionar todos los datos necesarios.
En situaciones en las que sólo se necesita una fracción de una entidad, se produce una sobreextracción que malgasta los recursos y ancho de banda.

Aquí es donde interviene GraphQL. Diseñado para resolver estos problemas, GraphQL no es un «lenguaje» en sentido estricto, sino una especificación para construir y consumir una API.

En GraphQL, el desarrollador back-end establece un esquema que describe la estructura y los tipos de datos disponibles. Esto da al desarrollador front-end el poder de solicitar exactamente lo que quiere, ni más ni menos.

En lugar de múltiples URL como con REST, una API GraphQL ofrece un único punto de entrada. Los datos se consultan utilizando una sintaxis que refleja la estructura del retorno esperado en formato JSON.

Además de las consultas para leer datos, GraphQL también puede utilizarse para modificarlos mediante lo que se conoce como mutaciones.

2. Primeras consultas GraphQL con React

En primer lugar, inicie un nuevo proyecto React con Vite.

Para conectar React a una API GraphQL, necesitará una biblioteca como Apollo Client, que facilitará la integración. También necesitará instalar GraphQL...

Creacion de una API con Hasura

Hasura es una plataforma que le permite crear rápidamente APIs GraphQL a partir de sus bases de datos existentes. En esta sección, exploraremos cómo crear una API GraphQL con Hasura y cómo conectarla a una aplicación React. Esta parte será de especial interés para los lectores que quieran partir de un esquema de base de datos SQL. Si ya tiene una base de datos funcionando, puede simplemente conectarla a Hasura.

Introducción a Hasura

Hasura simplifica el proceso de creación de una API GraphQL generando automáticamente esquemas y consultas a partir de sus bases de datos.

Configure la conexión a su base de datos proporcionando la información de conexión. Hasura analizará la estructura de su base de datos y generará automáticamente un esquema GraphQL.

Primero vaya a https://cloud.hasura.io/. Utilice el método de conexión que prefiera o cree una cuenta nueva.

A continuación, puede crear un proyecto. Utilizar Hasura para pequeños proyectos personales es totalmente gratuito. A continuación, se le invita a elegir la región en la que se creará su proyecto.

Tras crear un proyecto, haga clic en el botón Launch Console para acceder a todos los parámetros.

Aquí es donde puede conectarse a una base de datos existente o aprovechar la asociación...

Llamada a una API con React y Apollo Client

Ahora que ha creado una API GraphQL con Hasura, puedes usar Apollo Client para llamar y recuperar los datos en su aplicación React. Haciendo unos pocos cambios en nuestro código, seremos capaces de mostrar datos de la API.

1. Configuración del cliente Apollo

En primer lugar, para simplificar el ejemplo, no vamos a entrar en los problemas de autenticación a la API, pero para poder solicitarla, necesitamos añadir al menos una cabecera al cliente Apollo y modificar la URI. Vamos a utilizar la cabecera x-hasura-admin-secret, sólo a efectos de prueba:

const client = new ApolloClient({  
  uri: 'Votre GraphQL Endpoint',  
  cache: new InMemoryCache(),  
  headers: {  
    'x-hasura-admin-secret': `dLc7qqBaW[...]x7bLXlVyB9f`  
  }  
});

2. Llamada a la API creada con Hasura

Ahora podemos crear un componente que hará una consulta a nuestra nueva API GraphQL alojada en Hasura :

// Display.jsx  
import { useQuery, gql } from '@apollo/client';  
  
export default function Display() {  
  const { loading, error, data } = useQuery(gql`  
    query MyQuery {  
      customer {  ...

Conclusión

GraphQL es una solución que puede satisfacer muchas necesidades. Es importante familiarizarse con esta herramienta y probarla para ver si puede integrarse en su forma de trabajar.

Aquí hemos intentado ver soluciones como Hasura, pero hay muchas más opciones a la hora de trabajar con GraphQL. Estos temas van más allá del alcance de React, pero son muy interesantes, por eso se creó este capítulo.

Conectar React a una API GraphQL