使用 React Query 資料庫插件進行即時資料更新

使用React Query資料庫外掛程式進行即時資料更新

React Query是一個強大的資料管理工具，可以幫助我們簡化在React應用程式中處理資料的過程。它提供了針對數據獲取、快取和更新等操作的優雅解決方案。本文將介紹如何使用React Query外掛程式實現即時資料更新的功能，並提供具體的程式碼範例。

為了更好地理解這個過程，我們將以一個簡單的任務管理應用為例。我們假設應用程式中有一個任務列表，當使用者完成某個任務時，我們需要即時更新任務的狀態。

首先，我們需要先安裝React Query外掛。在終端機中執行以下命令：

npm install react-query

安裝完成後，我們可以在應用程式的根元件中引入React Query，並建立一個全域的QueryClient實例。程式碼如下：

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

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* 应用组件 */}
    </QueryClientProvider>
  );
}

export default App;

接下來，在我們需要即時更新資料的元件中，透過使用React Query提供的useMutation鉤子來建立一個資料更新操作。我們可以在任務完成按鈕的點擊事件處理函數中定義更新邏輯。具體程式碼如下：

import { useMutation, useQueryClient } from 'react-query';

function TaskItem({ task }) {
  const queryClient = useQueryClient();

  const completeTaskMutation = useMutation(async () => {
    // 发送异步请求完成任务
    await fetch(`/api/tasks/${task.id}`, { method: 'PUT', body: JSON.stringify({ completed: true }) });

    // 手动更新缓存
    queryClient.setQueryData(['tasks', task.id], { ...task, completed: true });
  });

  const handleCompleteClick = () => {
    completeTaskMutation.mutate();
  }

  return (
    <div>
      <p>{task.name}</p>
      <button onClick={handleCompleteClick}>完成</button>
    </div>
  );
}

在這段程式碼中，我們先透過呼叫useMutation來建立一個名為completeTaskMutation的變數。它是一個包含了mutate函數的對象，用於觸發資料更新操作。

在按鈕的點擊事件處理函數中，我們呼叫completeTaskMutation.mutate()來觸發資料更新。這將呼叫我們傳入useMutation的非同步函數，並在完成非同步請求後，手動更新快取中的資料。這裡我們使用setQueryData方法來更新快取中的任務數據，透過傳入['tasks', task.id]作為第一個參數表示這是一個針對任務清單的查詢操作。

最後，在任務清單元件中，我們利用useQuery鉤子來取得任務資料。程式碼如下所示：

import { useQuery } from 'react-query';

function TaskList() {
  const { data } = useQuery('tasks', async () => {
    const response = await fetch('/api/tasks');
    const data = await response.json();
    return data;
  });

  return (
    <div>
      {data && data.map(task => (
        <TaskItem key={task.id} task={task} />
      ))}
    </div>
  );
}

在這段程式碼中，我們呼叫useQuery('tasks', ...)來發起一個查詢操作。第一個參數是用來標識查詢的鍵，這裡我們使用了'tasks'。第二個參數是一個非同步函數，用於取得任務清單資料。我們可以在這個函數中發送非同步請求，並回傳回應資料。 React Query會自動快取這個數據，並在需要時進行更新。

透過以上的程式碼範例，我們成功地使用React Query外掛程式實現了即時資料更新的功能。無論是新建數據、更新數據或刪除數據，React Query都可以幫助我們管理數據的獲取和更新過程，大大簡化了應用程式中處理數據的複雜度。希望這篇文章對你學習React Query的使用有所幫助！

以上是使用 React Query 資料庫插件進行即時資料更新的詳細內容。更多資訊請關注PHP中文網其他相關文章！