martes 17 septiembre 2024

Cómo usar GraphQL en una aplicación React

Introducción a GraphQL en React

GraphQL es una poderosa tecnología de consulta de datos que permite a las aplicaciones cliente solicitar solo los datos que necesitan. En lugar de trabajar con múltiples endpoints como en REST, GraphQL ofrece un único punto de acceso y una mayor flexibilidad. En una aplicación React, GraphQL es comúnmente utilizado junto con Apollo Client, una librería que facilita la integración y manejo de consultas y mutaciones.

A continuación, te explicamos cómo puedes usar GraphQL en tu aplicación React con Apollo Client.

Configuración inicial de Apollo Client

Antes de comenzar a hacer consultas o mutaciones, es necesario configurar Apollo Client en tu aplicación React. Para ello, sigue estos pasos:

1. Instalar dependencias:

Utiliza npm o yarn para instalar @apollo/client y graphql:

npm install @apollo/client graphql

2. Configurar Apollo Provider:

El ApolloProvider es el componente que conecta tu aplicación React con tu servidor GraphQL. Debes envolver tu aplicación dentro del ApolloProvider y proporcionar una instancia de Apollo Client.

// src/index.js o App.js
   import React from 'react';
   import ReactDOM from 'react-dom';
   import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';

   // Crear una instancia de Apollo Client
   const client = new ApolloClient({
     uri: 'https://tuservidorgraphql.com/graphql', // Reemplaza con tu servidor GraphQL
     cache: new InMemoryCache(),
   });

   const App = () => (
     <ApolloProvider client={client}>
       <div>
         <h1>Mi Aplicación con GraphQL y React</h1>
         {/* Otros componentes */}
       </div>
     </ApolloProvider>
   );

   ReactDOM.render(<App />, document.getElementById('root'));

Aquí, uri debe ser la URL de tu servidor GraphQL. El InMemoryCache se usa para almacenar en caché los resultados de las consultas.

Hacer consultas con GraphQL

Una vez que has configurado Apollo Client, puedes empezar a hacer consultas (queries) para obtener datos desde el servidor GraphQL.

1. Definir una consulta:

Utiliza la función gql de Apollo para definir la consulta GraphQL.

import { gql, useQuery } from '@apollo/client';

   // Definir la consulta GraphQL
   const GET_USUARIOS = gql`
     query ObtenerUsuarios {
       usuarios {
         id
         nombre
         email
       }
     }
   `;

2. Usar la consulta en un componente:

Para ejecutar la consulta, usa el hook useQuery, que Apollo proporciona para React.

const ListaUsuarios = () => {
     const { loading, error, data } = useQuery(GET_USUARIOS);

     if (loading) return <p>Cargando...</p>;
     if (error) return <p>Error: {error.message}</p>;

     return (
       <ul>
         {data.usuarios.map(usuario => (
           <li key={usuario.id}>
             {usuario.nombre} - {usuario.email}
           </li>
         ))}
       </ul>
     );
   };

   export default ListaUsuarios;

loading: Indica si la consulta aún está cargando.
error: Si hay algún error en la consulta, este valor lo contendrá.
data: Contiene los resultados de la consulta cuando se completa.

En este ejemplo, obtenemos una lista de usuarios desde el servidor GraphQL y la mostramos en un componente.

Realizar mutaciones con GraphQL

Además de hacer consultas, también puedes realizar mutaciones (mutations) para modificar los datos en el servidor, como crear, actualizar o eliminar registros.

1. Definir una mutación:

Similar a las consultas, se define una mutación usando gql.

import { gql, useMutation } from '@apollo/client';

   // Definir la mutación
   const CREAR_USUARIO = gql`
     mutation CrearUsuario($nombre: String!, $email: String!) {
       crearUsuario(nombre: $nombre, email: $email) {
         id
         nombre
         email
       }
     }
   `;

2. Usar la mutación en un componente:

Utiliza el hook useMutation para ejecutar la mutación.

const FormularioCrearUsuario = () => {
     let inputNombre, inputEmail;
     const [crearUsuario, { data }] = useMutation(CREAR_USUARIO);

     const manejarSubmit = e => {
       e.preventDefault();
       crearUsuario({ variables: { nombre: inputNombre.value, email: inputEmail.value } });
       inputNombre.value = '';
       inputEmail.value = '';
     };

     return (
       <form onSubmit={manejarSubmit}>
         <input type="text" placeholder="Nombre" ref={node => (inputNombre = node)} />
         <input type="email" placeholder="Email" ref={node => (inputEmail = node)} />
         <button type="submit">Crear Usuario</button>
       </form>
     );
   };

   export default FormularioCrearUsuario;

Aquí, se define un formulario simple para crear un nuevo usuario. Cuando el usuario envía el formulario, se ejecuta la mutación crearUsuario con los valores proporcionados.

Manejar el estado de la consulta y la mutación

Apollo maneja de forma automática el estado de las consultas y mutaciones, proporcionando herramientas como:

Refetching: Puedes volver a ejecutar una consulta manualmente si los datos cambian.

const { refetch } = useQuery(GET_USUARIOS);

  const refrescarDatos = () => {
    refetch();
  };

Optimistic UI: Puedes actualizar la UI inmediatamente antes de recibir la respuesta del servidor, lo que mejora la experiencia del usuario en mutaciones.

const [crearUsuario] = useMutation(CREAR_USUARIO, {
    optimisticResponse: {
      crearUsuario: {
        id: -1,
        nombre: "Nombre temporal",
        email: "email@temporal.com",
        __typename: "Usuario",
      },
    },
  });

Conclusión

Integrar GraphQL en una aplicación React es sencillo y poderoso con Apollo Client. Permite realizar consultas y mutaciones de manera eficiente y organizar el flujo de datos en tus componentes. Con la capacidad de obtener solo los datos necesarios, actualizar la caché automáticamente y manejar errores de forma centralizada, GraphQL es una excelente opción para mejorar el rendimiento y la experiencia del usuario en aplicaciones React.

Más información

Para más detalles sobre cómo usar Apollo Client en React, visita la documentación oficial de Apollo.

Etiquetas:

javascript graphql react

Creado por:

Jorge García

Fullstack developer