📌소개

강의링크 바로가기

📌배운내용 정리

Link to Tanstack Query Devtools

Tanstack Query Devtools install

$ npm i @tanstack/react-query-devtools
# or
$ pnpm add @tanstack/react-query-devtools
# or
$ yarn add @tanstack/react-query-devtools

how to use Tanstack Query Devtools

// filename : Root.tsx
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
... 중략

export default function Root() {
  return (
    <Box>
      <Header />
      <Outlet />
      <ReactQueryDevtools initialIsOpen={true} panelPosition={"right"}/> // 😍👍💖🤩
    </Box>
  );
}

// filename : api.ts
import { QueryFunctionContext } from "@tanstack/react-query";
import axios from "axios";

const instance = axios.create({
  baseURL: "http://127.0.0.1:8000/api/v1/",
});

//... (중략)

export const getRoom = ({ queryKey }: QueryFunctionContext) => {
  const [_, roomPk] = queryKey;
  return instance.get(`rooms/${roomPk}`).then((response) => response.data);
};

학습한 내용 순서 흐름 정리

1. Tanstack Query Devtools 를 설치(install)하였습니다.

npm i @tanstack/react-query-devtools

2. Root.tsx 파일에 ReactQueryDevtools 를 임포트 하였습니다.

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

// ...중략
export default function Root() {
  
  return (
    <Box>
      <Header />
      <Outlet />
      <ReactQueryDevtools initialIsOpen={true} panelPosition={"right"}/>
    </Box>
  );
}

3. RoomDetail.tsx 파일에서

import { useQuery } from "@tanstack/react-query";
import { useParams } from "react-router-dom";
import { getRoom } from "../api";

export default function RoomDetail() {
  const { roomPk } = useParams();
  const { isLoading, data } = useQuery([`rooms`, roomPk], getRoom); // getRoom 함수 호출
  return <h1>hello</h1>;
}

• useParams() 함수를 이용하면 클라이언트가 요청한 파라미터 값을 알아낼 수 있다.

• 여기서는 useParams() 함수를 이용해 알아낸 파라미터 값을 roomPk 변수에 담았다.

• 이후 roomPk 값을 useQuery 함수에 이용하여 getRoom 함수를 호출합니다. 그리고 getRoom 함수의 리턴 값을 rooms 키 값에 저장합니다.

• 참고로 useQuery 함수는 매우 매우 매우 간단합니다. 예를 들어서

• useQuery([rooms, roomPk], getRoom) 라고 할경우 이것은 rooms/{roomPk} url주소로 쿼리 요청을 보내되 getRoom 함수를 이용한다는 것 입니다. 이게 끝임. 다른 예시를 하나 더 보겠습니다.

• useQuery<IReview[]>([rooms, roomPk, reviews], getRoomReviews); 는

• rooms/{roomPk}/reviews 주소로 쿼리 요청을 보내되 getRoomReviews 함수를 이용한다는 것 입니다. 이게 끝임. 어려울 게 하나도 없다.

4. api.ts 파일에서

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

const instance = axios.create({
    baseURL: "http://127.0.0.1:8000/api/v1/",
});
//...중략
export const getRoom = ({ queryKey }: QueryFunctionContext) => {
    const [_, roomPk] = queryKey; // const [_, roomPk] 는 queryKey 어레이 안에 들어있는 요소 중 1번째 꺼는 _ 로 받아오고 두번째 꺼는 roomPk 로 받아오라는 의미다. 알고 나면 별거 없다.
    return instance.get(`rooms/${roomPk}`).then((response) => response.data);
};

• getRoom 함수 호출시 { queryKey } 값 내부를 살펴보면 여러개의 데이터가 담겨 있는 어레이란 사실을 알 수 있다. 궁금하면 console.log 로 한 번 찍어보자. queryKey 어레이 안헤 들어있는 데이터 들 중 2번째 인덱스에 담겨 있는 값이 id 즉 roomPk 값이다. 우리는 이 값을 이용해 백엔드 서버에 데이터를 요청하면 된다. 백엔드 서버에 요청할 주소는 "http://127.0.0.1:8000/api/v1/" + rooms/${roomPk} 가 될 것이다.

📌Grab a Keyword

Tanstack Query Devtools

📌Grab a Key Concept

📌한줄평