📚 Reference

• 공식 사이트 1
• 공식 문서 1
• 참고 자료 1
• 참고 자료 2

설치

# yarn
yarn add react-query

# npm
npm i react-query

# 에러가 발생할 경우
npm i react-query --legacy-peer-deps

초기 설정

• _app.tsx

• 예시 1

  // _app.tsx
  import "../styles/globals.css";
  import type { AppProps } from "next/app";
  import { useState } from "react";
  import { QueryClient, QueryClientProvider } from "react-query";
  import { ReactQueryDevtools } from "react-query/devtools";
  
  declare module "react-query/types/react/QueryClientProvider" {
    interface QueryClientProviderProps {
      children?: React.ReactNode;
    }
  }
  
  function MyApp({ Component, pageProps }: AppProps) {
    const [queryClient] = useState(() => new QueryClient());
  
    return (
      <>
        <QueryClientProvider client={queryClient}>
          <Component {...pageProps} />
          <ReactQueryDevtools initialIsOpen={false} position="bottom-right" />
        </QueryClientProvider>
      </>
    );
  }
  
  export default MyApp;
  

  • QueryClient()

    const [queryClient] = useState(() => new QueryClient());
    

    • 캐시를 관리하기 위해 QueryClient 인스턴스를 생성한 후 QueryClientProvider를 통해 컴포넌트가 QueryClient 인스턴스에 접근할 수 있도록 App컴포넌트 최상단에 추가한다.
    • QueryClient를 이용하여 QueryClient 인스턴스를 만들어 준다.
    • 그리고 이를 QueryClientProvider의 props로 전달해준다.

  • ReactQueryDevtools

    <ReactQueryDevtools initialIsOpen={false} position="bottom-right" />
    

    • ReactQueryDevtools는 개발 도구로 개발 환경이 development(NODE_ENV=development)일 때만 나타난다.

  • QueryClientProviderProps

    declare module "react-query/types/react/QueryClientProvider" {
      interface QueryClientProviderProps {
        children?: React.ReactNode;
      }
    }
    

    • 참고로 Delcare Module ~ interface 코드는 React가 18버전으로 업데이트 되면서 나타나는 타입 이슈를 해결하기 위해 작성한 코드이다.
    • 이슈와 관련된 내용은 여기를 참고하라.

  • QueryClientProvider

    return (
        <>
          <QueryClientProvider client={queryClient}>
            <Component {...pageProps} />
            <ReactQueryDevtools initialIsOpen={false} position="bottom-right" />
          </QueryClientProvider>
        </>
    );
    

    • React를 이용하는 분들은 App.js 혹은 App.tsx에서 QueryClientProvider로 감싸주면 된다.

• 예시 2

  // _app.tsx
  import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
  
  // NEVER DO THIS:
  // const queryClient = new QueryClient()
  //
  // Creating the queryClient at the file root level makes the cache shared
  // between all requests and means _all_ data gets passed to _all_ users.
  // Besides being bad for performance, this also leaks any sensitive data.
  
  export default function MyApp({ Component, pageProps }) {
    // Instead do this, which ensures each request has its own cache:
    const [queryClient] = React.useState(
      () =>
        new QueryClient({
          defaultOptions: {
            queries: {
              // With SSR, we usually want to set some default staleTime
              // above 0 to avoid refetching immediately on the client
              staleTime: 60 * 1000,
            },
          },
        }),
    )
  
    return (
      <QueryClientProvider client={queryClient}>
        <Component {...pageProps} />
      </QueryClientProvider>
    )
  }