React Query 및 데이터베이스를 사용하여 데이터 구독 및 게시 구현

React 쿼리 및 데이터베이스를 사용하여 데이터 구독 및 게시 구현

소개:
현대 프런트엔드 개발에서 데이터의 실시간 업데이트 및 통신은 매우 중요한 부분입니다. React Query는 강력한 데이터 쿼리 및 캐싱 기능을 제공하는 탁월한 데이터 계층 관리 라이브러리입니다. 데이터베이스의 실시간 모니터링 기능과 결합하여 데이터 구독 및 게시를 쉽게 구현할 수 있습니다. 이 기사에서는 React Query와 데이터베이스를 사용하여 데이터 구독 및 게시를 구현하는 방법을 소개하고 해당 코드 예제를 제공합니다.

1. 환경 준비:
구현을 시작하기 전에 필요한 환경이 준비되어 있는지 확인하세요. 먼저 MongoDB, Firebase 등과 같은 적합한 백엔드 데이터베이스가 필요합니다. 둘째, React 애플리케이션을 만들고 React Query를 설치해야 합니다. 다음 명령을 사용하여 새 React 애플리케이션을 생성하고 초기화할 수 있습니다.

npx create-react-app react-query-demo
cd react-query-demo

다음으로 React Query를 설치합니다:

npm install react-query

2. 데이터베이스 청취 설정:
데이터베이스에서 실제로 데이터를 가져오려면 리스너를 설정해야 합니다. 시간이 갱신됩니다. 구체적인 구현 방법은 데이터베이스마다 다릅니다. 여기서는 Firebase를 예로 들어보겠습니다. 먼저 Firebase 콘솔에서 새 프로젝트를 만들고 해당 구성 정보를 가져옵니다. 그런 다음 React 프로젝트에 firebase 및 firebase/app 모듈을 설치합니다. firebase 和 firebase/app 模块：

npm install firebase
npm install firebase/app

在 React 项目的入口文件（通常是 src/index.js）中，引入 Firebase 并初始化：

import firebase from 'firebase/app';
import 'firebase/database';

const firebaseConfig = {
  // 你的 Firebase 配置信息
};

firebase.initializeApp(firebaseConfig);
const database = firebase.database();

接下来，我们可以使用 database.ref() 来获取到 Firebase 数据库的根引用，并调用 on() 方法来设置监听器：

const dataRef = database.ref('data');

dataRef.on('value', (snapshot) => {
  const data = snapshot.val();
  // 数据更新操作
});

三、使用 React Query：
现在我们已经设置好数据库监听器，下面我们来利用 React Query 对数据进行订阅和发布。首先，创建一个新的 React Query 实例，并将其作为组件树的根组件：

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

const queryClient = new QueryClient();

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

请确保在 src/index.js 中导入相关模块。然后，我们可以通过 useQuery 钩子来订阅数据：

import { useQuery } from 'react-query';

const App = () => {
  const query = useQuery('data', () => {
    // 获取数据的逻辑
  });

  // 渲染数据
  return (
    <div>
      {query.isLoading ? (
        'Loading...'
      ) : query.error ? (
        'An error occurred: ' + query.error.message
      ) : (
        // 渲染数据
      )}
    </div>
  );
};

其中，useQuery 接受两个参数，第一个参数是查询标识（可以是字符串或数组），第二个参数是获取数据的逻辑函数。

为了实现数据的实时更新，我们可以在 useQuery 的第二个参数函数中调用 onSnapshot 方法，并将数据注入 queryClient 中：

import { useQuery } from 'react-query';

const App = () => {
  const query = useQuery('data', async () => {
    const snapshot = await dataRef.once('value');
    const data = snapshot.val();
    queryClient.setQueryData('data', data); // 注入数据到 queryClient 中
    return data;
  });

  // 渲染数据
  return (
    <div>
      {query.isLoading ? (
        'Loading...'
      ) : query.error ? (
        'An error occurred: ' + query.error.message
      ) : (
        // 渲染数据
      )}
    </div>
  );
};

最后，我们还可以通过 useMutation 钩子来发布数据的变更：

import { useMutation } from 'react-query';

const App = () => {
  const mutation = useMutation((newData) => {
    // 更新数据的逻辑
  });

  // 发布数据
  const handlePublish = () => {
    mutation.mutate(newData);
  };

  return (
    <div>
      {/* ... */}
      <button onClick={handlePublish}>Publish</button>
    </div>
  );
};

通过 useMutation 钩子创建的 mutation 对象提供了 mutate 方法，可以用来触发数据的变更。

结束语：
本文介绍了如何利用 React Query 和数据库实现数据的订阅和发布。首先，我们设置了数据库的监听器，以实时获取数据的更新。然后，我们使用 React Query 的 useQuery 钩子来订阅数据，并通过 useMutationrrreee

React 프로젝트의 항목 파일(일반적으로 src/index.js)에서 code>), Firebase를 소개하고 초기화합니다.

rrreee

다음으로 database.ref()를 사용하여 Firebase 데이터베이스의 루트 참조를 가져오고 on( ) code> 메소드를 사용하여 리스너를 설정합니다: <ul>rrreee<li> 3. React Query 사용: </li>이제 데이터베이스 리스너를 설정했으므로 React Query를 사용하여 데이터를 구독하고 게시해 보겠습니다. 먼저 새 React Query 인스턴스를 생성하고 이를 구성 요소 트리의 루트 구성 요소로 만듭니다. <li>rrreee</li> <code>src/index.js에서 관련 모듈을 가져와야 합니다. 그런 다음 useQuery 후크를 통해 데이터를 구독할 수 있습니다: rrreee🎜 그중 useQuery는 두 개의 매개변수를 허용하며 첫 번째 매개변수는 쿼리 식별자입니다(문자열일 수 있음). 또는 array ), 두 번째 매개변수는 데이터를 얻기 위한 논리 함수입니다. 🎜🎜데이터의 실시간 업데이트를 달성하기 위해 useQuery의 두 번째 매개변수 함수에서 onSnapshot 메서드를 호출하고 데이터를 queryClient 매체: 🎜rrreee🎜마지막으로 <code>useMutation 후크를 통해 데이터 변경 사항을 게시할 수도 있습니다. 🎜rrreee🎜mutation 객체는 useMutation를 통해 생성되었습니다. > 후크 데이터 변경을 트리거하는 데 사용할 수 있는 mutate 메소드가 제공됩니다. 🎜🎜결론: 🎜이 기사에서는 React Query와 데이터베이스를 사용하여 데이터를 구독하고 게시하는 방법을 소개합니다. 먼저 실시간으로 데이터 업데이트를 받기 위해 데이터베이스 리스너를 설정했습니다. 그런 다음 React Query의 useQuery 후크를 사용하여 데이터를 구독하고 useMutation 후크를 사용하여 데이터 변경 사항을 게시합니다. 이 글이 실제 프로젝트에서 데이터 구독과 퍼블리싱을 구현하는 데 조금이나마 도움이 되기를 바랍니다. 🎜🎜참조 링크: 🎜🎜🎜React 쿼리 문서: https://react-query.tanstack.com/🎜🎜Firebase 문서: https://firebase.google.com/docs🎜🎜

위 내용은 React Query 및 데이터베이스를 사용하여 데이터 구독 및 게시 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!