React Query 및 데이터베이스를 사용하여 데이터 구독 및 게시 구현-JS 튜토리얼-php.cn

利用 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(   , document.getElementById('root') );

로그인 후 복사

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

import { useQuery } from 'react-query'; const App = () => { const query = useQuery('data', () => { // 获取数据的逻辑 }); // 渲染数据 return (  {query.isLoading ? ( 'Loading...' ) : query.error ? ( 'An error occurred: ' + query.error.message ) : ( // 渲染数据 )} 
 ); };

로그인 후 복사

其中，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 (  {query.isLoading ? ( 'Loading...' ) : query.error ? ( 'An error occurred: ' + query.error.message ) : ( // 渲染数据 )} 
 ); };

로그인 후 복사

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

import { useMutation } from 'react-query'; const App = () => { const mutation = useMutation((newData) => { // 更新数据的逻辑 }); // 发布数据 const handlePublish = () => { mutation.mutate(newData); }; return (  {/* ... */}  
 ); };

로그인 후 복사

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

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

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

rrreee

다음으로 database.ref()를 사용하여 Firebase 데이터베이스의 루트 참조를 가져오고

on( ) code> 메소드를 사용하여 리스너를 설정합니다: rrreee 3. React Query 사용: 
이제 데이터베이스 리스너를 설정했으므로 React Query를 사용하여 데이터를 구독하고 게시해 보겠습니다. 먼저 새 React Query 인스턴스를 생성하고 이를 구성 요소 트리의 루트 구성 요소로 만듭니다. rrreee
 src/index.js에서 관련 모듈을 가져와야 합니다. 그런 다음
       useQuery후크를 통해 데이터를 구독할 수 있습니다:rrreee 그중
       useQuery는 두 개의 매개변수를 허용하며 첫 번째 매개변수는 쿼리 식별자입니다(문자열일 수 있음). 또는 array ), 두 번째 매개변수는 데이터를 얻기 위한 논리 함수입니다. 데이터의 실시간 업데이트를 달성하기 위해
       useQuery의 두 번째 매개변수 함수에서
       onSnapshot메서드를 호출하고 데이터를
       queryClient 매체: rrreee마지막으로 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!