RTK Query createApi 공통 설정 정리

아래 코드는 RTK Query의 공통 API 베이스 설정
모든 서버 요청에 대해 기본 URL과 Authorization 헤더를 자동으로 설정함.

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
import type { RootState } from "../../app/store";

export const baseApi = createApi({
  reducerPath: "api",
  baseQuery: fetchBaseQuery({
    baseUrl: import.meta.env.VITE_API_BASE_URL ?? "/api",
    prepareHeaders: (headers, { getState }) => {
      const token = (getState() as RootState).auth?.token;
      if (token) {
        headers.set("Authorization", `Bearer ${token}`);
      }
      return headers;
    },
  }),
  endpoints: () => ({}),
});

---

1. createApi

RTK Query의 API 루트 객체를 생성한다. 이후 injectEndpoints를 통해 실제 API를 추가한다.

2. reducerPath

reducerPath: "api"

Redux store에 등록될 slice 이름이다.

{
  auth: {...},
  api: {...}
}

요청 상태, 캐시 데이터 등이 이 위치에 자동 저장된다.

3. baseQuery

fetchBaseQuery는 fetch 기반의 경량 HTTP 클라이언트다. Axios를 대체할 수 있다.

4. baseUrl

baseUrl: import.meta.env.VITE_API_BASE_URL ?? "/api"

• .env에 VITE_API_BASE_URL이 있으면 사용
• 없으면 /api 사용

예시:

query: () => "/league"

실제 요청 URL:

/api/league
또는
https://server.com/league

---

5. prepareHeaders (핵심)

prepareHeaders: (headers, { getState }) => {
  const token = (getState() as RootState).auth?.token;
  if (token) {
    headers.set("Authorization", `Bearer ${token}`);
  }
  return headers;
}

동작 원리

1. 모든 요청 직전에 실행된다.
2. Redux store에서 auth.token을 가져온다.
3. 토큰이 있으면 Authorization 헤더에 자동 추가한다.

로그인 이후 모든 요청에 자동으로 아래 헤더가 붙는다:

Authorization: Bearer {JWT_TOKEN}

각 API마다 토큰을 따로 설정할 필요가 없다.

---

6. endpoints

endpoints: () => ({})

현재는 비어 있는 상태다. 실제 API는 다음처럼 확장한다.

export const leagueApi = baseApi.injectEndpoints({
  endpoints: (builder) => ({
    getLeague: builder.query({
      query: (id: string) => `/league/${id}`,
    }),
  }),
});

---

전체 흐름

1. 컴포넌트에서 useGetLeagueQuery(id) 호출
2. RTK Query가 요청 실행
3. prepareHeaders에서 JWT 자동 삽입
4. 서버 요청
5. 응답 캐싱 및 상태 자동 관리

---

요약

이 설정은 Redux에 저장된 JWT 토큰을 자동으로 헤더에 포함하여 모든 API 요청을 처리하는 RTK Query의 공통 베이스 구성