React Query에서 데이터베이스 배치 작업을 구현하는 방법

React Query에서는 백엔드 데이터베이스를 사용하여 일괄 작업을 수행해야 하는 경우가 많습니다. 이 기사에서는 React Query에서 데이터베이스에 대한 일괄 작업을 구현하는 방법을 소개하고 특정 코드 예제를 통해 이를 보여줍니다.

React Query는 데이터 상태를 관리하고 데이터 요청을 처리하기 위한 라이브러리입니다. 이는 개발자가 백엔드 데이터베이스와의 상호 작용을 쉽게 처리하는 데 도움이 되며 다양하고 강력한 기능을 제공합니다.

먼저 React Query를 설치하고 설정해야 합니다. 다음 명령으로 설치할 수 있습니다:

npm install react-query

그런 다음 애플리케이션의 항목 파일에 React Query를 설정해야 합니다. 다음 코드를 사용할 수 있습니다.

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

const queryClient = new QueryClient();

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

export default App;

다음으로 데이터베이스에 일괄 작업을 구현하겠습니다. 사용자 관리 기능이 있고 선택된 사용자를 일괄적으로 삭제해야 한다고 가정해 보겠습니다. 다음 단계에 따라 이를 수행할 수 있습니다.

1. 사용자 목록을 가져오기 위한 요청 함수를 만듭니다. 다음 코드를 사용하여 정의할 수 있습니다.

import axios from 'axios';

const getUsers = async () => {
  const response = await axios.get('/api/users');
  return response.data;
};

2. React Query의 useQuery 후크를 사용하여 사용자 목록 데이터를 가져옵니다. 이는 다음 코드를 사용하여 달성할 수 있습니다:

import { useQuery } from 'react-query';

const UserList = () => {
  const { data, isLoading } = useQuery('users', getUsers);

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

  // 渲染用户列表的逻辑
};

3. 사용자 삭제를 위한 요청 함수를 만듭니다. 다음 코드를 사용하여 정의할 수 있습니다.

import axios from 'axios';

const deleteUser = async (id) => {
  await axios.delete(`/api/users/${id}`);
};

4. React Query의 useMutation 후크를 사용하여 사용자 삭제를 처리합니다. 이는 다음 코드를 사용하여 달성할 수 있습니다.

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

const UserList = () => {
  // 其他代码...

  const queryClient = useQueryClient();

  const deleteMutation = useMutation(deleteUser, {
    onSuccess: () => {
      queryClient.invalidateQueries('users');
    },
  });

  const handleDelete = (id) => {
    deleteMutation.mutate(id);
  };

  // 渲染用户列表的逻辑
};

위 코드에서는 useQueryClient 후크를 사용하여 QueryClient의 인스턴스를 얻었고, validateQueries 메서드를 호출하여 사용자 목록 데이터를 무효화하여 최신 정보를 다시 얻을 수 있었습니다. 사용자를 삭제한 후 데이터를 나열합니다.

마지막으로 사용자 목록에 삭제 버튼을 렌더링하고 이를 handlerDelete 함수와 연결합니다. 이는 다음 코드를 사용하여 달성할 수 있습니다.

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

const UserList = () => {
  // 其他代码...

  return (
    <ul>
      {data.map((user) => (
        <li key={user.id}>
          {user.name}{' '}
          <button onClick={() => handleDelete(user.id)}>删除</button>
        </li>
      ))}
    </ul>
  );
};

위 단계를 통해 우리는 데이터베이스에 대한 일괄 작업, 특히 사용자 삭제를 성공적으로 구현했습니다. 삭제 버튼을 클릭하면 handlerDelete 함수가 호출되어 삭제 작업이 실행되고 사용자 목록 데이터가 자동으로 업데이트됩니다.

요약하자면, React Query는 백엔드 데이터베이스로 일괄 작업을 처리할 수 있는 사용하기 쉽고 강력한 도구를 제공합니다. useMutation Hook을 사용하여 작업 성공 후 요청 함수와 콜백을 처리함으로써 다양한 데이터베이스 작업을 쉽게 구현할 수 있습니다. 위 예제의 코드는 단지 참조용일 뿐이며, 실제 개발에서는 특정 요구에 따라 조정 및 확장이 필요할 수 있습니다. 이 글이 React Query의 데이터베이스 배치 작업 방식을 더 잘 이해하고 사용하는 데 도움이 되기를 바랍니다.

위 내용은 React Query에서 데이터베이스 배치 작업을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!