개발자 99% 커뮤니티에서 수다 떨어요!
안녕하세요
노마드 react natvie master class 강의 3.12, 3.13 을 보면
react-query 의 useQuery 및 QueryClient 를 사용하여
코드를 작성하였으나
실제로 react-query 가 더이상 사용되지 않는다 하여
@tanstack/react-query 를 사용하라고 하더군요!
그래서 tanstack react-query 로 변경하여 사용할시
"No QueryClient set, use QueryClient Provider to set One" 이라는 에러가 뜨는군요...
아무리 찾아봐도 나오지 앉아서 여기다 첫 질문글올립니다...ㅎ
제코드는 대략적으로 보여드립니다!
import { useQuery, QueryClient } from "@tanstack/react-query";
const Movies: React.FC<NativeStackScreenProps<any, "Movies">> = () => {
const queryClient = new QueryClient({});
const {
isLoading: nowPlayingLoading,
data: nowPlayingData,
isRefetching: isRefetchingNowPlaying,
} = useQuery(
["movies","nowPlaying"],moviesApi.nowPlaying);
const onRefresh = async () => {
queryClient.refetchQueries(["movies"]);
};
const loading = nowPlayingLoading;
const refreshing = isRefetchingNowPlaying ;
return loading ? (
<Loader>
<ActivityIndicator />
</Loader>
) : <FlatList
onRefresh={onRefresh}
refreshing={refreshing}
ListHeaderComponent={
<>
<Swiper
loop={true}
timeout={3.5}
controlsEnabled={false}
innerContainerStyle ={{
marginBottom: 40,
width: "100%",
height: SCREEN_HEIGHT / 4,
}}
>
{nowPlayingData.results.map((movie) => (
<Slide
key={movie.id}
backdropPath={movie.backdrop_path}
posterPath={movie.poster_path}
originalTitle={movie.original_title}
voteAverage={movie.vote_average}
overview={movie.overview}
/>
))}
</Swiper>
)
}
export default Movies;