利用 React Query 資料庫外掛程式實現資料自動同步

利用 React Query 資料庫外掛程式實現資料自動同步

隨著前端開發日益複雜，資料管理變得癒發重要。 React Query 是一個強大的資料庫插件，為我們提供了方便的資料狀態管理和自動同步功能。在本文中，我們將探討如何利用 React Query 進行資料自動同步，並提供具體的程式碼範例。

一、了解 React Query

React Query 是一個專注於資料管理和同步的函式庫，它建構在 React 的基礎之上，提供了易於使用的 API 和強大的功能。 React Query 的核心概念是查詢（Query），一個查詢可以請求遠端數據，將資料保存在本地，並自動處理資料的載入、快取和同步。同時，React Query 也提供了清晰的資料狀態管理和錯誤處理機制。這些都使得我們可以更簡單有效率地處理資料。

二、資料自動同步的實作

1. 安裝 React Query

首先，我們需要在專案中安裝 React Query。可以透過npm 或yarn 進行安裝：

npm install react-query
# 或者
yarn add react-query

安裝完成後，在應用程式根元件中匯入React Query：

import { QueryClient, QueryClientProvider } from 'react-query';

2. 建立QueryClient

#在應用程式中建立一個QueryClient 實例，用於管理資料請求和狀態：

const queryClient = new QueryClient();

並將其包裝在QueryClientProvider 中，以便在整個應用程式中存取QueryClient 提供的功能：

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

3. #宣告查詢

在需要使用資料的元件中，我們可以使用useQuery 鉤子宣告一個查詢。 useQuery 接收一個查詢鍵（query key）和一個非同步函數，用於從遠端伺服器取得資料：

import { useQuery } from 'react-query';

function MyComponent() {
  const { data, isLoading } = useQuery('todos', fetchTodos);

  if (isLoading) {
    return <LoadingSpinner />;
  }

  return (
    <ul>
      {data.map((todo) => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
}

async function fetchTodos() {
  const response = await fetch('/api/todos');
  const data = await response.json();
  return data;
}

在這個例子中，我們聲明了一個名為"todos" 的查詢，該查詢會調用fetchTodos 函數從伺服器取得待辦事項資料。當資料正在載入時，展示一個載入中的 spinner；載入完成後，渲染待辦事項清單。

4. 更新資料

React Query 可以自動為我們處理資料的載入和緩存，但保持資料的即時性需要手動處理資料的更新。我們可以使用 useMutation 鉤子來輕鬆實現資料的更新操作。

import { useMutation } from 'react-query';

function MyComponent() {
  const { data, isLoading } = useQuery('todos', fetchTodos);
  const mutation = useMutation(updateTodo);

  async function handleUpdate(id, status) {
    await mutation.mutateAsync({ id, status });
  }

  if (isLoading) {
    return <LoadingSpinner />;
  }

  return (
    <ul>
      {data.map((todo) => (
        <li key={todo.id}>
          {todo.title}
          <button onClick={() => handleUpdate(todo.id, 'completed')}>
            完成
          </button>
        </li>
      ))}
    </ul>
  );
}

async function updateTodo({ id, status }) {
  await fetch(`/api/todos/${id}`, {
    method: 'PUT',
    body: JSON.stringify({ status }),
    headers: { 'Content-Type': 'application/json' },
  });
}

在這個例子中，我們使用 useMutation 鉤子宣告了一個名為 mutation 的變量，該變數包含在資料更新時呼叫的函數。透過點擊按鈕觸發 handleUpdate 函數，完成對應的待辦事項，並向伺服器發送更新請求。

5. 自動同步資料

React Query 也提供了自動同步的功能，它允許我們在資料變更時自動更新介面。我們可以使用 useQuery 的配置項目中的 refetchOnMount 和 refetchInterval 選項來實現自動觸發資料查詢和更新。

function MyComponent() {
  const { data, isLoading } = useQuery('todos', fetchTodos, {
    refetchOnMount: true,
    refetchInterval: 3000, // 每 3 秒自动更新一次数据
  });

  // ...
}

在這個範例中，我們將 refetchOnMount 設為 true，表示元件首次掛載時會觸發一次資料查詢。同時，我們將 refetchInterval 設定為 3000，表示每隔 3 秒就會觸發一次資料查詢，實現資料的自動更新。

三、總結

透過利用 React Query 資料庫插件，我們可以輕鬆實現資料的自動同步功能。本文簡要介紹了 React Query 的基本用法，並提供了具體的程式碼範例。希望本文能幫助你更好地理解和使用 React Query，並在實際專案中發揮作用。

以上是利用 React Query 資料庫外掛程式實現資料自動同步的詳細內容。更多資訊請關注PHP中文網其他相關文章！