[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog:post:vi:tich-hop-graphql-vao-react-bang-apollo-client":3},{"slug":4,"lang":5,"title":6,"summary":7,"date":8,"tags":9,"tag_slugs":15,"thumbnail_url":16,"translations":17,"body":18,"asset_base":19},"tich-hop-graphql-vao-react-bang-apollo-client","vi","Tích hợp GraphQL vào React bằng Apollo Client","Bài viết hướng dẫn cách tích hợp GraphQL vào ứng dụng React sử dụng Apollo Client, từ cài đặt, cấu hình cho tới ví dụ truy vấn và mutation thực tế.","2026-06-18",[10,11,12,13,14],"graphql","react","apollo","frontend","api",[10,11,12,13,14],"https://blog-api.ro-proxy.com/api/blog/posts/tich-hop-graphql-vao-react-bang-apollo-client/thumbnail.svg?lang=vi",[5],"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.\n\n## Giới thiệu về GraphQL và Apollo Client\n\nGraphQL 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à.\n\n## Tại sao chọn GraphQL?\n\n- Truy vấn linh hoạt: khách hàng chỉ lấy những trường thực sự cần thiết.\n- Một điểm cuối duy nhất: không cần quản lý nhiều endpoint REST.\n- 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.\n- Tích hợp tốt với React qua Apollo Client, cung cấp hooks useQuery và useMutation đơn giản.\n\n## Cài đặt Apollo Client trong dự án React\n\nTrướ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.\n\n### Bước 1: Cài đặt các gói cần thiết\n\n```bash\nnpm install @apollo/client graphql\n```\n\n### Bước 2: Tạo ApolloClient instance\n\n```javascript\nimport { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client';\n\nconst client = new ApolloClient({\n  link: new HttpLink({ uri: 'https://api.example.com/graphql' }),\n  cache: new InMemoryCache(),\n});\n```\n\n### Bước 3: Đưa ApolloProvider vào gốc ứng dụng\n\n```javascript\nimport { ApolloProvider } from '@apollo/client';\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport App from './App';\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(\n  \u003CApolloProvider client={client}>\n    \u003CApp />\n  \u003C/ApolloProvider>\n);\n```\n\n## Định nghĩa các truy vấn và mutation\n\nSau 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.\n\n### Ví dụ truy vấn lấy danh sách bài viết\n\n```javascript\nimport { gql, useQuery } from '@apollo/client';\n\nconst GET_POSTS = gql`\n  query GetPosts {\n    posts {\n      id\n      title\n      author\n    }\n  }\n`;\n\nfunction PostsList() {\n  const { loading, error, data } = useQuery(GET_POSTS);\n  if (loading) return \u003Cp>Đang tải...\u003C/p>;\n  if (error) return \u003Cp>Lỗi: {error.message}\u003C/p>;\n\n  return (\n    \u003Cul>\n      {data.posts.map(post => (\n        \u003Cli key={post.id}>\n          \u003Ch3>{post.title}\u003C/h3>\n          \u003Cp>Tác giả: {post.author}\u003C/p>\n        \u003C/li>\n      )))\n    \u003C/ul>\n  );\n}\n```\n\n### Ví dụ mutation tạo bài viết mới\n\n```javascript\nimport { gql, useMutation } from '@apollo/client';\n\nconst CREATE_POST = gql`\n  mutation CreatePost($title: String!, $author: String!) {\n    createPost(title: $title, author: $author) {\n      id\n      title\n      author\n    }\n  }\n`;\n\nfunction AddPostForm() {\n  let titleInput;\n  let authorInput;\n  const [createPost] = useMutation(CREATE_POST);\n\n  const handleSubmit = e => {\n    e.preventDefault();\n    createPost({\n      variables: {\n        title: titleInput.value,\n        author: authorInput.value\n      }\n    });\n    titleInput.value = '';\n    authorInput.value = '';\n  };\n\n  return (\n    \u003Cform onSubmit={handleSubmit}>\n      \u003Cinput\n        ref={node => { titleInput = node; }}\n        placeholder='Tiêu đề'\n      />\n      \u003Cinput\n        ref={node => { authorInput = node; }}\n        placeholder='Tác giả'\n      />\n      \u003Cbutton type='submit'>Thêm bài viết\u003C/button>\n    \u003C/form>\n  );\n}\n```\n\n## Xử lý trạng thái và caching\n\nApollo 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.\n\n## Tối ưu hiệu suất với phân trang và truy cập song song\n\nĐố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.\n\n## Kết luận\n\nViệ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.\n","https://blog-api.ro-proxy.com/api/blog/posts/tich-hop-graphql-vao-react-bang-apollo-client/assets"]