El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

Introducció

Apollo Client és una biblioteca potent i flexible per gestionar dades de GraphQL en aplicacions JavaScript. Proporciona eines per fer consultes, mutacions i subscripcions de GraphQL, així com per gestionar l'estat de l'aplicació i la memòria cau. En aquesta secció, aprendrem a configurar i utilitzar Apollo Client en una aplicació.

Configuració d'Apollo Client

Instal·lació

Per començar, necessitem instal·lar les dependències necessàries. Utilitzarem npm o yarn per instal·lar Apollo Client i altres paquets relacionats.

npm install @apollo/client graphql

yarn add @apollo/client graphql

Configuració bàsica

Un cop instal·lats els paquets, podem configurar Apollo Client. Crearem un client Apollo i el connectarem a un servidor GraphQL.

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

// Configuració del client Apollo
const client = new ApolloClient({
  uri: 'http://localhost:4000/graphql', // URL del servidor GraphQL
  cache: new InMemoryCache() // Configuració de la memòria cau
});

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

Realització de Consultes

Definició d'una consulta

Per fer una consulta amb Apollo Client, primer hem de definir la consulta utilitzant gql, una funció de l'API d'Apollo Client.

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

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

Execució d'una consulta

Podem utilitzar el hook useQuery per executar la consulta en un component React.

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

function 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;

Realització de Mutacions

Definició d'una mutació

De manera similar a les consultes, definim una mutació utilitzant gql.

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

Execució d'una mutació

Podem utilitzar el hook useMutation per executar la mutació en un component React.

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

function AddUserForm() {
  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"
        placeholder="Name"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <input
        type="email"
        placeholder="Email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <button type="submit">Add User</button>
      {data && <p>User added: {data.addUser.name}</p>}
    </form>
  );
}

export default AddUserForm;

Gestió de la Memòria Cau

Apollo Client inclou una memòria cau integrada que emmagatzema els resultats de les consultes per millorar el rendiment. La memòria cau es pot configurar i gestionar de diverses maneres.

Actualització de la memòria cau després d'una mutació

Podem actualitzar la memòria cau manualment després d'executar una mutació per assegurar-nos que les dades es mantenen consistents.

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]) },
    });
  }
});

Exercicis Pràctics

Exercici 1: Configuració d'Apollo Client

Instal·la Apollo Client i graphql en una nova aplicació React.
Configura Apollo Client per connectar-se a un servidor GraphQL.

Exercici 2: Realització de Consultes

Defineix una consulta per obtenir una llista d'articles (posts) amb els camps id, title i content.
Utilitza el hook useQuery per executar la consulta i mostrar la llista d'articles en un component React.

Exercici 3: Realització de Mutacions

Defineix una mutació per afegir un nou article amb els camps title i content.
Utilitza el hook useMutation per executar la mutació des d'un formulari en un component React.

Solucions

Solució Exercici 1

// Instal·lació
// npm install @apollo/client graphql

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

const client = new ApolloClient({
  uri: 'http://localhost:4000/graphql',
  cache: new InMemoryCache()
});

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

Solució Exercici 2

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

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

function 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>
  );
}

export default Posts;

Solució Exercici 3

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

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

function AddPostForm() {
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');
  const [addPost, { data, loading, error }] = useMutation(ADD_POST);

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

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

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

export default AddPostForm;

Conclusió

En aquesta secció, hem après a configurar Apollo Client, realitzar consultes i mutacions, i gestionar la memòria cau en una aplicació React. Apollo Client és una eina poderosa que facilita la integració de GraphQL en aplicacions JavaScript, proporcionant una experiència de desenvolupament rica i eficient. En el proper mòdul, explorarem altres eines i components de l'ecosistema GraphQL.

Client Apollo