React-Query

React-Query

2023. 3. 12. 16:21ㆍ프로그래밍/React

react-query / devtools 설치

npm install @tanstack/react-query @tanstack/react-query-devtools

QueryClientProvier / devtools 추가

import { QueryClient, QueryClientProvider } from 'react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
 // client 생성
 const queryClient = new QueryClient();
 
 export default function App() {
   return (
     // 앱에 client 제공
     <QueryClientProvider client={queryClient}>
       // devtools
       <ReactQueryDevtools initialIsOpen={true} />
       <Main />
     </QueryClientProvider>
   )
 }

useQuery

import { useQuery } from 'react-query';
import { getTodos } from '../my-api';

function Todos() {
   // useQuery 에 key, api 호출 함수를 전달
   // 메모리에 해당 key 값으로 데이터가 보관됨 (데이터 캐시)
   const { isLoading, error, data: todos } = useQuery(['todos'], getTodos);
 
   // 로딩중일 경우 true
   if (isLoading) return <p>Loading...</p>;
   
   // 에러가 발생할 경우 true
   if (error) return <p>Error!</p>;
 
   return (
     <div>
       <ul>
         {query.data.map(todo => (
           <li key={todo.id}>{todo.title}</li>
         ))}
       </ul>
     </div>
   )
 }

첫 번째 인자로 쿼리 key 를 전달함
두 번째 인자로 데이터를 받아오는 함수를 전달함
쿼리 key 에 의해서 데이터가 캐시됨
서로 다른 컴포넌트에서 쿼리 key가 동일하고 데이터가 캐시되어 있다면 해당 데이터 공유 가능

useQuery(['todo', 5 ], ...);

useQuery(['todos', { type: 'done' }], ...);

useQuery(['todos', id], () => axios.get(`http://.../${id}`));

쿼리 key 는 조합해서 사용할 수 있음
쿼리가 변수에 의존하는 경우 쿼리 key 에도 추가해 주어야 함

useMutation

import { useQuery, useMutation, useQueryClient } from 'react-query';
import { getTodos, postTodo } from '../my-api';

function Todos() {
   const queryClient = useQueryClient();
 
   const { isLoading, error, data: todos } = useQuery(['todos'], getTodos);
 
   const mutation = useMutation(postTodo, {
     onSuccess: () => {
       // 캐시 새로고침
       queryClient.invalidateQueries(['todos']);
     },
   })
 
   return (
     <div>
       <ul>
         {query.data.map(todo => (
           <li key={todo.id}>{todo.title}</li>
         ))}
       </ul>
 
       <button
         onClick={() => {
           mutation.mutate({
             id: Date.now(),
             title: '빨래하기',
           })
         }}
       >
         할일 추가
       </button>
     </div>
   )
 }