Estudio de Apollo Client

• Caché normalizado
• Sistema de consultas flexible
• Integración con UIs populares

• Interactuar con APIs GraphQL
• Estado + API GraphQL
• Apps en tiempo real con GraphQL

Instalación: npm i @apollo/client

import { gql, useQuery } from '@apollo/client';
const { data } = useQuery(gql`{ hola }`);

1. useQuery

Consulta datos de GraphQL en React.

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

const POSTS = gql`{ posts { id titulo } }`;
export default function Lista() {
  const { loading, data } = useQuery(POSTS);
  if (loading) return <p>Cargando…</p>;
  return <ul>{data.posts.map((p) => <li key={p.id}>{p.titulo}</li>)}</ul>;
}

2. useMutation

Crea un recurso y actualiza la caché.

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

const CREAR = gql`mutation ($titulo: String!) { crearPost(titulo: $titulo) { id } }`;
export default function Form() {
  const [crear] = useMutation(CREAR);
  return (
    <form onSubmit={(e) => { e.preventDefault(); crear({ variables: { titulo: e.target[0].value } }); }}>
      <input placeholder="Título" /> <button>Crear</button>
    </form>
  );
}