아래 코드는 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;
}
동작 원리
- 모든 요청 직전에 실행된다.
- Redux store에서
auth.token을 가져온다. - 토큰이 있으면 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}`,
}),
}),
});
전체 흐름
- 컴포넌트에서
useGetLeagueQuery(id)호출 - RTK Query가 요청 실행
prepareHeaders에서 JWT 자동 삽입- 서버 요청
- 응답 캐싱 및 상태 자동 관리
요약
이 설정은 Redux에 저장된 JWT 토큰을 자동으로 헤더에 포함하여 모든 API 요청을 처리하는 RTK Query의 공통 베이스 구성