React-Query 훅을 사용한 조건부 API 호출
저는 react-query를 사용하여 API를 호출하고 있는데, 이 문제에서는 특정 조건이 충족될 경우에만 API를 호출하고 싶습니다.
사용자가 검색 쿼리를 입력할 수 있는 입력 상자가 있습니다.입력값이 변경되면 입력내용을 검색쿼리로 하여 검색서버가 호출됩니다.단, 입력값이 3글자 이상일 경우에만 가능합니다.
리액션 컴포넌트에서 전화드렸습니다.
const {data, isLoading} = useQuery(['search', searchString], getSearchResults);
그리고 나의getSearchResults
함수는 조건부로 API 콜을 발신합니다.
const getSearchResults = async (_, searchString) => {
if (searchString.length < 3)
return {data: []}
const {data} = await axios.get(`/search?q=${searchString}`)
return data;
}
조건 내에서는 후크를 사용할 수 없기 때문에 API 호출 기능에 조건을 넣었습니다.
이거 거의 먹히네.짧은 쿼리 문자열을 입력하면 API 요청이 생성되지 않고 빈 배열이 반환됩니다.data
아싸!
근데...isLoading
로 바뀌다true
간략하게 - HTTP 요청이 없는 경우에도 마찬가지입니다.따라서 로드 인디케이터는 실제 네트워크 액티비티가 없을 때를 나타냅니다.
사용 사례를 가장 잘 해결할 수 있는 방법을 잘못 알고 있는 걸까요?isLoading
HTTP 액티비티가 없는 경우 false가 반환됩니까?
그래서 메인 컴포넌트에서는 부울을 생성하여 이 부울을enabled
의 옵션useQuery
후크:
const isLongEnough = searchString.length > 3;
const {data, isLoading} = useQuery(['search', searchString], getSearchResults, {enabled: isLongEnough});
API 호출 메서드는 단순히 API 호출일 뿐이며 조건적인 호출은 아닙니다.
const getSearchResults = async (_, searchString) => {
const {data} = await axios.get(`/search?q=${searchString}`);
return data;
}
이 문서에서는 후속 API 엔드포인트에서 데이터를 로드하기 위한 솔루션으로서 종속 쿼리를 설명하고 있지만enable
옵션에는 임의의 부울을 사용할 수 있습니다.이 경우 - 검색 쿼리 문자열이 충분히 긴 경우.
또 다른 방법이 있습니다.queryClient.fetchQuery
API: 데이터를 가져오기 위해 쿼리를 조건부로 호출할 수 있는 기능을 제공합니다.
function Example2() {
const [data, setData] = useState(null);
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState(null);
if (isLoading) return "Loading...";
if (error) return "An error has occurred: " + error;
return (
<div>
<button
onClick={async () => {
try {
setIsLoading(true);
const posts = await queryClient.fetchQuery(
["postsUsingFetchQuery"],
{
queryFn: () =>
axios
.get("https://jsonplaceholder.typicode.com/posts")
.then((res) => res.data)
}
);
setData(posts);
} catch (e) {
setError(e);
}
setIsLoading(false);
}}
>
Fetch posts using fetchQuery{" "}
</button>
<h1>Posts</h1>
{data?.map((post) => {
return (
<div style={{ display: "flex" }}>
<span>{post.id}- </span>
<div>{post.title}</div>
</div>
);
})}
</div>
);
}
버튼 클릭 핸들러에는 queryClient를 사용하여 투고를 가져오는 구현이 추가되었습니다.fetchQuery.
자세한 내용은 이 링크를 참조하십시오.
언급URL : https://stackoverflow.com/questions/63397534/conditionally-calling-an-api-using-react-query-hook
'programing' 카테고리의 다른 글
현재 루트명/컨트롤러를 기반으로 클래스를 설정하는 방법 (0) | 2023.03.21 |
---|---|
사용자 지정 필드 데이터를 WooCommerce 주문에 추가합니다. (0) | 2023.03.21 |
단순한 어레이 초기화를 사용한ng-timeout (0) | 2023.03.21 |
WebSocket 연결 실패:WebSocket 핸드쉐이크 중 오류 발생:예기치 않은 응답 코드: 400 (0) | 2023.03.21 |
두 날짜 사이의 객체 찾기 MongoDB (0) | 2023.03.21 |