React Query에서 데이터베이스 쿼리를 어떻게 사용하나요?

React Query에서 데이터베이스 쿼리를 어떻게 사용하나요?

소개: React Query는 강력한 상태 관리 라이브러리로, React 애플리케이션에서 네트워크 요청 및 데이터 캐싱을 관리하는 데 탁월한 선택입니다. 이는 데이터 쿼리를 처리하는 간단하면서도 강력한 방법을 제공하므로 데이터베이스와 쉽게 상호 작용할 수 있습니다. 이 글에서는 React Query와 함께 데이터베이스 쿼리를 사용하는 방법에 대한 자세한 코드 예제를 제공합니다.

1. 준비
시작하기 전에 React Query가 설치되어 있고 사용할 수 있는 데이터베이스가 있는지 확인하세요. 여기서는 데이터베이스가 MongoDB라고 가정하지만 다른 유형의 데이터베이스를 사용할 수도 있습니다.

2. React Query 클라이언트 만들기
먼저, 데이터 쿼리를 관리하기 위해 React Query 클라이언트를 만들어야 합니다. 프로젝트 항목 파일(보통 index.js)에서 QueryClient 및 QueryClientProvider를 가져오고 전역 React Query 클라이언트 객체를 생성한 다음 전달합니다. index.js）中，导入 QueryClient 和 QueryClientProvider，并创建一个全局的 React Query 客户端对象，然后将其传递给 QueryClientProvider：

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

const queryClient = new QueryClient();

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

三、定义数据库查询函数
在开始使用数据库查询之前，我们需要将数据库查询封装为一个可重复使用的函数。这个函数可以接受查询参数，并返回一个 Promise，从而允许我们在 React Query 中使用异步函数。下面是一个示例数据库查询函数：

async function fetchDataFromDatabase(queryParams) {
  return await fetch('/api/query', {
    method: 'POST',
    body: JSON.stringify(queryParams),
    headers: {
      'Content-Type': 'application/json'
    }
  })
  .then(response => response.json())
  .then(data => {
    // 处理从数据库获取的数据
    return data;
  })
  .catch(error => {
    // 处理错误
    throw new Error('数据库查询失败');
  });
}

这个函数是一个异步函数，它使用 fetch API 发起一个 POST 请求到后端的 /api/query 接口，并将查询参数作为请求体发送。然后，它将获取到的响应数据解析为 JSON，并在成功时返回数据，否则抛出一个错误。

四、在 React Query 中使用数据库查询
现在我们已经有了一个可重复使用的数据库查询函数，接下来我们可以在组件中使用 React Query 进行数据查询了。

首先，导入 useQuery 钩子函数，并使用它创建一个查询。我们将使用 useQuery 钩子函数来进行数据获取，并传递一个查询键（通常是一个字符串），以及一个用于触发查询的函数。

import { useQuery } from 'react-query';

function App() {
  const { data, isLoading, error } = useQuery('fetchData', fetchDataFromDatabase);
  
  if (isLoading) {
    return <div>Loading...</div>;
  }
  
  if (error) {
    return <div>Error: {error.message}</div>;
  }
  
  return (
    <div>
      {/* 显示从数据库获取的数据 */}
      {data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

在上面的代码中，我们使用了一个叫做 fetchData 的查询键，并将 fetchDataFromDatabase 函数作为查询函数传递给 useQuery。useQuery 钩子函数将返回一个包含 data、isLoading 和 error 等属性的对象，我们可以根据这些属性来处理不同的状态。

通过上述代码，我们可以根据 isLoading 状态来显示一个加载中的提示信息，通过 error 状态来显示一个错误信息，并通过 data 状态来渲染从数据库获取的数据。

五、渲染在 React Query 中的数据
对于从数据库获取的数据，我们可以在组件中使用 data 状态进行渲染。在上述示例中，我们将从数据库获取的每个数据项渲染为一个包含 id 和 name 的 divrrreee

3. 데이터베이스 쿼리 함수 정의

데이터베이스 쿼리 사용을 시작하기 전에 데이터베이스 쿼리를 재사용 가능한 함수로 캡슐화해야 합니다. 이 함수는 쿼리 매개변수를 받아들이고 Promise를 반환할 수 있으므로 React 쿼리에서 비동기 함수를 사용할 수 있습니다. 다음은 샘플 데이터베이스 쿼리 함수입니다.

rrreee

이 함수는 fetch API를 사용하여 백엔드의 /api/query 인터페이스에 대한 POST 요청을 시작하는 비동기 함수입니다. , 쿼리 매개변수를 요청 본문으로 보냅니다. 그런 다음 가져온 응답 데이터를 JSON으로 구문 분석하고 성공 시 데이터를 반환합니다. 그렇지 않으면 오류가 발생합니다.

4. React Query에서 데이터베이스 쿼리 사용

이제 재사용 가능한 데이터베이스 쿼리 기능이 있으므로 구성 요소에서 React Query를 사용하여 데이터를 쿼리할 수 있습니다.

🎜먼저 useQuery 후크 함수를 가져와서 이를 사용하여 쿼리를 생성합니다. 데이터 검색을 위해 useQuery 후크 함수를 사용하고 쿼리 키(일반적으로 문자열)를 전달하며 쿼리를 트리거하는 함수를 사용합니다. 🎜rrreee🎜위 코드에서는 fetchData라는 쿼리 키를 사용하고 fetchDataFromDatabase 함수를 쿼리 함수로 useQuery에 전달합니다. useQuery 후크 함수는 data, isLoading 및 error와 같은 속성을 포함하는 개체를 반환합니다. 다양한 상태를 처리하는 속성입니다. 🎜🎜위 코드를 통해 isLoading 상태에 따라 로딩 프롬프트 메시지를 표시하고, error 상태를 통해 오류 메시지를 표시하고, 데이터베이스에서 얻은 데이터를 렌더링하는 data 상태입니다. 🎜🎜5. React Query에서 렌더링된 데이터🎜 데이터베이스에서 얻은 데이터의 경우 구성 요소의 data 상태를 사용하여 렌더링할 수 있습니다. 위의 예에서는 데이터베이스에서 가져온 각 데이터 항목을 id 및 name을 포함하는 div 요소로 렌더링합니다. 🎜🎜이것은 단순한 예일 뿐이며 애플리케이션 요구 사항에 따라 더 복잡한 데이터 렌더링을 만들 수 있습니다. 🎜🎜6. 요약🎜React Query를 사용하면 React 애플리케이션에서 데이터베이스 쿼리를 쉽게 사용할 수 있습니다. 이 기사에서는 먼저 React Query 클라이언트를 만든 다음 재사용 가능한 데이터베이스 쿼리 함수를 정의하고 이를 React Query 구성 요소에서 사용했습니다. 마지막으로 다양한 쿼리 상태에 따라 로드 및 오류 메시지를 처리하는 방법과 데이터베이스에서 가져온 데이터를 렌더링하는 방법을 배웠습니다. 🎜🎜이 기사가 React Query에서 데이터베이스 쿼리를 사용하는 방법을 더 잘 이해하고 프로젝트 개발을 위한 몇 가지 아이디어와 참고 자료를 제공하는 데 도움이 되기를 바랍니다. React Query로 즐겁게 개발해보세요! 🎜

위 내용은 React Query에서 데이터베이스 쿼리를 어떻게 사용하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!