Pemalam Pangkalan Data Pertanyaan React: Panduan untuk Bekerja dengan Sistem Teragih

React Query ialah perpustakaan pengurusan data bahagian hadapan yang biasa digunakan yang boleh membantu kami mengurus data aplikasi dan menyediakan pertanyaan data yang berkuasa, caching dan fungsi kemas kini. Walau bagaimanapun, apabila aplikasi kami perlu bekerjasama dengan sistem pangkalan data teragih pada bahagian belakang, kami mungkin memerlukan pemalam pangkalan data untuk disepadukan dengan React Query. Artikel ini menerangkan cara menggunakan pemalam pangkalan data React Query untuk berfungsi dengan sistem teragih dan menyediakan contoh kod terperinci.

Pemalam pangkalan data React Query ialah lapisan tengah yang dicipta untuk berinteraksi dengan sistem pangkalan data bahagian belakang. Fungsi utamanya adalah untuk memintas pertanyaan data dan mengemas kini permintaan dan memajukannya ke sistem pangkalan data bahagian belakang. Apabila ia datang kepada pertanyaan data, pemalam pangkalan data bertanggungjawab untuk mendapatkan data dan mengembalikannya kepada React Query. Dari segi kemas kini data, pemalam pangkalan data bertanggungjawab untuk menghantar permintaan kemas kini kepada sistem pangkalan data bahagian belakang dan mengembalikan data yang dikemas kini kepada React Query. Dengan cara ini, kami boleh menyepadukan React Query dengan mana-mana sistem pangkalan data yang diedarkan untuk membuat pertanyaan, cache dan mengemas kini data.

Di bawah ini kami akan mengambil kerjasama dengan pangkalan data Firebase sebagai contoh untuk memperkenalkan secara terperinci cara menggunakan pemalam pangkalan data React Query.

Pertama, kita perlu memasang dan mengimport pemalam React Query dan Firebase. Masukkan arahan berikut pada baris arahan untuk memasang React Query dan Firebase:

npm install react-query firebase

Import React Query dan pemalam Firebase dalam fail masukan aplikasi:

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

const firebaseConfig = {...}; // Firebase 配置
const queryClient = new QueryClient();

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

Dalam kod di atas, kami mencipta contoh QueryClient dan membungkus keseluruhan perkara dengan aplikasi QueryClientProvider. Kemudian, kami menggunakan ReactQueryFirebaseProvider untuk membalut komponen Apl dan menyampaikan maklumat konfigurasi Firebase.

Seterusnya, kita perlu membuat cangkuk React Query tersuai untuk mendapatkan data daripada pangkalan data Firebase.

import { useQuery } from 'react-query';
import { firestore } from 'firebase';

const useFirebaseQuery = (collectionPath) => {
  return useQuery(collectionPath, async () => {
    const querySnapshot = await firestore().collection(collectionPath).get();
    return querySnapshot.docs.map((doc) => doc.data());
  });
};

export default useFirebaseQuery;

Dalam kod di atas, kami telah mencipta cangkuk tersuai useFirebaseQuery menggunakan cangkuk useQuery untuk mendapatkan data daripada pangkalan data Firebase. Cangkuk ini menerima parameter collectionPath, yang mewakili laluan koleksi untuk ditanya. Dalam pelaksanaan cangkuk, kami menggunakan kaedah firestore() Firebase untuk mendapatkan petikan pertanyaan koleksi dan menukar data dokumen dalam petikan itu kepada tatasusunan dan mengembalikannya. Dengan cara ini, kami boleh menggunakan cangkuk useFirebaseQuery dalam komponen untuk mendapatkan data:

import useFirebaseQuery from './hooks/useFirebaseQuery';

