El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

Apollo Client es una biblioteca completa de gestión de estado para JavaScript que permite interactuar con un servidor GraphQL para obtener, almacenar y manipular datos. Es una herramienta poderosa que facilita la integración de GraphQL en aplicaciones frontend, proporcionando una serie de características avanzadas como el manejo de caché, la actualización automática de la UI y la gestión de errores.

Instalación y Configuración

Para comenzar a usar Apollo Client, primero necesitas instalarlo junto con sus dependencias. Puedes hacerlo usando npm o yarn:

npm install @apollo/client graphql

O con yarn:

yarn add @apollo/client graphql

Una vez instalado, debes configurar Apollo Client en tu aplicación. Aquí hay un ejemplo básico de configuración en una aplicación React:

import React from 'react';
import ReactDOM from 'react-dom';
import { ApolloProvider, InMemoryCache, ApolloClient } from '@apollo/client';

const client = new ApolloClient({
  uri: 'https://your-graphql-endpoint.com/graphql',
  cache: new InMemoryCache()
});

ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById('root')
);

Explicación del Código

ApolloClient: Se crea una instancia de ApolloClient, especificando la URI del servidor GraphQL y configurando el caché.
ApolloProvider: Envuelve la aplicación con ApolloProvider para que Apollo Client esté disponible en toda la aplicación.

Realizando Consultas

Para realizar consultas, Apollo Client proporciona el hook useQuery. Aquí hay un ejemplo de cómo usarlo:

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

const GET_USERS = gql`
  query GetUsers {
    users {
      id
      name
      email
    }
  }
`;

const Users = () => {
  const { loading, error, data } = useQuery(GET_USERS);

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

  return (
    <ul>
      {data.users.map(user => (
        <li key={user.id}>
          {user.name} - {user.email}
        </li>
      ))}
    </ul>
  );
};

export default Users;

Explicación del Código

gql: Se usa para definir la consulta GraphQL.
useQuery: Ejecuta la consulta y proporciona el estado de carga, errores y datos.

Ejecutando Mutaciones

Para ejecutar mutaciones, Apollo Client proporciona el hook useMutation. Aquí hay un ejemplo:

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

const ADD_USER = gql`
  mutation AddUser($name: String!, $email: String!) {
    addUser(name: $name, email: $email) {
      id
      name
      email
    }
  }
`;

const AddUser = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [addUser, { data, loading, error }] = useMutation(ADD_USER);

  const handleSubmit = (e) => {
    e.preventDefault();
    addUser({ variables: { name, email } });
  };

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

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Name"
      />
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Email"
      />
      <button type="submit">Add User</button>
      {data && <p>User added: {data.addUser.name}</p>}
    </form>
  );
};

export default AddUser;

Explicación del Código

useMutation: Ejecuta la mutación y proporciona el estado de carga, errores y datos.
handleSubmit: Maneja el envío del formulario y ejecuta la mutación con las variables proporcionadas.

Manejo de Caché

Apollo Client maneja automáticamente el caché de las consultas y mutaciones. Puedes personalizar el comportamiento del caché usando políticas de caché. Aquí hay un ejemplo de cómo actualizar el caché después de una mutación:

const [addUser] = useMutation(ADD_USER, {
  update(cache, { data: { addUser } }) {
    const { users } = cache.readQuery({ query: GET_USERS });
    cache.writeQuery({
      query: GET_USERS,
      data: { users: users.concat([addUser]) },
    });
  }
});

Explicación del Código

update: Permite actualizar el caché después de una mutación.
cache.readQuery: Lee los datos actuales del caché.
cache.writeQuery: Escribe los nuevos datos en el caché.

Suscripciones

Apollo Client también soporta suscripciones para recibir actualizaciones en tiempo real. Aquí hay un ejemplo básico:

import React from 'react';
import { useSubscription, gql } from '@apollo/client';

const USER_ADDED = gql`
  subscription OnUserAdded {
    userAdded {
      id
      name
      email
    }
  }
`;

const UserList = () => {
  const { data, loading } = useSubscription(USER_ADDED);

  if (loading) return <p>Loading...</p>;

  return (
    <div>
      <p>New user added: {data.userAdded.name}</p>
    </div>
  );
};

export default UserList;

Explicación del Código

useSubscription: Ejecuta la suscripción y proporciona los datos en tiempo real.

Ejercicio Práctico

Ejercicio

Configura Apollo Client en una nueva aplicación React.
Crea una consulta para obtener una lista de posts (id, title, content).
Implementa una mutación para agregar un nuevo post.
Actualiza el caché después de agregar un nuevo post.
Implementa una suscripción para recibir notificaciones cuando se agregue un nuevo post.

Solución

Configuración de Apollo Client: (Ver sección de instalación y configuración)
Consulta de Posts:

const GET_POSTS = gql`
  query GetPosts {
    posts {
      id
      title
      content
    }
  }
`;

const Posts = () => {
  const { loading, error, data } = useQuery(GET_POSTS);

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

  return (
    <ul>
      {data.posts.map(post => (
        <li key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.content}</p>
        </li>
      ))}
    </ul>
  );
};

Mutación para Agregar Post:

const ADD_POST = gql`
  mutation AddPost($title: String!, $content: String!) {
    addPost(title: $title, content: $content) {
      id
      title
      content
    }
  }
`;

const AddPost = () => {
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');
  const [addPost] = useMutation(ADD_POST, {
    update(cache, { data: { addPost } }) {
      const { posts } = cache.readQuery({ query: GET_POSTS });
      cache.writeQuery({
        query: GET_POSTS,
        data: { posts: posts.concat([addPost]) },
      });
    }
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    addPost({ variables: { title, content } });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        placeholder="Title"
      />
      <textarea
        value={content}
        onChange={(e) => setContent(e.target.value)}
        placeholder="Content"
      />
      <button type="submit">Add Post</button>
    </form>
  );
};

Suscripción para Nuevos Posts:

const POST_ADDED = gql`
  subscription OnPostAdded {
    postAdded {
      id
      title
      content
    }
  }
`;

const PostList = () => {
  const { data, loading } = useSubscription(POST_ADDED);

  if (loading) return <p>Loading...</p>;

  return (
    <div>
      <p>New post added: {data.postAdded.title}</p>
    </div>
  );
};

Conclusión

Apollo Client es una herramienta poderosa para integrar GraphQL en aplicaciones frontend. Proporciona una serie de características avanzadas como el manejo de caché, la actualización automática de la UI y la gestión de errores. En este módulo, hemos cubierto cómo instalar y configurar Apollo Client, realizar consultas y mutaciones, manejar el caché y trabajar con suscripciones. Con estos conocimientos, estás listo para construir aplicaciones frontend robustas y eficientes utilizando Apollo Client y GraphQL.

Apollo Client

Contenido

Instalación y Configuración

Explicación del Código

Realizando Consultas

Explicación del Código

Ejecutando Mutaciones

Explicación del Código

Manejo de Caché

Explicación del Código

Suscripciones

Explicación del Código

Ejercicio Práctico

Ejercicio

Solución

Conclusión

Curso de GraphQL

Módulo 1: Introducción a GraphQL

Módulo 2: Conceptos Fundamentales

Módulo 3: Diseño Avanzado de Esquemas

Módulo 4: Trabajando con Datos

Módulo 5: Rendimiento y Seguridad

Módulo 6: Herramientas y Ecosistema

Módulo 7: Pruebas y Despliegue

Módulo 8: Aplicaciones del Mundo Real