Redux 툴킷에서 RTK 쿼리를 사용하는 방법

Redux 툴킷 쿼리 또는 RTK 쿼리는 바퀴 이후 인간의 가장 위대한 발명품입니다. API에서 데이터 가져오기와 같은 비동기 작업 수행을 단순화합니다. 이 기사에서는 내가 어떻게 사용하고 모든 혜택을 누리는 지 보여 드리겠습니다.

내 튜토리얼을 확인하십시오

응답을 전역적으로 변환

나는 어느 날 프로젝트에서 작업하고 있었고 모든 쿼리 끝점에 대한 transformResponse를 (전역적으로) 정의할 수 있기를 원했습니다.
내 research 후에 해결책을 찾았습니다.

API 슬라이스에서 모든 엔드포인트에 대한 응답을 변경할 수 있습니다. 이렇게 하려면 이러한 변환을 수행하는 사용자 정의 함수로 baseQuery를 래핑합니다. reference

const baseQueryWithChange = async (args, api, extraOptions) => {
    let result = await baseQuery(args, api, extraOptions);
    if (result.data) {
        result.data = result.data.data
    }
    return result
}

baseQuery 함수로 baseQueryWithChange를 래핑합니다.

export const apiSlice = createApi({
    baseQuery: baseQueryWithChange,
    endpoints: builder => ({})
})

각 끝점에 대한 transformResponse

이것은 쉽습니다. API 슬라이스에 삽입하는 각 끝점에 대해 API 호출의 응답을 변환할 수 있습니다.

import { apiSlice } from "../../app/api/apiSlice";

export const extendedApiSlice = apiSlice.injectEndpoints({
    endpoints: builder => ({
        getHistory: builder.query({
            query: credentials => ({
                url: `/history/${credentials.id}`,
                method: "GET"
            }),
            providesTags: ["History"],
            transformResponse: (response) => response.result,
        })
    })
})


export const {
    useGetHistoryQuery
} = extendedApiSlice

새로고침();

refetch : 쿼리 후크에서 반환된 함수입니다. 다시 가져오기를 트리거합니다(일반적으로 내부에서 호출됨useEffect ).

이 기능을 사용하면 10초마다 API 호출을 할 수 있습니다. reference

// stocks component


import { useGetStocksQuery } from '../features/stocksList/stocksListApiSlice';
import { useEffect, useRef } from "react";

const Stocks = () => {

    const tickerArray = [
        "AAPL",
        "TSLA",
        "NKE",
        "MSFT",
        "AMZN",
        "PLTR",
        "BYND",
        "GOOGL",
        "META",
        "SNAP",
        "NFLX"
    ];


    // store the timer inside useRef hook to ensure persistentence
    const stockTimerId = useRef();


   let {
        data: list,
        refetch
    } = useGetStocksQuery({tickerArray});


    useEffect(() => {

   stockTimerId.current = await setInterval(() => refetch(), 10000);

  }
        // when component unmounts clear the interval
        return () => clearInterval(stockTimerId.current)
    })


return (
  <>Your JSX goes here</>
)

}

export default Stocks

쿼리 매개변수 RTK 쿼리

여러 쿼리 매개변수로 쿼리하는 방법은 무엇입니까?

내 URL을 다음과 같이 만들고 싶은 경우https://api.coingecko.com/api/v3/coins/markets?vs_currency=ngn&order=market_cap_desc&per_page=100&page=1&sparkline=false
기본 URL: https://api.coingecko.com/api/v3/coins/markets
쿼리 매개변수: ?vs_currency=ngn&order=market_cap_desc&per_page=100
RTK 쿼리에서 모든 쿼리 매개변수를 포함하는 객체를 생성하고 후크에 옵션으로 전달하여 이를 달성할 수 있습니다.

const queryParams = {
  vs_currency: "usd",
  order: "market_cap_desc",
  page: "1",
  sparkline: "false",
  ids: debouncedSearchQuery,
  price_change_percentage: "1"
}

const { data: coinSearchResult, isSuccess: searchedForCoin } = useGetCoinQuery(queryParams)

// apiSlice

getCoins: builder.query({
  query: (arg) => ({
    url: `/coins/markets`,
    params: {...arg}
  }),
})

스택오버플로 질문: RTK Query query parameter

두 번째 질문: Redux Toolkit RTK Query sending query parameters

경로 매개변수 RTK 쿼리

여러 경로 매개변수로 쿼리하는 방법은 무엇입니까?

내 URL을 다음과 같이 만들고 싶은 경우https://api.coingecko.com/api/v3/coins/bitcoin
기본 URL: https://api.coingecko.com/api/v3/coins
경로 매개변수: /bitcoin/usd
쿼리는 하나의 인수만 허용하므로 자동으로 생성된 후크를 사용할 때 모든 경로 매개변수를 포함하는 개체를 사용합니다.

   // apiSlice

    getReport: builder.query({
      query: ({bitcoin, currency}) =>
        `/${bitcoin}/${currency}`,
    }),

    useGetReportQuery({
      bitcoin,
      currency
    });

GitHub 문제: How to query with multiple path parameters

옵션: RTK 쿼리에서 건너뛰기

앱에 제공된 입력 필드를 기반으로 배열을 통해 검색하고 싶습니다.

사용자가 검색 필드에 입력하는 모든 항목을 검색하는 RTK 쿼리 API에 useSearchMovieQuery가 있습니다. "skip" 또는 "skipToken" 를 사용하여 쿼리를 건너뛰면 쿼리가 초기 렌더링에서 실행되지 않도록 하고 싶습니다.

검색 필드의 onChange 이벤트 직후가 아니라 사용자가 입력을 중지한 후에만 이 쿼리를 실행하고 싶습니다.

해결책

일부 조건이 참이 될 때까지 RTK 쿼리에서 데이터 가져오기를 지연할 수 있습니다. 쿼리가 자동으로 실행되지 않도록 하려면 후크에서 skip 매개변수를 사용할 수 있습니다.

이를 달성하기 위해 500ms 후에 사용자 입력을 반환하는 사용자 지정 반응 후크useDebounce를 사용합니다.

이 쿼리는 사용자가 검색 상자에 무언가를 입력할 때까지 실행되지 않습니다.

const [searchQuery, setSearchQuery] = useState("");
// custom hook
const debouncedSearchQuery = useDebounce(searchQuery, 500);

  const {
    data: searchResult,
    isSuccess: searchedForMovie,
    isFetching,
    isError,
  } = useSearchMovieQuery(debouncedSearchQuery, { skip: debouncedSearchQuery === "" });

스택오버플로 질문: rtk-query-run-query-only-after-user-stops-typing-in-search-field

두 번째 질문: How to disable RTK Query auto-request fetching?
useDebounce 후크에 대해 자세히 알아볼 수 있습니다.

참조

RTK query best practices

How to use transformResponse props with injectEndpoints

감사합니다, 팔로우해주세요

github