Redux 툴킷에서 RTK 쿼리를 사용하는 방법
17624 단어 reactjavascriptreduxtutorial
내 튜토리얼을 확인하십시오
응답을 전역적으로 변환
나는 어느 날 프로젝트에서 작업하고 있었고 모든 쿼리 끝점에 대한 transformResponse를 (전역적으로) 정의할 수 있기를 원했습니다.
내 research 후에 해결책을 찾았습니다.
API 슬라이스에서 모든 엔드포인트에 대한 응답을 변경할 수 있습니다. 이렇게 하려면 이러한 변환을 수행하는 사용자 정의 함수로
baseQuery
를 래핑합니다. referenceconst 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
Reference
이 문제에 관하여(Redux 툴킷에서 RTK 쿼리를 사용하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/ifeanyichima/redux-toolkit-query-k0k텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)