React Query에서 데이터를 추가, 삭제, 수정, 쿼리하는 방법은 무엇입니까?

React Query에서 데이터를 추가, 삭제, 수정 및 쿼리하는 방법은 무엇입니까?

현대 웹 개발에서는 프런트엔드와 백엔드 분리 아키텍처가 널리 사용됩니다. 프런트 엔드 개발자로서 우리는 일반적으로 데이터 추가(생성), 삭제(삭제), 업데이트(업데이트) 및 쿼리(쿼리)를 포함하여 백엔드 데이터와 상호 작용해야 합니다. 이러한 작업을 단순화하고 개발 효율성을 높이기 위해 React Query 라이브러리가 널리 선택되었습니다. 이 글에서는 React Query를 사용하여 데이터를 추가, 삭제, 수정, 쿼리하는 방법을 소개합니다.

React Query는 비동기 데이터 관리에 중점을 둔 상태 관리 라이브러리입니다. 데이터 검색, 업데이트, 삭제는 물론 데이터 캐싱 및 무효화를 자동으로 관리하기 위한 강력한 도구 및 API 세트를 제공합니다.

먼저 React Query를 설치하고 구성해야 합니다. 다음 명령을 사용하여 React Query를 설치할 수 있습니다:

npm install react-query

또는

yarn add react-query

그런 다음 애플리케이션의 루트 구성 요소에 React Query Provider를 추가합니다.

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

const queryClient = new QueryClient();

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

다음으로 React Query Add에서 데이터를 구현하는 방법을 살펴보겠습니다. , 삭제, 수정 및 확인이 가능합니다.

데이터 생성/추가

새 데이터를 생성하려면 useMutation 후크를 사용할 수 있습니다. 이 후크는 함수를 매개변수로 받아 요청을 보내고 새 데이터를 생성하는 데 사용됩니다. 이 함수는 데이터가 성공적으로 생성된 후 Promise를 반환하고 해결해야 합니다. useMutation hook。这个 hook 接收一个函数作为参数，用于发送请求并创建新的数据。这个函数必须返回 Promise，并在数据创建成功后进行 resolve。

import { useMutation } from 'react-query';

function CreateData() {
  const { mutate, isLoading } = useMutation((data) =>
    fetch('/api/data', {
      method: 'POST',
      body: JSON.stringify(data),
      headers: {
        'Content-Type': 'application/json',
      },
    }).then((res) => res.json())
  );

  const handleCreate = () => {
    mutate({ name: 'New Data' }); // 传递新数据到 mutate 函数
  };

  return (
    <div>
      <button onClick={handleCreate} disabled={isLoading}>
        {isLoading ? 'Creating...' : 'Create Data'}
      </button>
    </div>
  );
}

在上面的代码中，我们使用了 useMutation hook 来创建一个名为 CreateData 的组件。mutate 函数用于触发请求并创建新的数据。在这个例子中，我们发送一个 POST 请求到 /api/data 地址，并将新的数据作为请求的正文。请求成功后，通过调用 res.json() 方法来解析响应，并在 Promise resolve 后返回数据。

删除数据

要删除数据，我们可以再次使用 useMutation hook，并发送一个 DELETE 请求。类似于创建数据的例子，我们需要传递一个删除的函数，并在函数返回结果为成功后 resolve。

import { useMutation } from 'react-query';

function DeleteData({ dataId }) {
  const { mutate, isLoading } = useMutation(() =>
    fetch(`/api/data/${dataId}`, {
      method: 'DELETE',
    }).then((res) => res.json())
  );

  const handleDelete = () => {
    mutate();
  };

  return (
    <div>
      <button onClick={handleDelete} disabled={isLoading}>
        {isLoading ? 'Deleting...' : 'Delete Data'}
      </button>
    </div>
  );
}

在上面的代码中，我们定义了一个名为 DeleteData 的组件，并使用 useMutation hook 创建了一个删除函数。这个函数发送一个 DELETE 请求到 /api/data/{dataId} 地址，其中 {dataId} 是要删除的数据的唯一标识符。请求成功后，我们将结果作为 Promise resolve 返回。

更新数据

要更新数据，我们可以再次使用 useMutation hook，发送一个 PUT 或者 PATCH 请求。类似于创建数据和删除数据的例子，我们需要传递一个函数用于更新数据，并在函数返回结果为成功后 resolve。

import { useMutation } from 'react-query';

function UpdateData({ dataId }) {
  const { mutate, isLoading } = useMutation((data) =>
    fetch(`/api/data/${dataId}`, {
      method: 'PUT',
      body: JSON.stringify(data),
      headers: {
        'Content-Type': 'application/json',
      },
    }).then((res) => res.json())
  );

  const handleUpdate = () => {
    mutate({ name: 'Updated Data' });
  };

  return (
    <div>
      <button onClick={handleUpdate} disabled={isLoading}>
        {isLoading ? 'Updating...' : 'Update Data'}
      </button>
    </div>
  );
}

