react-Query 환경 구축하기

1. react-query 설치

npm i @tanstack/react-query

2. react-qeury eslint 플로그인 설치

npm i -D @tanstack/eslint-plugin-query

 

@tanstack/eslint-plugin-query

ESLint를 사용하면 깔끔한 사용법과 일반적인 실수를 방지하는 데 도와준다.

(사용할 때는 이를 확인하지 못해 아쉬웠다.😥)

설치한 이후에 .eslintrc(esLint 설정 파일)에 플러그인과 확장을 추가하면 된다.

{
  "plugins": ["@tanstack/query"]
  "extends": ["plugin:@tanstack/eslint-plugin-query/recommended"]
}

만약 확장이 부담스럽다면 일부 룰만 적용해서 간소화해보자

https://tanstack.com/query/latest/docs/react/eslint/eslint-plugin-query

{
  "rules": {
    "@tanstack/query/exhaustive-deps": "error",
    "@tanstack/query/prefer-query-object-syntax": "error",
    "@tanstack/query/stable-query-client": "error"
  }
}

 

4. react-qeury-devtools 설치

npm i @tanstack/react-query-devtools

https://tanstack.com/query/latest/docs/react/devtools

 

5. 아래와 같이 devtools와 QueryClientProvider 설정

App.tsx

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

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 1000 * 60 * 5,
      gcTime: 1000 * 60 * 5,
      retry: 0,
      refetchOnWindowFocus: false
    }
  }
})

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* The rest of your application */}
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  )
}

 

참고자료

https://velog.io/@wns450/a1l1x94e