RTK Query 엔드포인트 url 변수로 변경하기 및 데이터 조작하기

엔드포인트 url 변수로 변경하기

기업과제를 하던 중 api에서 데이터를 몇개를 받아 올 것인가에 대해 정해야 할 일이 있었다. 두 가지가 있는데,

1. 데이터를 받아올 개수를 정한다.

2. 페이지 번호를 정한다. 페이지는 10개의 데이터가 들어있다.

요구사항은 10개씩 무한 스크롤을 통해 데이터를 렌더링을 해야 했다. 1번같은 경우에는 처음엔 10 두번째는 20.. 30.. 이런식으로 진행이 되어야 했는데 생각해보니 결국 100000개 100000000개 이런 데이터를 받아오는건 혈압만 오르고 효율도 좋지 않다. 그래서 정한건 페이지 번호별 데이터를 받아 상태를 관리하는 것이다.

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

export const ForestApi = createApi({
  reducerPath: "ForestApi",
  baseQuery: fetchBaseQuery({
    baseUrl:
      "https://www.chungbuk.go.kr/",
  }),
  endpoints: (builder) => ({
    getContents: builder.query({
      query: () =>
        `/openapi-json/pubdata/pubMapForest.do`,
    }),
  }),
});

export const { useGetContentsQuery } = ForestApi;

 

처음의 상태를 이러했는데, 엔트포인트의 쿼리문에 ?pageNo=${page}를 추가해야 했다.  어떻게 해야할까? 인자로 page번호를 받으면 된다! 아주 간단했지만 공식문서에서 한참을 뒤졌다.

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

export const ForestApi = createApi({
  reducerPath: "ForestApi",
  baseQuery: fetchBaseQuery({
    baseUrl:
      "https://corsanywhere12345.herokuapp.com/https://www.chungbuk.go.kr/",
  }),
  endpoints: (builder) => ({
    getContents: builder.query({
      query: (page = 1) =>
        `/openapi-json/pubdata/pubMapForest.do?pageNo=${page}`,
    }),
  }),
});

export const { useGetContentsQuery } = ForestApi;

디폴트 값으로 1을 지정해주었다. 결과는 성공! 잘받아와진다. 

데이터 조작하기

그런줄알았다. 잘 받아와지는줄 알았다. 하지만 이게 무슨일이지? 객체가 아니고 문자열로 들어오는 어이없는 상황이 발생했다. 그래서 처음에 나는 무지성으로 그럼 다시 객체로 파싱해주면 끝이지 ~ 하고

const {data} = useGetContentsQuert();
const forest = JSON.parse(data);

이런식으로 작성을 했다. 뿌듯하게 쳐다보고 있었는데 어짜피 데이터를 받아오는건 리덕스에서 하는데 거기서 처리하면 바로 객체를 받을 수 있지 않을까? 해서 공식문서를 발견했다.

https://redux-toolkit.js.org/rtk-query/usage/customizing-queries#customizing-query-responses-with-transformresponse

Customizing Queries | Redux Toolkit

 

해당글에는 기본적으로 서버에서 받은 페이로드는 바로 리턴됩니다. 바꾸기 위해서는 아래와같은 함수를 추가하세요. 라는 문구가 있었다.

오 좋아 시도해보자. response를 받아 JSON.parse를 여기서 하는거야!

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

export const ForestApi = createApi({
  reducerPath: "ForestApi",
  baseQuery: fetchBaseQuery({
    baseUrl:
      "https://corsanywhere12345.herokuapp.com/https://www.chungbuk.go.kr/",
  }),
  endpoints: (builder) => ({
    getContents: builder.query({
      query: (page = 1) =>
        `/openapi-json/pubdata/pubMapForest.do?pageNo=${page}`,
      transformResponse: (response) => JSON.parse(response),
    }),
  }),
});

export const { useGetContentsQuery } = ForestApi;

 

결과는 대성공!!!  객체형태로 잘 들어온다!