RTK Query 간단 사용

RTK Query를 왜 나왔나?

데이터 fetching과 caching 로직을 줄이기 위해서!

데이터를 가져오는데는 해줘야 할 일이 많습니다.

•

가져오는동안 로딩창

•

중복데이터 호출도 고려

•

최적화

•

캐시 관리

기존엔 상태 관리와 엮어서 해결하려던 부분을 별도의 작업이라고 생각하기 시작했습니다.

RTK Query는 createSlice랑 createAsyncThunk로 만들어진 리덕스 라이브러리입니다. 그리고 Query를 통해서 데이터 로딩 등 컴포넌트를 만들고 화면을 구성하는데 필요한 값들을 제공해줍니다.

초기 세팅 방법

RTK Query의 경우 RTK와 같이 사용하게 된다면, 하나의 store로 환경이 구성됩니다. 기본적인 RTK 설정에 middleware를 통해 API query들을 추가해주면 됩니다.

구조

기본적으로 공식문서에서 권장하는 구조는 아래와 같습니다.

graph TB
A[api.ts] --> B[middleware]
A --> C[reducer]
A --> D[reducerPath]
B --> E[store.ts]
C --> E
D --> E
E --> F[Provider.tsx]

Mermaid
복사

Provider에 Store configure를 넣어주고, configure는 각 api.ts파일들에서 가져온 값들이 들어 있습니다.

예시 코드

createApi를 통해서 option들을 설정해주면 reducerPath, reducer, middleware들이 return됩니다.

