**Giới thiệu** Khi xây dựng các ứng dụng React đa nền tảng, bạn thường chia sẻ mã giữa React Web và React Native để tiết kiệm thời gian phát triển và duy trì. Một thách thức phổ biến là đồng bộ hóa dữ liệu phía máy khách trên cả hai nền tảng. Trong bài viết này, chúng ta sẽ khám phá cách sử dụng React Query để duy trì một nguồn dữ liệu duy nhất, loại bỏ logic lấy dữ liệu trùng lặp và tăng hiệu suất của toàn bộ ứng dụng. **Tại sao cần đồng bộ hóa dữ liệu?** - **Trải nghiệm người dùng thống nhất** – Người dùng trên web hoặc di động sẽ thấy dữ liệu được đồng bộ hóa theo thời gian thực. - **Giảm thiểu công sức bảo trì** – Chỉ cần viết logic lấy dữ liệu một lần và đảm bảo nó hoạt động trên cả hai nền tảng. - **Caching nhất quán** – React Query cung cấp caching, làm mới và đồng bộ hóa dữ liệu giữa các quy trình một cách hiệu quả. **Sử dụng React Query làm nguồn sự thật duy nhất** 1. **Tạo một shared query client** ```typescript // shared/queryClient.ts import { QueryClient } from '@tanstack/react-query'; export const queryClient = new QueryClient(); ``` Xuất client này cho cả hai nền tảng và nhập nó vào provider. 2. **Xây dựng các query key chung** Sử dụng các key có thể tái sử dụng được xác định bởi một helper module: ```typescript // shared/queryKeys.ts export const queryKeys = { users: () => ['users'] as const, post: (id: string) => ['post', id] as const, }; ``` 3. **Tạo các custom hooks** Custom hooks giúp che giấu sự khác biệt về nền tảng, ví dụ: ```typescript // shared/hooks/useUsers.ts import { useQuery } from '@tanstack/react-query'; import { queryKeys } from '../queryKeys'; import { fetchUsers } from '../api'; export const useUsers = () => useQuery(queryKeys.users(), fetchUsers); ``` **Lời khuyên thực tế** - **Đồng bộ hóa trạng thái offline** – Sử dụng React Query với các giải pháp offline như `react-query/devtools` hoặc `React Native Offline` để đảm bảo tính khả dụng khi mất kết nối. - **Tận dụng queryFn chung** – Định nghĩa một hàm gọi API hoạt động trên cả hai nền tảng (ví dụ: sử dụng một wrapper fetch chung). - **Tận dụng DevTools** – Cài đặt React Query Devtools trên cả hai nền tảng để gỡ lỗi các vấn đề đồng bộ hóa. - **Tận dụng query invalidation** – Sau khi ghi dữ liệu (tạo/bạn), gọi `queryClient.invalidateQueries` bằng cùng một query key để kích hoạt việc làm mới dữ liệu trên cả web và thiết bị di động. **Kết luận** Bằng cách tập trung logic lấy dữ liệu trong React Query và che giấu sự khác biệt về nền tảng bằng các custom hooks, bạn sẽ có được một kho mã nguồn duy nhất, hoạt động hiệu quả. Cách tiếp cận này giúp giảm thiểu lỗi, cải thiện trải nghiệm người dùng và đơn giản hóa quy trình phát triển ứng dụng React đa nền tảng của bạn.