[React] 🌺React Query 사용법

▷ React Query

React Query는 React에 종속적인 라이브러리이며,
React 애플리케이션에서 데이터를 관리하고 가져오는 데 매우 유용하다.

Redux에서 서버 데이터를 다룰 때 post, put, patch 메소드를 사용하게 되면,
데이터를 수정하고 다시 get메소드 요청을 통해 서버와의 동기화가 필요해진다.

이때, React Query의 invalidateQueries를 사용하면 된다.
React Query는 get으로 받은 데이터를 state처럼 가지고 있고,
setState(post, put, patch)하면 invalidateQueries를 호출해서
새로운 데이터로 refetching 할 수 있다.

즉, React Query는 서버 데이터를 다룰 때, API 요청을 보내고 응답을 받아오는 것은 물론, 캐시를 통해 클라이언트 측에서도 데이터를 관리할 수 있다. 이를 통해 서버와의 동기화 문제를 해결할 수 있다는 것.

---

🌺 설치

npm install react-query

---

🌺 QueryClientProvider, QueryClient

// 가져오기
import { QueryClientProvider, QueryClient } from "react-query"

// 쿼리 클라이언트를 생성
// 쿼리 클라이언트는 쿼리와 서버의 데이터 캐시를 관리하는 클라이언트임
const queryClient = new QueryClient();

function App () {
  <QueryClientProvider client={queryCient}>
    <Header />
    <Main />
    <Footer />
  </QueryClientProvider>
}

---

🌺 useQuery

서버에서 데이터를 가져오기 위해 사용한다.

useQuery의 첫 번째 인자 → QueryKey(유니크해야 함)
useQuery의 두 번째 인자 → QueryFunction(데이터를 받아오는 비동기 함수)

/* Main.js */
// userQuery 가져오기
import { useQuery } from "react-query"

const Main = () => {
  // 서버의 데이터를 가지고 오는 함수
  const getInfo = () => {
    return axios.get("/user").then((res) => res.data)
  }
    
  // 구조분해할당
  const { data, isLoading, isError } = useQuery("keynameUserInfo", getInfo);
  
  if (isError) return <span>ERROR</span>
  if (isLoading) return <span>Loading...</span>
  
  return (
  	<>
      <span>{data?.userName}</span>
    </>
  )
}

export default Main;

여기서 사용한 data는 axios로 가져온 data이며,
isLoading과 isError는 queryFn을 실행하는 동안의
로딩, 에러 여부에 따라 boolean 값으로 받아올 수 있다.

useQuery에서 반환되는 객체는 여러가지가 있다.

const result = useQuery("keynameUserInfo", getInfo);
console.log(result);

// 콘솔창에 찍힘
data,
dataUpdatedAt,
error,
errorUpdatedAt,
failureCount,
isError,
isFetched,
isFetchedAfterMount,
isFetching, // 비동기쿼리가 해결되지 않았음
isIdle,
isLoading, // 쿼리함수가 해결되지 않았고, 캐시된 데이터도 없다
isLoadingError,
isPlaceholderData,
isPreviousData,
isRefetchError,
isRefetching,
isStale,
isSuccess,
refetch,
remove,
status,

---

🌺 useMutation

useQuery와 다르게 mutation은
데이터를 생성, 업데이트, 삭제할 때 사용된다.

invalidateQueries는 queryKey 값 혹은
키들의 배열을 인자로 받으며, 해당 쿼리들을 무효화시킨다.

(무효화한 모든 쿼리가 재호출되는 것이 아니라,
화면 렌더링에 연관된 쿼리만 재호출되고
나머지는 stale 상태로만 전환되는 것임)

import { useQuery, useMutation, useQueryClient } from "react-query"

const Main = () => {
  ...
  const { data } = useQuery("keynameUserInfo", getInfo);
  
  // 쿼리 클라이언트 가져오기
  const queryClient = useQueryClient();
  
  // 서버의 데이터를 업데이트하는 함수
  const updateInfo = (userName) => {
    return axios.put(`/update-username?username=${username}`)
  }
  
  // useMutation 첫번째 인자 => QueryFunction
  // useMutation 두번째 인자 => 옵션
  const mutation = useMutation(updateInfo, {
    onSuccess: () => {
      // 뮤테이션이 성공적으로 끝났을때,
      // 'keynameUserInfo' 키가 가진 모든 쿼리를 무효화시킴
      queryClient.invalidateQueries("keynameUserInfo");
    },
  })
  
  mutation.mutate("변경할_새로운_유저_이름")
  
  return (
    <>
      <span>{data?.userName}</span>
    </>
  )
}