export const api = createApi({
	// 쿼리에 대한 동작 선언
	baseQuery: fetchBaseQuery({ baseUrl: '/' }),
	// 요청이 보내질 장소
	endpoints: (builder) => ({
		// 선언해두면 발동
		getApi: builder.query({
			query: () => '/'
		}),
		// 함수를 호출 시킬 시 발동!
		setApi: builder.mutation({
			// 요청을 보낼 URL
			query: ({id, ...patch}) => ({
				url: `/set/${id}`,
				// GET, PATCH, DELETE 모두 가능
				method: 'POST' ,
				body: patch
			})
		})
});

// API 호출을 위해 사용!
export const { useGetApiQuery } = api;
// store 세팅을 위해 사용!
export const { reducerPath, reducer, middleware } = api
JavaScript
복사
api.ts

reducerPath, reducer, middleware를 stored의 configure로 넣어줍니다.

import { reducerPath, reducer, middleware } from './api.ts';
import { middleware2 } from './api2.ts';

export const store = configureStore({
	reducer: {
		[reducerPath]: reducer
	},
// 사용하는 커스텀, 라이브러리 미들웨어
	middleware: gDM => gDM().concat(middleware, middleware2)
});

// refetch 관련 동작을 사용할 때 선택적으로
setupListeners(store.dispatch);
JavaScript
복사
store.ts

해당 store를 Provider에 넣어 root에서 children을 감싸줍니다.

import { Provider } from 'react-redux';

// 기존 Redux가 있을 시 사용하면 안됩니다
export function ReduxProvider({children}) {
	...
	return (
		<Provider store={store}>
			{children}
		</Provider>
	)
}
JavaScript
복사
reduxProvider.tsx

API 기본 사용하기

useQuery

컴포넌트가 렌더링될 때 useQuery의 api가 동작합니다.

import { api, useGetApiQuery, usePostApiMutation } = from './api';

export default function App(){
	const { data, isLoading, isFetching, error } = useGetApiQuery();
	// 똑같이 사용가능한 방식이에요
	const { data, isLoading, isFetching, error } = api.endpoints.getApi.useQuery();

...
}
JavaScript
복사
page.tsx

특정 trigger 통해 동작해야 하는 경우 LazyQuery를 사용하면 됩니다.

import { api, useGetApiQuery, usePostApiMutation } = from './api';

export default function App(){
	const [trigger] = useLazyGetApiQuery();

	const handleClick = async () => {
		await trigger()
	}

...
}
JavaScript
복사
page.tsx

useMutation

post나 patch같이 값을 수정해주는 API의 경우 mutation을 사용해주면 됩니다.

const [mutationApi, mutationData] = usePostApiMutation();
	// 똑같이 사용가능한 방식이에요
const [mutationApi, mutationData] = api.endpoints.getApi.usePostApiMutation(id);

...
const handleClick = async () => {
	await mutationApi(body);
}
JavaScript
복사
page.tsx

Props, Return

useQuery와 useMutation을 사용할 때 이용하는 props와 return값으로 공식문서를 참고하시면 됩니다.

// query
const { data, currentData, error, isUninitialized, isLoading, isFetching, isSuccess, isError}
= useQuery(skip, pollingInterval, selectFromResult, refetchOnMountOrArgChange, refetchOnFocus, refetchOnReconnect)

// mutation
const { data, error, isUninitialized, isLoading, isSuccess, isError, reset }
= useMutation(selectFromResult, fixedCacheKey)
JavaScript
복사

기능 사용

RTK Query의 특징으론 중복되는 기능들이 있기도 하지만 정말 다양한 기능들이 들어가 있다는 점입니다.

Custom BaseQuery

baseQuery를 axios로 커스텀한 예제 코드입니다. [공식문서]

const axiosBaseQuery =
  (
    { baseUrl }: { baseUrl: string } = { baseUrl: '' }
  ): BaseQueryFn<
    {
      url: string
      method: AxiosRequestConfig['method']
      data?: AxiosRequestConfig['data']
      params?: AxiosRequestConfig['params']
    },
    unknown,
    unknown
  > =>
  async ({ url, method, data, params }) => {
    try {
      const result = await axios({ url: baseUrl + url, method, data, params })
      return { data: result.data }
    } catch (axiosError) {
      let err = axiosError as AxiosError
      return {
        error: {
          status: err.response?.status,
          data: err.response?.data || err.message,
        },
      }
    }
  }

export const rootApi = createApi({
//   baseQuery: fetchBaseQuery({ baseUrl: '/' }),
  baseQuery: axiosBaseQuery({ baseUrl: '/' }),
  endpoints: () => ({}),
});
JavaScript
복사

Api Config Override

injectEndpoints를 사용해서 root api를 override해 기본 설정들을 재사용해 api를 사용하는 코드입니다.

// injectionEndpoints
// 오버라이딩 할지 말지 overrideExisting 옵션을 통해 설정 가능

export const customApi= rootApi.injectEndpoints({
  tagTypes: ['login'],
  endpoints: (build) => ({
    getApi: build.query({
      query: (id) => `/${id}`,
			// API 성공했을 때
			transformResponse
			// 실패 했을 때
			transformErrorResponse
			// key
			providesTags
			// 캐시값을 조절 가능
			onCacheEntryAdded
			// 캐시 유지시간
			keepUnusedDataFor
    }),
    postApi: build.mutation({
							// queryFn : query를 좀 더 자세히 쓸 때
				query: ({id, ...patch}) => ({
							url: `/set/${id}`,
							method: 'Post' ,
							body: patch
			})
			transformResponse
			transformErrorResponse
			// 무효화 시킬 key
			invalidatesTags
			// 캐시 업데이트 방식 지정
			updateQueryData
    }),
  }),
});

// Auto-generated hooks
export const { useGetApiQuery, usePostApiMutation } = customApi;
// useQuery : 데이터 가져오기
// useQuerySubscription : refetch용이면서 자동 트리거
// useQueryState : 캐쉬된 데이터 읽기
// useLazyQuery : 데이터를 가져오는 시점을 수동으로
// useLazyQuerySubscription : refetch 수동으로 제어 및 캐시 존재시 스킵
// Possible exports
export const { endpoints, reducerPath, reducer, middleware } = customApi;

JavaScript
복사

Custom Respone

api에서 받아온 response나 error를 custom해서 return 할 수 있습니다.

export const customApi = rootApi.injectEndpoints({
  endpoints: build => ({
    getApi: build.query({
      query: () => `/${id}`,
      transformResponse: ({ list }) => {
        const itemList = list.filter((item) => !!item);

        return {
          list: itemList
        };
      },
    }),
  }),
});
JavaScript
복사

Side Action

RTK와 같이 사용할 때 query의 추가적인 동작을 선언해줄 수 있습니다.

export const customSlice = createSlice({
	extraReducers: builder => {
	    builder.addMatcher(customApi.endpoints.getApi.matchFulfilled, (state, action) => {
	      if (
	        !state.data && action.payload
	      ) {
	        state.data = action.payload;
	      }
	    });
	  },
});
JavaScript
복사

추가 기능

Optimistic Update and Pessimistic Update

pessimistic update → 캐쉬 된 데이터를 업데이트하기 전 서버의 응답을 기다립니다.

optimistic update → 서버의 응답을 기다리기전에 사용자가 원하는 방식으로 우선적으로 업데이트하는 방식이라 보시면 됩니다.

[예제 코드]

updateQueryData RTKquery로 클라이언트에서만 쿼리 데이터를 조작하고 싶다면

prefetch

데이터 미리 가져오기로 hover 등 여러 마우스 동작에 원하는 동작을 미리 실행할 수 있습니다.

dispatch(api.util.prefetch('getPosts', undefined, { force: true }))
JavaScript
복사

updateQueryData

query로 가져온 데이터를 업데이트 해줍니다.

const patchCollection = dispatch(
  api.util.updateQueryData('getPosts', undefined, (draftPosts) => {
    draftPosts.push({ id: 1, name: 'Teddy' })
  })
)
JavaScript
복사

upsertQueryData

캐시에 업서트하기위한 인공 API 요청 작업 생성자입니다.

await dispatch(
  api.util.upsertQueryData('getPost', { id: 1 }, { id: 1, text: 'Hello!' })
)
JavaScript
복사