[REACT] useQuery 키를 여러개 전달하여 응용하기

useQuery 요청시 첫 매개변수 자리는 식별자 키(key)이다. 보통 이 부분은 스트링 형태인 것으로 알지만 아래와 같이 배열 형태로 여러개의 키를 가질 수 있다.

 

특정 상황에서 useQuery를 직접 다시 호출하기

useQuery를 다시 호출하고 싶을 때는 queryClient.refetchQueries를 이용해서 useQuery의 키를 넣어주면 된다.

이렇게 해주면 되는데 그전에 세팅이 되어있는지 살펴보아야 한다.

queryClient를 상위 컴포넌트 쪽에 세팅해줘야 한다.

_app.js

export default function App({ Component, pageProps }) {
  const client = new QueryClient({
    defaultOptions: {
      queries: {
        refetchOnWindowFocus: false,
      },
    },
  });

  return (
    <QueryClientProvider client={client}>
      <Seo />
      <DndProvider backend={HTML5Backend}>
        <ThemeProvider theme={Theme}>
          <Layout>
            <Component {...pageProps} />
          </Layout>
        </ThemeProvider>
      </DndProvider>
    </QueryClientProvider>
  );
}

그리고 하위 컴포넌트에서는 불러와준다.

export default function WelfareNews() {
  const queryClient = useQueryClient();
}

이렇게 하고나면 queryClient가 제공하는 것들을 쓸 수 있다.