const App = () => {
  const { data, status } = useFirebaseQuery('users');

  if (status === 'loading') {
    return <div>Loading...</div>;
  }

  if (status === 'error') {
    return <div>Error fetching data</div>;
  }

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

Dalam kod di atas, kami menggunakan cangkuk useFirebaseQuery untuk mendapatkan data dalam koleksi bernama 'pengguna'. Bergantung pada keadaan data, kami menghasilkan komponen yang berbeza.

Akhir sekali, kami perlu menghantar permintaan kemas kini data ke sistem pangkalan data bahagian belakang semasa mengemas kini data. Dalam komponen, kami menggunakan cangkuk useMutation untuk mengemas kini data, dan kemudian menghantar permintaan kemas kini dalam fungsi mutasi.

import { useMutation, useQueryClient } from 'react-query';
import { firestore } from 'firebase';

const useFirebaseMutation = (collectionPath) => {
  const queryClient = useQueryClient();

  return useMutation(
    async (data) => {
      await firestore().collection(collectionPath).add(data);
    },
    {
      onSuccess: () => {
        queryClient.invalidateQueries(collectionPath);
      },
    }
  );
};

export default useFirebaseMutation;

Dalam kod di atas, kami menggunakan cangkuk useMutation untuk mencipta cangkuk tersuai useFirebaseMutation untuk menghantar permintaan kemas kini untuk data. Cangkuk ini menerima parameter collectionPath, yang mewakili laluan koleksi untuk dikemas kini. Dalam fungsi mutasi, kami menggunakan kaedah firestore() Firebase untuk menambah data dokumen baharu pada koleksi. Selepas data berjaya dikemas kini, kami menggunakan kaedah queryClient.invalidateQueries untuk membatalkan semua pertanyaan yang sepadan dengan laluan pengumpulan.

Berikut ialah contoh kod untuk menggunakan cangkuk useFirebaseMutation untuk mengemas kini data dalam komponen:

import useFirebaseMutation from './hooks/useFirebaseMutation';

const AddUserForm = () => {
  const { mutate } = useFirebaseMutation('users');

  const handleSubmit = (event) => {
    event.preventDefault();

    const name = event.target.elements.name.value;
    const email = event.target.elements.email.value;

    mutate({ name, email });

    event.target.reset();
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" placeholder="Name" required />
      <input type="email" name="email" placeholder="Email" required />
      <button type="submit">Add User</button>
    </form>
  );
};

Dalam kod di atas, kami menggunakan cangkuk useFirebaseMutation untuk mencipta fungsi mutasi untuk menghantar permintaan kemas kini untuk data. Apabila borang diserahkan, kami mendapat nama dan alamat e-mel pengguna untuk ditambahkan daripada elemen borang, dan memanggil fungsi mutasi untuk mengemas kini data.

Melalui langkah di atas, kami telah berjaya bekerjasama dengan sistem pangkalan data teragih (seperti Firebase) berdasarkan penggunaan pemalam pangkalan data React Query. Kita boleh menggunakan cangkuk useFirebaseQuery untuk mendapatkan data dan cangkuk useFirebaseMutation untuk mengemas kini data. Dengan cara ini, kami boleh mengurus data aplikasi dengan lebih mudah dan bekerjasama dengan cekap dengan sistem pangkalan data bahagian belakang.

Artikel ini menyediakan contoh penyepaduan dengan sistem pangkalan data Firebase, tetapi anda juga boleh menyepadukan pemalam pangkalan data React Query dengan sistem pangkalan data teragih yang lain. Cuma laksanakan fungsi cangkuk yang sesuai mengikut dokumentasi API pangkalan data bahagian belakang untuk bekerjasama dengan pangkalan data.

Ringkasnya, pemalam pangkalan data React Query ialah alat berkuasa yang boleh membantu kami mengurus data aplikasi dengan mudah dan bekerjasama dengan sistem pangkalan data teragih di bahagian belakang. Melalui penyepaduan dengan React Query, kami boleh membangunkan dan menyelenggara aplikasi kami dengan lebih cekap dan memberikan pengalaman pengguna yang lebih baik.

Saya harap artikel ini membantu anda memahami cara menggunakan pemalam pangkalan data React Query untuk bekerjasama dengan sistem teragih. Saya doakan anda berjaya menggunakan React Query dan pemalam pangkalan data!

Atas ialah kandungan terperinci Pemalam Pangkalan Data Pertanyaan React: Panduan untuk Bekerja dengan Sistem Teragih. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!