在上面的代码中，我们创建了一个名为 UpdateData 的组件，并使用 useMutation hook 创建了一个更新函数。这个函数发送一个 PUT 请求到 /api/data/{dataId} 地址，并将更新的数据作为请求的正文。请求成功后，我们将结果作为 Promise resolve 返回。

查询数据

要查询数据，在 React Query 中我们可以使用 useQuery hook。这个 hook 接收一个函数作为参数，并返回一个包含数据的对象。在函数中，我们发送一个 GET 请求，并在响应中解析数据。

import { useQuery } from 'react-query';

function GetData({ dataId }) {
  const { isLoading, error, data } = useQuery('data', () =>
    fetch(`/api/data/${dataId}`).then((res) => res.json())
  );

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

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

  return (
    <div>
      <h2>Data: {data.name}</h2>
    </div>
  );
}

在上面的代码中，我们使用了 useQuery hook 创建了一个名为 GetData 的组件。useQuery hook 接收一个字符串作为标识符，并在请求成功后自动缓存数据。我们发送一个 GET 请求到 /api/data/{dataId}rrreee

위 코드에서는 useMutation 후크를 사용하여 CreateData라는 구성 요소를 생성했습니다. mutate 함수는 요청을 트리거하고 새 데이터를 생성하는 데 사용됩니다. 이 예에서는 /api/data 주소로 POST 요청을 보내고 새 데이터를 요청 본문으로 포함합니다. 요청이 성공한 후 res.json() 메서드를 호출하여 응답을 구문 분석하고 Promise가 해결된 후 데이터가 반환됩니다.

데이터 삭제🎜🎜데이터를 삭제하려면 useMutation 후크를 다시 사용하고 DELETE 요청을 보낼 수 있습니다. 데이터 생성 예시와 유사하게 삭제 함수를 전달하고 함수가 성공 결과를 반환한 후 해결해야 합니다. 🎜rrreee🎜위 코드에서는 DeleteData라는 구성 요소를 정의하고 useMutation 후크를 사용하여 삭제 함수를 만들었습니다. 이 함수는 /api/data/{dataId} 주소로 DELETE 요청을 보냅니다. 여기서 {dataId}는 삭제할 데이터의 고유 식별자입니다. 요청이 성공하면 결과를 Promise 해결로 반환합니다. 🎜🎜데이터 업데이트🎜🎜데이터를 업데이트하려면 useMutation 후크를 다시 사용하고 PUT 또는 PATCH 요청을 보낼 수 있습니다. 데이터를 생성하고 삭제하는 예시와 마찬가지로, 데이터를 업데이트하고 함수가 성공을 반환한 후 해결하는 함수를 전달해야 합니다. 🎜rrreee🎜위 코드에서는 UpdateData라는 구성 요소를 생성하고 useMutation 후크를 사용하여 업데이트 함수를 생성했습니다. 이 함수는 업데이트된 데이터를 요청 본문으로 사용하여 /api/data/{dataId} 주소로 PUT 요청을 보냅니다. 요청이 성공하면 결과를 Promise 해결로 반환합니다. 🎜🎜Query data🎜🎜React Query에서는 데이터를 쿼리하기 위해 useQuery 후크를 사용할 수 있습니다. 이 후크는 함수를 인수로 받고 데이터가 포함된 개체를 반환합니다. 함수 내에서 GET 요청을 보내고 응답의 데이터를 구문 분석합니다. 🎜rrreee🎜위 코드에서는 useQuery 후크를 사용하여 GetData라는 구성 요소를 생성했습니다. useQuery 후크는 문자열을 식별자로 수신하고 요청이 성공한 후 자동으로 데이터를 캐시합니다. /api/data/{dataId} 주소로 GET 요청을 보내고 응답에서 데이터를 구문 분석합니다. 데이터를 로드하는 동안 "Loading..." 텍스트가 표시됩니다. 오류가 발생하면 오류 텍스트가 표시됩니다. 🎜🎜요약하자면 React Query를 사용하여 데이터를 추가, 삭제, 수정, 쿼리하는 방법을 배웠습니다. React Query는 데이터 관리 및 상호 작용을 단순화하는 많은 강력한 도구와 API를 제공합니다. 이러한 도구와 API를 사용하면 데이터를 보다 쉽게 ​​조작하고 프런트엔드 개발 효율성을 높일 수 있습니다. 이 기사가 도움이 되기를 바랍니다! 🎜

위 내용은 React Query에서 데이터를 추가, 삭제, 수정, 쿼리하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!