[ReactQuery] (2) Nextjs 프로젝트에 ReactQuery 적용

Tanstack (ReactQuery) 대표이미지

 

 

접근 (요약)

Next.js 를 통해 개발을 진행하는데, Web App의 서버 상태를 관리하는 라이브러리가 필수적이다.

공식 웹사이트를 확인 해보면, npm 에서의 누적 다운로드 수가 18억에 육박하고 실시간으로 수치가 상승하는 것을 보기만 해도

얼마나 핫한 기술인지 확인이 가능하다. 이를 프로젝트에 도입하여 치열하게 연구를 해보고자 한다.

(예전에 개발 때에 드문드문 활용했던 것 그 이상으로 친숙해지고자 한다)

 

  1. ReactQuery 설치

- npm install @tanstack/react-query

- npm install @tanstack/react-query-devtools

 

  2. ESLint Plugin 설치

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

- 기타 설정 (.eslintrc.json)

 

  3. ReactQuery 설정

- (1) queryClient.ts (→index.ts) 작성 후 내보내기 (feat. layout.tsx)

- (2) (node_modules 속) QueryClientProvider.tsx 다루기 (→QueryClientProviderWrapper.tsx) (각종 import)

- (3) layout.tsx에 ReactQuery 사용하고 구동 후 정상확인

 

---

방법

   1. React Query 설치

npm install @tanstack/react-query

npm install @tanstack/react-query-devtools

 

* devtools를 dependency성이 아닌, 일반으로 설치하는 이유?

- 앱 컴포넌트들에서 devtools를 가져와 추가한다음, devtools를 사용해 node 환경을 테스트하게 되는데,

- node 환경이 development인 경우 이를 포함하지 않기 때문이다.

 

# 참고

https://tanstack.com/query/latest/docs/framework/react/devtools#devtools-in-production

import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
By default, React Query Devtools are only included in bundles when process.env.NODE_ENV === 'development', so you don't need to worry about excluding them during a production build.

>> Lazy load 를 할 경우, Bundles에서 제외되도록 설정할 수 있다.

>> 또한 브라우저 콘솔에서 window.toggleDevtools를 호출할 수도 있다.
- 이를 통해, 프로덕션 환경에서도 dev tools를 사용할 수 있다.

---

   2. ESLint Plugin 설치

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

 

- 설치 이후, eslint.cjs (eslint config)의 extends array에 한 줄 추가할 것이 있음

[eslintrc] 

To enable all of the recommended rules for our plugin, add plugin:@tanstack/query/recommended in extends:

[공식문서에서는]
{
  "extends": ["plugin:@tanstack/query/recommended"]
}

→ [강의에선]     "plugin:@tanstack/eslint-plugin-query/recommended",

 

(1). exhaustive dependencies 규칙

{
  "plugins": ["@tanstack/query"],
  "rules": {
    "@tanstack/query/exhaustive-deps": "error"
  }
}

- 위와 같이 설정해주면, QueryKey(쿼리키)에 QueryFn(쿼리함수)의 모든 dependencies가 포함되어

- dependencies가 변경되는 경우, Query가 다시 실행되도록 할 수 있다.

---

   3. ReactQuery 설정

(1). queryClient.ts (→ index.ts) 작성 후 내보내기 (feat. layout.tsx)

 

1. root/react-query 폴더🗂️ 생성

2. root/react-query/index.ts 파일📄 생성

 

[./react-query/index.ts]

import {QueryClient} from "@tanstack/react-query";

export const queryClient = new QueryClient();

- queryClient를 만들어 내보내, 사용할 수 있게 만드는 것부터 시작

 

(2). (node_modules 속) QueryClientProvider.tsx 다루기 (→ QueryClientProviderWrapper.tsx) (각종 import)

 

(ㄱ-1). QueryClientProviderWrapper.tsx 생성

'use client';

import {queryClient} from "@/react-query/index";
import {QueryClientProvider} from "@tanstack/react-query";
import {ReactQueryDevtools} from "@tanstack/react-query-devtools";

export default function QueryClientProviderWrapper({children}: { children: React.ReactNode }) {

  return (
    <>
      <QueryClientProvider client={queryClient}>
        {children}
        <ReactQueryDevtools/>
      </QueryClientProvider>
    </>
  );
}

- QueryClientProvider → queryClient → ReactQueryDevTools 

 

<ReactQueryDevTools /> 는 QueryClientProvider 내부에만 존재한다면 어디든 OK

 

---

(ㄴ-1). (node_modules 제공되는) (if) QueryClientProvider.tsx 사용

'use client'
import * as React from 'react'

import type { QueryClient } from '@tanstack/query-core'

export const QueryClientContext = React.createContext<QueryClient | undefined>(
  undefined,
)

export const useQueryClient = (queryClient?: QueryClient) => {
  const client = React.useContext(QueryClientContext)

  if (queryClient) {
    return queryClient
  }

  if (!client) {
    throw new Error('No QueryClient set, use QueryClientProvider to set one')
  }

  return client
}

export type QueryClientProviderProps = {
  client: QueryClient
  children?: React.ReactNode
}

export const QueryClientProvider = ({
  client,
  children,
}: QueryClientProviderProps): React.JSX.Element => {
  React.useEffect(() => {
    client.mount()
    return () => {
      client.unmount()
    }
  }, [client])

  return (
    <QueryClientContext.Provider value={client}>
      {children}
    </QueryClientContext.Provider>
  )
}

 

2. 제공된 것을 가져다가 사용하기만 하면 된다.

import {QueryClientProvider} from "@tanstack/react-query";
import {ReactQueryDevtools} from "@tanstack/react-query-devtools";
import {queryClient} from "@/react-query/queryClient";

export function App() {
  return (
      <QueryClientProvider client={queryClient}>
            <Routes>
              <Route path="/" element={<Home/>}/>
              <Route path="/Staff" element={<AllStaff/>}/>
              <Route path="/Calendar" element={<Calendar/>}/>
              <Route path="/Treatments" element={<Treatments/>}/>
              <Route path="/signin" element={<Signin/>}/>
              <Route path="/user/:id" element={<UserProfile/>}/>
            </Routes>
        <ReactQueryDevtools/>
      </QueryClientProvider>
  );
}

 

(3). layout.tsx에 ReactQuery 사용할 준비하기 (각종 import)

 

1. root/app/layout.tsx 📄 접근

[./app/layout.tsx]

import type {Metadata} from "next";
import {Geist, Geist_Mono} from "next/font/google";
import "./globals.css";
import QueryClientProviderWrapper from "@/react-query/QueryClientProviderWrapper";

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
                                     children,
                                   }: Readonly<{
  children: React.ReactNode;
}>) {

  return (
    <html lang="en">
    <body>
    <QueryClientProviderWrapper>
      {children}
    </QueryClientProviderWrapper>
    </body>
    </html>
  );
}

- 만들어놓은 <QueryClientProviderWapper>로 감싼다

---

Devtools가 적용된 모습