Menggunakan pangkalan data untuk menapis dan mengisih data dalam React Query

Gunakan pangkalan data dalam React Query untuk penapisan dan pengisihan data

React Query ialah perpustakaan untuk mengurus data, kuasanya terletak pada keupayaannya untuk berinteraksi dengan pangkalan data untuk melaksanakan fungsi penapisan dan pengisihan data. Dalam artikel ini, kami akan menunjukkan contoh konkrit tentang cara menapis dan mengisih data menggunakan pangkalan data dalam React Query.

Pertama, untuk kemudahan demonstrasi, kami menganggap bahawa kami menggunakan jadual pangkalan data bernama "todos", yang mengandungi medan berikut: id, tajuk, perihalan, status, created_at.

Seterusnya, kita perlu memasang dan mengkonfigurasi React Query dan menyediakan sambungan ke pangkalan data. Untuk langkah pemasangan dan konfigurasi khusus, sila rujuk dokumentasi rasmi React Query.

Kami menganggap bahawa kami telah menyelesaikan pemasangan dan konfigurasi React Query dan mencipta komponen bernama "TodoList" untuk memaparkan senarai tugasan. Seterusnya, kami akan menunjukkan cara menapis dan mengisih data menggunakan React Query.

Pertama, kita perlu mendapatkan semua data tugasan dalam pangkalan data. Dalam komponen "TodoList", kami boleh menggunakan kod berikut untuk menanyakan pangkalan data dan mendapatkan data tugasan:

import { useQuery } from 'react-query';

const TodoList = () => {
  const { data, isLoading, error } = useQuery('todos', async () => {
    const response = await fetch('/api/todos');
    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(todo => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
};

Sekarang kami telah berjaya memperoleh data tugasan, kami akan menambah keupayaan penapisan dan pengisihan.

Katakan kita ingin menapis data tugasan mengikut status, kita boleh menambah parameter status apabila membuat pertanyaan pangkalan data dan mendapatkan data yang sepadan daripada pangkalan data melalui parameter ini. Berikut ialah contoh kod:

import { useQuery } from 'react-query';

const TodoList = () => {
  const { data, isLoading, error } = useQuery(['todos', { status: 'completed' }], async (_, { status }) => {
    const response = await fetch(`/api/todos?status=${status}`);
    const data = await response.json();
    return data;
  });

  // 省略其他代码
};

Dalam kod di atas, kami menentukan kunci pertanyaan dengan menghantar tatasusunan sebagai parameter pertama useQuery. Elemen pertama tatasusunan ialah rentetan 'todos', yang boleh digunakan sebagai pengecam unik untuk pertanyaan. Elemen kedua tatasusunan ialah objek yang mengandungi kriteria untuk penapisan. Dalam contoh ini, kami menyatakan bahawa kami hanya mendapat data tugasan yang lengkap dengan menambah { status: 'completed' }.

Seterusnya, kami akan menambah fungsi pengisihan. Katakan kita ingin mengisih item tugasan dalam susunan menurun mengikut masa penciptaan. Kita boleh menambah parameter isihan apabila menanyakan pangkalan data dan mengisih data mengikut parameter ini. Berikut ialah contoh kod:

import { useQuery } from 'react-query';

const TodoList = () => {
  const { data, isLoading, error } = useQuery(['todos', { orderBy: 'created_at', order: 'desc' }], async (_, { orderBy, order }) => {
    const response = await fetch(`/api/todos?orderBy=${orderBy}&order=${order}`);
    const data = await response.json();
    return data;
  });

  // 省略其他代码
};

Dalam kod di atas, kami menentukan kunci pertanyaan dengan menghantar tatasusunan sebagai parameter pertama useQuery. Elemen pertama tatasusunan ialah rentetan 'todos', yang boleh digunakan sebagai pengecam unik untuk pertanyaan. Elemen kedua tatasusunan ialah objek yang mengandungi parameter yang digunakan untuk menyusun. Dalam contoh ini, kami menentukan susunan menurun mengikut masa penciptaan (created_at) dengan menambahkan { orderBy: 'created_at', order: 'desc' }.

Melalui contoh kod di atas, kami menunjukkan pelaksanaan khusus tentang cara menggunakan pangkalan data untuk menapis dan mengisih data dalam React Query. Sudah tentu, dalam projek sebenar, pelaksanaan khusus mungkin berbeza, dan anda perlu membuat pelarasan yang sepadan mengikut keperluan anda sendiri. Pada masa yang sama, anda juga perlu melakukan operasi pertanyaan dan pengisihan yang sepadan mengikut pangkalan data dan rangka kerja belakang yang anda gunakan. Tetapi secara umum, React Query menyediakan antara muka yang sangat mudah untuk berinteraksi dengan pangkalan data, menjadikan penapisan dan pengisihan data lebih mudah dan lebih cekap.

Atas ialah kandungan terperinci Menggunakan pangkalan data untuk menapis dan mengisih data dalam React Query. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!