Gunakan pemalam pangkalan data React Query untuk mencapai penyegerakan data automatik

Gunakan pemalam pangkalan data React Query untuk mencapai penyegerakan data automatik

Apabila pembangunan bahagian hadapan menjadi semakin kompleks, pengurusan data menjadi lebih dan lebih penting. React Query ialah pemalam pangkalan data yang berkuasa yang memberikan kami pengurusan status data yang mudah dan fungsi penyegerakan automatik. Dalam artikel ini, kami akan meneroka cara memanfaatkan React Query untuk penyegerakan data automatik dan menyediakan contoh kod khusus.

1 Memahami React Query

React Query ialah perpustakaan yang memfokuskan pada pengurusan data dan penyegerakan. Ia dibina berdasarkan React dan menyediakan API yang mudah digunakan dan Ciri yang berkuasa. Konsep teras React Query ialah pertanyaan Sesuatu pertanyaan boleh meminta data jauh, menyimpan data secara setempat dan secara automatik mengendalikan pemuatan, caching dan penyegerakan data. Pada masa yang sama, React Query juga menyediakan pengurusan status data yang jelas dan mekanisme pengendalian ralat. Ini membolehkan kami memproses data dengan lebih mudah dan cekap.

2. Pelaksanaan penyegerakan data automatik

1. Install React Query

#🎜🎜🎜, #Pertama-tama kita perlu memasang dalam projek React Query. Ia boleh dipasang melalui npm atau benang:

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

Selepas pemasangan selesai, import React Query dalam komponen root aplikasi:

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

Create QueryClient#🎜 🎜## 🎜🎜#
2. Buat contoh QueryClient dalam aplikasi untuk mengurus permintaan data dan status:

const queryClient = new QueryClient();

dan bungkusnya dalam QueryClientProvider untuk mengakses fungsi yang disediakan oleh QueryClient sepanjang aplikasi ：

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

Isytihar pertanyaan

3. Dalam komponen yang perlu menggunakan data, kita boleh menggunakan cangkuk useQuery untuk mengisytiharkan pertanyaan. useQuery menerima kunci pertanyaan dan fungsi tak segerak untuk mendapatkan data dari pelayan jauh:

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;
}

Dalam contoh ini, kami mengisytiharkan pertanyaan bernama "todos", yang Fungsi fetchTodos dipanggil untuk mendapatkan tugasan data daripada pelayan. Semasa data sedang dimuatkan, paparkan pemutar pemuatan apabila pemuatan selesai, berikan senarai tugasan.

Kemas kini data

4. React Query boleh mengendalikan pemuatan dan caching data secara automatik untuk kami, tetapi mengekalkan sifat masa nyata data memerlukan pemprosesan manual memperbaharui data. Kita boleh menggunakan cangkuk useMutation untuk melaksanakan operasi kemas kini data dengan mudah.

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' },
  });
}

Dalam contoh ini, kami menggunakan cangkuk useMutation untuk mengisytiharkan pembolehubah yang dipanggil mutasi yang mengandungi fungsi yang dipanggil apabila data dikemas kini. Cetuskan fungsi handleUpdate dengan mengklik butang, lengkapkan item tugasan yang sepadan dan hantar permintaan kemas kini kepada pelayan.

Segerakkan data secara automatik

5. React Query juga menyediakan fungsi penyegerakan automatik, yang membolehkan kami mengemas kini antara muka secara automatik apabila data berubah. Kita boleh menggunakan pilihan refetchOnMount dan refetchInterval dalam item konfigurasi useQuery untuk mencetuskan pertanyaan dan kemas kini data secara automatik.

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

  // ...
}

Dalam contoh ini, kami menetapkan refetchOnMount kepada benar, yang bermaksud bahawa pertanyaan data akan dicetuskan apabila komponen dipasang buat kali pertama. Pada masa yang sama, kami menetapkan refetchInterval kepada 3000, yang bermaksud bahawa pertanyaan data akan dicetuskan setiap 3 saat untuk merealisasikan kemas kini data secara automatik.

3. Ringkasan

Dengan menggunakan pemalam pangkalan data React Query, kami boleh merealisasikan fungsi penyegerakan automatik data. Artikel ini memperkenalkan secara ringkas penggunaan asas React Query dan menyediakan contoh kod khusus. Saya harap artikel ini dapat membantu anda memahami dengan lebih baik dan menggunakan React Query serta memainkan peranan dalam projek sebenar.

Atas ialah kandungan terperinci Gunakan pemalam pangkalan data React Query untuk mencapai penyegerakan data automatik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!