Bagaimana untuk menggunakan pertanyaan pangkalan data dengan React Query?

Bagaimana untuk menggunakan pertanyaan pangkalan data dalam React Query?

Pengenalan: React Query ialah perpustakaan pengurusan negeri yang berkuasa, yang merupakan pilihan terbaik untuk mengurus permintaan rangkaian dan cache data dalam aplikasi React. Ia menyediakan cara yang mudah tetapi berkuasa untuk mengendalikan pertanyaan data, membolehkan kami berinteraksi dengan pangkalan data dengan mudah. Artikel ini akan memberikan contoh kod terperinci tentang cara menggunakan pertanyaan pangkalan data dengan React Query.

1. Persediaan
Sebelum bermula, pastikan React Query dipasang dan terdapat pangkalan data yang tersedia untuk kami gunakan. Ini menganggap pangkalan data kami ialah MongoDB, tetapi anda boleh menggunakan jenis pangkalan data lain.

2. Buat klien React Query
Mula-mula, kami perlu mencipta klien React Query untuk mengurus pertanyaan data kami. Dalam fail kemasukan projek (biasanya index.js), import QueryClient dan QueryClientProvider dan buat objek klien React Query global, dan kemudian lulus ia kepada QueryClientProvider: index.js）中，导入 QueryClient 和 QueryClientProvider，并创建一个全局的 React Query 客户端对象，然后将其传递给 QueryClientProvider：

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

const queryClient = new QueryClient();

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

三、定义数据库查询函数
在开始使用数据库查询之前，我们需要将数据库查询封装为一个可重复使用的函数。这个函数可以接受查询参数，并返回一个 Promise，从而允许我们在 React Query 中使用异步函数。下面是一个示例数据库查询函数：

async function fetchDataFromDatabase(queryParams) {
  return await fetch('/api/query', {
    method: 'POST',
    body: JSON.stringify(queryParams),
    headers: {
      'Content-Type': 'application/json'
    }
  })
  .then(response => response.json())
  .then(data => {
    // 处理从数据库获取的数据
    return data;
  })
  .catch(error => {
    // 处理错误
    throw new Error('数据库查询失败');
  });
}

这个函数是一个异步函数，它使用 fetch API 发起一个 POST 请求到后端的 /api/query 接口，并将查询参数作为请求体发送。然后，它将获取到的响应数据解析为 JSON，并在成功时返回数据，否则抛出一个错误。

四、在 React Query 中使用数据库查询
现在我们已经有了一个可重复使用的数据库查询函数，接下来我们可以在组件中使用 React Query 进行数据查询了。

首先，导入 useQuery 钩子函数，并使用它创建一个查询。我们将使用 useQuery 钩子函数来进行数据获取，并传递一个查询键（通常是一个字符串），以及一个用于触发查询的函数。

import { useQuery } from 'react-query';

function App() {
  const { data, isLoading, error } = useQuery('fetchData', fetchDataFromDatabase);
  
  if (isLoading) {
    return <div>Loading...</div>;
  }
  
  if (error) {
    return <div>Error: {error.message}</div>;
  }
  
  return (
    <div>
      {/* 显示从数据库获取的数据 */}
      {data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

在上面的代码中，我们使用了一个叫做 fetchData 的查询键，并将 fetchDataFromDatabase 函数作为查询函数传递给 useQuery。useQuery 钩子函数将返回一个包含 data、isLoading 和 error 等属性的对象，我们可以根据这些属性来处理不同的状态。

通过上述代码，我们可以根据 isLoading 状态来显示一个加载中的提示信息，通过 error 状态来显示一个错误信息，并通过 data 状态来渲染从数据库获取的数据。

五、渲染在 React Query 中的数据
对于从数据库获取的数据，我们可以在组件中使用 data 状态进行渲染。在上述示例中，我们将从数据库获取的每个数据项渲染为一个包含 id 和 name 的 divrrreee

3. Tentukan fungsi pertanyaan pangkalan data

Sebelum mula menggunakan pertanyaan pangkalan data, kita perlu merangkum pertanyaan pangkalan data ke dalam fungsi boleh guna semula. Fungsi ini boleh menerima parameter pertanyaan dan mengembalikan Promise, membolehkan kami menggunakan fungsi tak segerak dalam React Query. Berikut ialah contoh fungsi pertanyaan pangkalan data:

rrreee

Fungsi ini ialah fungsi tak segerak yang menggunakan API fetch untuk memulakan permintaan POST ke antara muka /api/query backend , dan Hantar parameter pertanyaan sebagai badan permintaan. Ia kemudian menghuraikan data respons yang diambil ke dalam JSON dan mengembalikan data tentang kejayaan, jika tidak, ia akan menimbulkan ralat.

4. Gunakan pertanyaan pangkalan data dalam React Query

Sekarang kami mempunyai fungsi pertanyaan pangkalan data boleh guna semula, kami boleh menggunakan React Query dalam komponen untuk membuat pertanyaan data.

🎜Mula-mula, import fungsi cangkuk useQuery dan gunakannya untuk membuat pertanyaan. Kami akan menggunakan fungsi cangkuk useQuery untuk mendapatkan semula data, menghantar kunci pertanyaan (biasanya rentetan) dan fungsi untuk mencetuskan pertanyaan. 🎜rrreee🎜Dalam kod di atas, kami menggunakan kunci pertanyaan yang dipanggil fetchData dan lulus fungsi fetchDataFromDatabase sebagai fungsi pertanyaan kepada useQuery . Fungsi cangkuk useQuery akan mengembalikan objek yang mengandungi sifat seperti data, isLoading dan error Kami boleh menggunakannya hartanah untuk mengendalikan negeri yang berbeza. 🎜🎜Melalui kod di atas, kami boleh memaparkan mesej gesaan memuatkan mengikut keadaan isLoading, memaparkan mesej ralat melalui keadaan error dan memaparkan mesej ralat melalui data nyatakan untuk memaparkan data yang diperoleh daripada pangkalan data. 🎜🎜5 Data yang diberikan dalam React Query🎜Untuk data yang diperoleh daripada pangkalan data, kita boleh menggunakan keadaan data dalam komponen untuk membuat. Dalam contoh di atas, kami memberikan setiap item data yang diambil daripada pangkalan data sebagai elemen div yang mengandungi id dan name. 🎜🎜Ini hanyalah contoh mudah, anda boleh membuat pemaparan data yang lebih kompleks mengikut keperluan aplikasi anda. 🎜🎜6. Ringkasan🎜Dengan menggunakan React Query, kami boleh menggunakan pertanyaan pangkalan data dengan mudah dalam aplikasi React. Dalam artikel ini, kami mula-mula mencipta klien React Query, kemudian menentukan fungsi pertanyaan pangkalan data boleh guna semula dan menggunakannya dalam komponen React Query. Akhir sekali, kami mempelajari cara mengendalikan pemuatan dan mesej ralat berdasarkan status pertanyaan yang berbeza dan memaparkan data yang diambil daripada pangkalan data. 🎜🎜Saya harap artikel ini dapat membantu anda lebih memahami cara menggunakan pertanyaan pangkalan data dalam React Query, dan memberikan beberapa idea dan rujukan untuk pembangunan projek anda. Selamat membangun dengan React Query! 🎜

Atas ialah kandungan terperinci Bagaimana untuk menggunakan pertanyaan pangkalan data dengan React Query?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!