Tích hợp GraphQL vào React bằng Apollo Client

GraphQL đã trở thành một lựa chọn phổ biến để truy vấn dữ liệu nhờ tính linh hoạt và khả năng chỉ lấy đúng những trường cần thiết. Khi kết hợp với React, một trong những thư viện client mạnh mẽ nhất là Apollo Client. Bài viết này sẽ dẫn bạn qua toàn bộ quá trình tích hợp Apollo Client vào một dự án React từ A đến Z, bao gồm cài đặt, cấu hình, viết truy vấn, mutation và một số mẹo tối ưu hóa.

Giới thiệu về GraphQL và Apollo Client

GraphQL là một ngôn ngữ truy vấn cho API cũng như môi trường chạy để thực hiện những truy vấn đó. Nó cho phép khách hàng xác định chính xác dữ liệu họ cần, giảm thiểu lượng dữ liệu truyền thừa. Apollo Client là thư viện quản lý trạng thái và kết nối với máy chủ GraphQL, cung cấp tính năng caching, phân trang và xử lý lỗi một cách mượt mà.

Tại sao chọn GraphQL?

• Truy vấn linh hoạt: khách hàng chỉ lấy những trường thực sự cần thiết.
• Một điểm cuối duy nhất: không cần quản lý nhiều endpoint REST.
• Công cụ hỗ trợ mạnh mẽ: trình phát hiện lỗi, trình truy cập đồ thị (GraphiQL) giúp phát triển nhanh.
• Tích hợp tốt với React qua Apollo Client, cung cấp hooks useQuery và useMutation đơn giản.

Cài đặt Apollo Client trong dự án React

Trước tiên, đảm bảo bạn đã có một dự án React (ví dụ tạo bằng Create React App hoặc Vite). Sau đó thực hiện các bước sau.

Bước 1: Cài đặt các gói cần thiết

npm install @apollo/client graphql

Bước 2: Tạo ApolloClient instance

import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client';

const client = new ApolloClient({
  link: new HttpLink({ uri: 'https://api.example.com/graphql' }),
  cache: new InMemoryCache(),
});

Bước 3: Đưa ApolloProvider vào gốc ứng dụng

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

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

Định nghĩa các truy vấn và mutation

Sau khi Apollo Client được cấu hình, bạn có thể bắt đầu viết các truy vấn và mutation bằng cách sử dụng hàm gql và các hook cung cấp bởi thư viện.

Ví dụ truy vấn lấy danh sách bài viết

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

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

function PostsList() {
  const { loading, error, data } = useQuery(GET_POSTS);
  if (loading) return <p>Đang tải...</p>;
  if (error) return <p>Lỗi: {error.message}</p>;

  return (
    <ul>
      {data.posts.map(post => (
        <li key={post.id}>
          <h3>{post.title}</h3>
          <p>Tác giả: {post.author}</p>
        </li>
      )))
    </ul>
  );
}

Ví dụ mutation tạo bài viết mới

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

const CREATE_POST = gql`
  mutation CreatePost($title: String!, $author: String!) {
    createPost(title: $title, author: $author) {
      id
      title
      author
    }
  }
`;

function AddPostForm() {
  let titleInput;
  let authorInput;
  const [createPost] = useMutation(CREATE_POST);

  const handleSubmit = e => {
    e.preventDefault();
    createPost({
      variables: {
        title: titleInput.value,
        author: authorInput.value
      }
    });
    titleInput.value = '';
    authorInput.value = '';
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        ref={node => { titleInput = node; }}
        placeholder='Tiêu đề'
      />
      <input
        ref={node => { authorInput = node; }}
        placeholder='Tác giả'
      />
      <button type='submit'>Thêm bài viết</button>
    </form>
  );
}

Xử lý trạng thái và caching

Apollo Client tự động lưu trữ kết quả truy vấn trong bộ nhớ cache InMemoryCache. Khi một truy vấn tương tự được thực hiện lại, dữ liệu sẽ được lấy từ cache thay vì gửi yêu cầu lại tới máy chủ, giúp giảm tải mạng và tăng tốc độ phản ứng. Bạn cũng có thể thủ công cập nhật cache sau khi thực hiện mutation bằng cách sử dụng hàm update hoặc các tùy chọn refetchQueries.

Tối ưu hiệu suất với phân trang và truy cập song song

Đối với danh sách lớn, việc sử dụng phân trang dựa trên con trỏ (cursor-based pagination) hoặc số trang giúp giảm lượng dữ liệu truyền mỗi lần. Apollo Client hỗ trợ phân trang thông qua việc kết hợp các truy vấn và sử dụng hàm fetchMore. Ngoài ra, bạn có thể thực hiện nhiều truy vấn song song bằng cách sử dụng Promise.all hoặc sử dụng hook useQueries để lấy dữ liệu từ nhiều nguồn khác nhau mà không chặn render.

Kết luận

Việc tích hợp GraphQL vào React bằng Apollo Client mang lại nhiều lợi ích về hiệu suất, khả năng mở rộng và trải nghiệm phát triển. Qua bài viết này, bạn đã học cách cài đặt, cấu hình, viết truy vấn và mutation, cũng như một số kỹ thuật tối ưu như caching và phân trang. Áp dụng những kiến thức này sẽ giúp bạn xây dựng các ứng dụng web hiện đại, linh hoạt và đáp ứng tốt nhu cầu của người dùng.