Інтеграція з фронтендом: Apollo Client

Нарешті ми дійшли до того моменту, коли наші зусилля зі створення потужного та гнучкого GraphQL API можуть бути гідно оцінені у фронтенд-додатках! Сьогодні ми поговоримо про те, як зв'язати наш GraphQL API з фронтендом за допомогою популярного GraphQL-клієнта — Apollo Client.

Вибір клієнта для роботи з GraphQL на фронтенді

Для взаємодії з GraphQL API на фронтенді можна використовувати різні інструменти. Однак Apollo Client — це не просто клієнт для роботи з GraphQL, це справжній "швейцарський ніж". Він спрощує створення запитів, управління станом даних і кешування, економлячи як час, так і нерви розробників.

Apollo Client автоматично кешує дані, оновлюючи тільки те, що дійсно змінилося, а це значно пришвидшує роботу застосунку. Особливо добре Apollo підходить для React, оскільки інтегрується з ним через зручні хуки, що спрощує взаємодію з API. Окрім цього, у нього є багато корисних можливостей, таких як підписки, завантаження файлів і підтримка пагінації. А якщо раптом виникнуть питання, завжди можна звернутися до детальної документації, яку активно розвиває спільнота.

Встановлення та налаштування Apollo Client

Спочатку переконайтеся, що у вас є React-проєкт. Якщо React ще не встановлений, створимо його з нуля. Далі ми встановимо Apollo Client та його залежності.

Якщо у вас вже є frontend на React, можна пропустити цей крок. В іншому випадку:

npx create-react-app frontend
cd frontend

Тепер нам потрібно встановити бібліотеки Apollo Client та GraphQL:

npm install @apollo/client graphql

Ця команда встановить сам Apollo Client та бібліотеку GraphQL, яка необхідна для роботи із запитами та мутаціями.

Налаштування Apollo Provider

Apollo Client використовує ApolloProvider, щоб зробити клієнт доступним для всіх компонентів React. Для підключення клієнта давайте створимо файл ApolloProvider.js.

Додайте в папці src новий файл ApolloProvider.js:

// src/ApolloProvider.js

import React from 'react';
import {
  ApolloClient,
  InMemoryCache,
  ApolloProvider as Provider,
} from '@apollo/client';

const client = new ApolloClient({
  uri: 'http://localhost:8000/graphql/', // Змініть на вашу адресу GraphQL API
  cache: new InMemoryCache(),
});

export default function ApolloProvider({ children }) {
  return <Provider client={client}>{children}</Provider>;
}

Ми створили Apollo Client, вказавши адресу GraphQL-сервера (uri) та визначивши кешування через InMemoryCache. Цей кеш зберігатиме дані запитів та оновлюватиме їх за потреби.

Тепер підключимо ApolloProvider у вашому застосунку. Знайдіть файл src/index.js і замініть вміст на наступне:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import ApolloProvider from './ApolloProvider';

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

Тепер Apollo Client готовий до використання у вашому застосунку.

Створення запитів з Apollo Client

Час написати перший компонент, який буде виконувати запит до нашого GraphQL API. Ми будемо використовувати хук useQuery від Apollo, щоб виконувати запити.

Припустимо, у нас є API, яке повертає список книг (наприклад, об'єкт Book з полями id, title та author). Ось приклад запиту мовою GraphQL:

query {
  books {
    id
    title
    author
  }
}

Створимо React-компонент, який виконає цей запит.

Спочатку імпортуємо функцію gql з Apollo Client і напишемо запит:

// src/queries.js

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

export const FETCH_BOOKS_QUERY = gql`
  query GetBooks {
    books {
      id
      title
      author
    }
  }
`;

Тепер створимо компонент BooksList, який буде виводити список книг:

// src/components/BooksList.js

import React from 'react';
import { useQuery } from '@apollo/client';
import { FETCH_BOOKS_QUERY } from '../queries';

function BooksList() {
  const { loading, error, data } = useQuery(FETCH_BOOKS_QUERY);

  if (loading) return <p>Завантаження...</p>;
  if (error) return <p>Помилка: {error.message}</p>;

  return (
    <div>
      <h2>Список книг</h2>
      <ul>
        {data.books.map((book) => (
          <li key={book.id}>
            <strong>{book.title}</strong> - {book.author}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default BooksList;

Тепер вставимо компонент BooksList в App.js:

// src/App.js

import React from 'react';
import BooksList from './components/BooksList';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Моя бібліотека</h1>
        <BooksList />
      </header>
    </div>
  );
}

export default App;

Запустіть фронтенд-додаток командою:

npm start

І вуаля! Ви маєте побачити список книг, отриманий через ваш GraphQL API.

Робота з мутаціями

Запити ми реалізували, але що робити, якщо потрібно додати або оновити дані? Тут на сцену виходять мутації. Вони створюються та використовуються аналогічно запитам.

Додамо мутацію, яка буде додавати нову книгу:

// src/mutations.js

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

export const ADD_BOOK_MUTATION = gql`
  mutation AddBook($title: String!, $author: String!) {
    addBook(title: $title, author: $author) {
      id
      title
      author
    }
  }
`;

Створимо компонент із формою для додавання нової книги:

// src/components/AddBookForm.js

import React, { useState } from 'react';
import { useMutation } from '@apollo/client';
import { ADD_BOOK_MUTATION } from '../mutations';
import { FETCH_BOOKS_QUERY } from '../queries'; // Щоб оновити список книг після додавання

function AddBookForm() {
  const [title, setTitle] = useState('');
  const [author, setAuthor] = useState('');
  const [addBook] = useMutation(ADD_BOOK_MUTATION, {
    variables: { title, author },
    refetchQueries: [{ query: FETCH_BOOKS_QUERY }], // Оновлюємо список книг після додавання
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    addBook();
  };

  return (
    <<orm onSubmit={handleSubmit}>
      <h2>Додати книгу</h2>
      <input
        type="text"
        placeholder="Назва"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
      />
      <input
        type="text"
        placeholder="Автор"
        value={author}
        onChange={(e) => setAuthor(e.target.value)}
      />
      <button type="submit">Додати</button>
    </orm>
  );
}

export default AddBookForm;

Додайте цей компонент у ваш App.js або будь-який інший файл:

import AddBookForm from './components/AddBookForm';
// ...
<AddBookForm />
// ...

Тепер ви можете додавати книги та миттєво бачити оновлений список.

Управління станом і кешування

Apollo Client автоматично кешує запити, але ви також можете керувати кешем вручну. Наприклад, якщо ви додали нову книгу, замість повторного виконання запиту можна оновити кеш:

const [addBook] = useMutation(ADD_BOOK_MUTATION, {
  update(cache, { data: { addBook } }) {
    const { books } = cache.readQuery({ query: FETCH_BOOKS_QUERY });
    cache.writeQuery({
      query: FETCH_BOOKS_QUERY,
      data: { books: [...books, addBook] },
    });
  },
});

Це дозволяє уникнути зайвих запитів і зробити застосунок більш чутливим.

Ось так, крок за кроком, ми інтегрували наш GraphQL API з фронтендом на React, використовуючи Apollo Client. Тепер ви знаєте, як виконувати запити, мутації та керувати станом даних. Залишилось тільки застосувати все це в реальному проєкті та зібрати купу лайків від користувачів! 🚀