/*
* useMutation에서 가장 많이 쓰는 3가지 옵션
* - optimisticUpdate: 서버로 전송되기 전에, 이미 변화된 상태를 즉시 UI에 반영함
* - invalidateQueries: 뮤테이션이 성공적으로 실행된 후, cache에서 query를 삭제
* - setQueryData: 뮤테이션이 성공적으로 실행된 후, cache에 있는 query 결과를 업데이트
*/

/*
* useMutation hook에서 제공하는 속성
* - onMutate: 뮤테이션이 실행되기 전에 실행
* - onError: 뮤테이션이 실패한 경우 호출
* - onSettled: 뮤테이션이 완료된 후에 호출되는 함수
* - onSuccess: 뮤데이션이 성공한 경우 호출되는 함수
*/

---

🌺 staleTime, cacheTime

이 두 옵션은 각각 데이터를 언제 가져올지와 얼마나 오래 유지할지를 제어한다.

staleTime
데이터가 캐시에서 만료되었지만 여전히 유효한 데이터를 사용하여 렌더링을 허용하는 시간(밀리 초)을 설정한다. 이 시간 내에는 새로운 데이터를 가져 오지 않고 캐시된 데이터를 계속 사용한다. 따라서 애플리케이션 성능을 향상시키고 불필요한 네트워크 요청을 방지할 수 있다.

// 사용 예시 - useQuery에서 개별적으로 설정함
// (queryClient에서 전역적으로 설정도 가능)
const { data } = useQuery("keynameUserInfo", getInfo, { staleTime: Infinity });

cacheTime
데이터가 캐시에서 만료되어 새로운 데이터를 가져와야 하는 시간(밀리 초)을 설정한다. 이 시간 이후에는 캐시된 데이터가 만료되고 새로운 데이터를 가져와 업데이트한다.

보통 캐시 데이터를 오래 유지하고 불필요한 네트워크 요청을 줄이기 위해
staleTime을 더 길게, cacheTime을 더 짧게 설정하는 것이 일반적이다.

---

🌺 Suspense

전역으로 Suspense를 설정해도 되고

import { QueryClient, QueryClientProvider } from '@tanstack/react-query'

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      suspense: true,
    },
  },
})

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Main />
    </QueryClientProvider>
  )
}

각각의 useQuery에 설정해 줘도 된다.

import { useQuery } from '@tanstack/react-query'

useQuery(queryKey, queryFn, { suspense: true })

Router에서 suspense와 react-query는 다음과 같이 사용할 수 있다.
Home과 Aboute 컴포넌트의 useQuery에서 뽑아낸
isLoading으로 따로 처리하지 않아도 로딩 처리가 잘 된다.

import { BrowserRouter, Routes, Route } from "react-router-dom"
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { Suspense } from "react"
...

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      suspense: true,
    },
  },
})

function Loading = () => {
  return <div>Loading...</div>
}

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Suspense fallback={<Loading />}>
        <BrowserRouter>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/about" element={<About />} />
          </Routes>
        </BrowserRouter>
      </Suspense>
    </QueryClientProvider>
  )
}

---

🌺 useQueries

하지만 react-query에서 Suspense를 사용하면 병렬적으로 동작하지는 않는다.
병렬적으로 동작시키기 위해선 useQuery가 아니라 useQueries라는 훅을 사용해야 한다.

❗️참고) 여러 개의 query를 병렬로 실행시킬 수 있게 해주는 useQueries는 Suspense와 함께 사용 시 정상적으로 동작하지 않는 이슈가 있었지만, 이번 v4.5.0 패치에 해당 사항이 수정되었다.

import { useQueries } from "react-query"

const results = useQueries({
  queries: [
    { queryKey: ["getUser"], queryFn: getUser, staleTime: Infinity},
    { queryKey: ["getHistory"], queryFn: getHistory, staleTime: Infinity}
  ]
})

🔫Suspense 사용법 보러가기
👉 React Query 공식문서 보러가기
👉 Reacr-query(공식문서) - Suspense ＋ Parallel Queries ＋ useQueries