Implement error handling mechanism for database queries in React Query

Implementing the error handling mechanism of database queries in React Query

React Query is a library used to manage and cache data. It is becoming more and more popular in the front-end field. welcome. In applications, we often need to interact with databases, and database queries may cause various errors. Therefore, implementing an effective error handling mechanism is crucial to ensure application stability and user experience.

The first step is to install React Query. Add it to the project using the following command:

npm install react-query

Once the installation is complete, we can import the necessary components and functions in the application and start writing code.

First, we need to create a QueryClient instance of React Query and wrap it in the root component of the application.

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

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* 应用程序的其他组件 */}
    </QueryClientProvider>
  );
}

export default App;

Next, we need a function to perform the database query. This function will make a request using JavaScript's fetch API and parse the result into JSON format.

async function fetchResource(url) {
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error("请求出错");
  }
  return response.json();
}

In our query function, we determine whether the request was successful by checking the status code of the response. If the status code is not in the range 200-299, we throw an error. This will trigger React Query's error handling mechanism.

Next, we can call our query function and process the results by using React Query’s useQuery hook.

import { useQuery } from "react-query";

function Resource() {
  const { data, error, isLoading } = useQuery("resource", () =>
    fetchResource("/api/resource")
  );

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

  if (error) {
    return <div>发生错误：{error.message}</div>;
  }

  return <div>数据：{JSON.stringify(data)}</div>;
}

export default Resource;

In this example, we use the useQuery hook to get a data named "resource". The second argument we pass to useQuery is a function that executes our query function, fetchResource. React Query will automatically handle data caching and invalidation logic. We only need to focus on request status and error handling.

When data is loaded, isLoading will be true and we can display a loading indicator. When an error occurs and error is not empty, we can display an error message. When the request is successful and there are no errors, data will contain the data returned from the server.

Finally, we need to use our Resource component in other components of the application.

import Resource from "./Resource";

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Resource />
    </QueryClientProvider>
  );
}

export default App;

With this setting, we can implement the error handling mechanism of database queries in React Query. Whether it is a network error or an error returned by the server, we can use the React Query mechanism to handle it uniformly and provide a good user experience.

The above is the detailed content of Implement error handling mechanism for database queries in React Query. For more information, please follow other related articles on the PHP Chinese website!