Cara menulis pemalam pangkalan data React Query tersuai

Cara menulis pemalam pangkalan data React Query tersuai

Menggunakan perpustakaan React Query dalam aplikasi React, kami boleh mengurus dan menyimpan data tak segerak dengan mudah. Walau bagaimanapun, dalam beberapa kes, kami mungkin perlu menyimpan data dalam pangkalan data tempatan supaya ia masih boleh diakses di luar talian.

Inilah sebabnya pemalam pangkalan data React Query tersuai sangat berguna. Dengan mencipta pemalam tersuai, kami boleh menyepadukan React Query dengan pangkalan data pilihan kami seperti IndexedDB, LocalStorage atau SQLite.

Berikut ialah cara untuk melaksanakan pemalam pangkalan data React Query tersuai.

Pertama, kita perlu mencipta cangkuk useCustomCache dan menulis logik interaksi dengan pangkalan data di dalamnya. Cangkuk ini akan dipanggil pada setiap permintaan dan menyimpan data dalam pangkalan data jika permintaan itu berjaya. useCustomCache 钩子，并在其中编写与数据库的交互逻辑。该钩子将在每次请求时被调用，并在请求成功时将数据存储在数据库中。

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

// 导入和设置数据库，这里以 IndexedDB 为例
import { openDB } from 'idb';

const dbPromise = openDB('myDatabase', 1, {
  upgrade(db) {
    db.createObjectStore('myData');
  },
});

async function useCustomCache(key) {
  const db = await dbPromise;
  const tx = db.transaction('myData', 'readwrite');
  const store = tx.objectStore('myData');

  const query = useQuery(key, async () => {
    const data = await fetch(`https://api.example.com/data/${key}`);
    await store.put(data, key);
    return data;
  });

  const mutation = useMutation(async (newData) => {
    await fetch(`https://api.example.com/data/${key}`, {
      method: 'PUT',
      body: JSON.stringify(newData),
    });
    await store.put(newData, key);
  });

  return { ...query, ...mutation };
}

export default useCustomCache;

现在，我们可以在我们的组件中使用 useCustomCache 钩子，以获取和更新数据：

import useCustomCache from './useCustomCache';

function MyComponent() {
  const { data, isLoading, error, mutate } = useCustomCache('myData');

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

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

  return (
    <div>
      <p>Data: {data}</p>
      <button onClick={() => mutate('newData')}>Update Data</button>
    </div>
  );
}

export default MyComponent;

以上代码示例中，我们创建了一个名为 useCustomCache 的自定义钩子。在这个钩子中，我们使用了 useQuery 和 useMutationrrreee

rrreee

Perlu diingat bahawa contoh di atas hanyalah rujukan tentang cara melaksanakan pemalam pangkalan data tersuai. Pelaksanaan yang tepat mungkin berbeza bergantung pada jenis pangkalan data yang digunakan.

Atas ialah kandungan terperinci Cara menulis pemalam pangkalan data React Query tersuai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!