Community

개발자 99% 커뮤니티에서 수다 떨어요!

← Go back
React native 의 ReactQuery 질문입니다! (master class 3.12,3.13)
#react
1년 전
8,656
5

안녕하세요

노마드 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;

5 comments