Laksanakan percubaan semula pertanyaan pangkalan data yang gagal dalam React Query

Laksanakan percubaan semula pertanyaan pangkalan data yang gagal dalam React Query

React Query ialah pertanyaan data yang berkuasa dan perpustakaan pengurusan negeri, yang boleh membantu kami mengendalikan tugasan pertanyaan data dan pengurusan negeri dengan mudah. Dalam aplikasi sebenar, kami sering menghadapi kegagalan pertanyaan pangkalan data Pada masa ini, kami perlu melaksanakan mekanisme percubaan semula kegagalan automatik untuk meningkatkan kestabilan pertanyaan. Artikel ini akan memperkenalkan cara untuk melaksanakan percubaan semula pertanyaan pangkalan data yang gagal dalam React Query dan memberikan contoh kod khusus.

Dalam React Query, kita boleh menggunakan Query hooks untuk melaksanakan pertanyaan pangkalan data. Dalam cangkuk Pertanyaan, kita boleh mentakrifkan pertanyaan dengan menentukan queryKey dan queryFn. queryKey ialah kunci unik yang mengenal pasti nama pertanyaan, manakala queryFn ialah fungsi tak segerak yang melaksanakan operasi pertanyaan sebenar. Apabila kami memanggil cangkuk Query, React Query akan secara automatik melaksanakan queryFn dan menyimpan hasil pertanyaan dalam cache global.

Untuk melaksanakan percubaan semula pertanyaan pangkalan data yang gagal, kami boleh menggunakan panggilan balik onError React Query. Apabila queryFn melemparkan ralat, React Query secara automatik mencetuskan panggilan balik onError. Kita boleh melaksanakan logik cuba semula dalam panggilan balik onError. Berikut ialah contoh kod:

import { useQuery } from 'react-query';

const fetchUser = async (userId) => {
  const response = await fetch(`https://example.com/api/users/${userId}`);
  if (!response.ok) {
    throw new Error('Failed to fetch user');
  }
  return response.json();
};

const User = ({ userId }) => {
  const queryKey = ['user', userId];

  const { data, isError, error } = useQuery(queryKey, fetchUser, {
    retry: 3,
    retryDelay: 1000,
    onError: (error, key, config) => {
      console.error('An error occurred:', error);
    },
  });

  if (isError) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.email}</p>
    </div>
  );
};

export default User;

Dalam kod di atas, kami mentakrifkan fungsi tak segerak bernama fetchUser untuk menanyakan maklumat pengguna. Apabila pertanyaan gagal, kami membuang ralat tersuai. Kemudian, kami melaksanakan logik cuba semula dalam cangkuk Pertanyaan dengan menetapkan parameter cuba semula dan cuba semulaTunda. Parameter cuba semula menentukan bilangan percubaan semula dan parameter retryDelay menentukan kelewatan antara setiap percubaan semula. Kami juga mengendalikan maklumat ralat melalui panggilan balik onError, yang boleh mencetak log ralat pada konsol atau melakukan pemprosesan lain.

Menggunakan contoh kod di atas, kami boleh menanyakan maklumat pengguna dengan memanggil komponen Pengguna dalam komponen React. Jika pertanyaan gagal, React Query akan melakukan logik cuba semula secara automatik dan cuba semula sehingga 3 kali dengan selang 1 saat setiap kali. Apabila bilangan percubaan semula melebihi had, sifat isError akan menjadi benar dan kami boleh mengendalikan maklumat ralat dalam komponen, seperti memaparkan gesaan ralat.

Ringkasan:
Dengan menggunakan panggilan balik onError React Query, kami boleh melaksanakan logik percubaan semula yang gagal bagi pertanyaan pangkalan data dengan mudah. Lemparkan ralat dalam fungsi pertanyaan khusus, kemudian kendalikan maklumat ralat dan cetuskan operasi cuba semula dalam panggilan balik onError. Ini boleh meningkatkan kestabilan pertanyaan dan memastikan ketepatan data. Pada masa yang sama, React Query juga menyediakan parameter konfigurasi fleksibel lain, seperti bilangan percubaan semula dan selang percubaan semula, yang boleh dilaraskan mengikut situasi sebenar.

Atas ialah kandungan terperinci Laksanakan percubaan semula pertanyaan pangkalan data yang gagal dalam React Query. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!