使用 React Query 和資料庫進行資料管理：最佳實踐指南

使用React Query 和資料庫進行資料管理：最佳實踐指南

#引言：
在現代的前端開發中，管理資料是一個非常重要的任務。隨著使用者對高效能和穩定性的需求不斷增加，我們需要考慮如何更好地組織和管理應用程式的資料。 React Query 是一個功能強大且易於使用的資料管理工具，它提供了一種簡單而靈活的方式來處理資料的取得、更新和快取。本文將介紹如何使用 React Query 和資料庫進行資料管理的最佳實踐，並提供具體的程式碼範例。

一、安裝 React Query 和相關依賴
首先，我們需要安裝 React Query 和相關依賴。可以使用 npm 或 yarn 來安裝這些套件。

$ npm install react-query react-router-dom

二、設定 React QueryProvider
在入口檔案中，我們需要將 React QueryProvider 新增到應用程式中。 React QueryProvider 負責將資料管理相關的上下文提供給應用程式中的元件。

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

const queryClient = new QueryClient();

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

三、發起查詢請求
在 React Query 中，我們可以使用 useQuery 鉤子來啟動查詢請求。 useQuery 鉤子的第一個參數是一個字串，代表要取得的資料的鍵。第二個參數是一個非同步函數，該函數用於實際獲取資料的操作。

import { useQuery } from 'react-query';

function UserList() {
  const { isLoading, data, error } = useQuery('users', async () => {
    const response = await fetch('/api/users');
    const data = await response.json();
    return data;
  });

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

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

四、更新數據
除了獲取數據，React Query 還提供了 useMutation 鉤子來處理數據的更新。 useMutation 鉤子接受一個非同步函數，該函數用於實際更新資料的操作。它會傳回一個數組，其中第一個元素是一個函數，用於觸發更新操作。另外，在發起更新請求時，我們也可以使用一些選項來控制其行為。

import { useMutation } from 'react-query';

function UpdateUserForm({ user }) {
  const mutation = useMutation(updatedUser => {
    return fetch(`/api/users/${user.id}`, {
      method: 'PUT',
      body: JSON.stringify(updatedUser),
    });
  });

  const handleSubmit = event => {
    event.preventDefault();
    const formData = new FormData(event.target);
    const updatedUser = {
      name: formData.get('name'),
      age: formData.get('age'),
    };
    mutation.mutate(updatedUser);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" defaultValue={user.name} />
      <input type="number" name="age" defaultValue={user.age} />
      <button type="submit">Update</button>
    </form>
  );
}

五、快取資料
React Query 預設會自動快取查詢的數據，並在需要時進行更新。我們可以使用 useQueryClient 鉤子和 queryClient.setQueryData 方法來手動更新資料。透過查詢的鍵來標識和更新資料。

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

function UserList() {
  const queryClient = useQueryClient();

  const { isLoading, data, error } = useQuery('users', async () => {
    const response = await fetch('/api/users');
    const data = await response.json();
    return data;
  });

  const handleUpdateUser = user => {
    // update the data in the cache
    queryClient.setQueryData('users', old => {
      const updatedData = old.map(u => {
        if (u.id === user.id) {
          return {
            ...u,
            name: user.name,
            age: user.age,
          };
        }
        return u;
      });
      return updatedData;
    });
  };

  // ...
}

六、使用資料庫
React Query 並不限制我們使用何種方式來取得資料。如果我們的資料儲存在資料庫中，只需要在查詢函數中編寫對應的程式碼來操作資料庫即可。

import { useQuery } from 'react-query';
import { db } from 'path/to/database';

function UserList() {
  const { isLoading, data, error } = useQuery('users', async () => {
    const users = await db.get('users');
    return users;
  });

  // ...
}

七、總結
透過使用 React Query 和資料庫，我們可以更好地組織和管理應用程式中的數據，並提供良好的使用者體驗。本文提供了使用 React Query 進行資料管理的最佳實務指南，並提供了具體的程式碼範例。希望可以幫助你！

以上是使用 React Query 和資料庫進行資料管理：最佳實踐指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！