Bagaimana untuk mencapai pemisahan baca dan tulis dalam pangkalan data dalam React Query?

Bagaimana untuk mencapai pemisahan baca dan tulis dalam pangkalan data dalam React Query?

Dalam pembangunan bahagian hadapan moden, pengasingan baca dan tulis dalam pangkalan data merupakan pertimbangan reka bentuk seni bina yang penting. React Query ialah perpustakaan pengurusan negeri yang berkuasa yang mengoptimumkan pemerolehan data dan proses pengurusan untuk aplikasi bahagian hadapan. Artikel ini akan memperkenalkan cara menggunakan React Query untuk mencapai pemisahan baca dan tulis dalam pangkalan data, dan memberikan contoh kod khusus.

Konsep teras React Query ialah Query, Mutation dan QueryClient. Pertanyaan digunakan untuk mendapatkan data, Mutasi digunakan untuk mengubah suai data, dan QueryClient digunakan untuk mengurus dan menjejak status pertanyaan dan mutasi. Kita boleh menggunakan konsep ini untuk mencapai pemisahan baca dan tulis dalam pangkalan data.

Pertama, kita perlu mengkonfigurasi dua klien API yang berbeza, satu untuk membaca data dan satu lagi untuk menulis data. Kami boleh menggunakan perpustakaan seperti axios atau fetch untuk mencipta klien API ini. Berikut ialah contoh kod:

import axios from 'axios';

const readApiClient = axios.create({
  baseURL: 'https://api.read.com',
});

const writeApiClient = axios.create({
  baseURL: 'https://api.write.com',
});

export { readApiClient, writeApiClient };

Seterusnya, kami boleh mengkonfigurasi kedua-dua pelanggan ini dalam aplikasi menggunakan komponen React Query's QueryProvider dan MutationProvider. QueryProvider digunakan untuk mengkonfigurasi klien yang membaca data, dan MutationProvider digunakan untuk mengkonfigurasi klien yang menulis data. Berikut ialah contoh kod:

import { QueryClient, QueryProvider, MutationProvider } from 'react-query';
import { readApiClient, writeApiClient } from './api';

const queryClient = new QueryClient();

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

Kini kita boleh menggunakan React Query menggunakan kait useQuery dan useMutation untuk menghantar permintaan untuk membaca dan menulis data dalam komponen aplikasi. Berikut ialah contoh kod:

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

const fetchUser = async () => {
  const response = await readApiClient.get('/users/1');
  return response.data;
};

const updateUser = async (userData) => {
  const response = await writeApiClient.put('/users/1', userData);
  return response.data;
};

const Profile = () => {
  const { data, isLoading } = useQuery('user', fetchUser);
  const mutation = useMutation(updateUser, {
    onSuccess: () => {
      queryClient.invalidateQueries('user');
    },
  });

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

  return (
    <div>
      <h1>{data.name}</h1>
      <button onClick={() => mutation.mutate({ name: 'John Doe' })}>
        Update Name
      </button>
    </div>
  );
};

Dalam kod di atas, kami menggunakan useQuery hook untuk mendapatkan data pengguna dan useMutation hook untuk mengemas kini data pengguna. Selepas kemas kini berjaya, kami menggunakan kaedah queryClient.invalidateQueries untuk membatalkan pertanyaan untuk mengambil semula data pengguna terkini.

Melalui langkah di atas, kami berjaya mencapai pemisahan membaca dan menulis pangkalan data. Menggunakan komponen QueryProvider dan MutationProvider React Query, kami boleh mengkonfigurasi klien API yang berbeza untuk operasi baca dan tulis, sekali gus mencapai pemisahan baca dan tulis dalam pangkalan data. Pada masa yang sama, dengan menggunakan cangkuk useQuery dan useMutation, kami boleh menghantar permintaan untuk membaca dan menulis data dalam komponen dengan mudah dan melaksanakan pengurusan dan kemas kini keadaan.

Ringkasnya, React Query ialah perpustakaan pengurusan negeri yang berkuasa yang boleh membantu kami mengoptimumkan pemerolehan data dan proses pengurusan aplikasi bahagian hadapan. Dengan mengkonfigurasi klien API yang berbeza dengan betul dan menggunakan kait QueryProvider, MutationProvider, useQuery dan useMutation, kami boleh mencapai pemisahan baca-tulis pangkalan data dalam React Query. Ini sangat penting untuk membina aplikasi bahagian hadapan yang cekap dan berskala.

Atas ialah kandungan terperinci Bagaimana untuk mencapai pemisahan baca dan tulis dalam pangkalan data dalam React Query?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!