queryClient.invalidateQueries와 useQuery() (feat. React-query)

컴포넌트의 child 컴포넌트에서 같은 query-key('user' 라고 하자)를 가진 cache data를 가져오는경우가 많을텐데, 이런경우 어떤 useQuery('user')를 기준으로 cache data가 set되는가?

• 답은 가장 child component의 useQuery('user')를 기준으로 cache data를 set하게 된다.

그렇다면, queryClient.invalidateQueries('user')를 실행하면 어떤 useQuery를 기준으로 data를 set하게될까?

• 답은 가장 root단에 가까운 useQuery('user')를 기준으로 data가 set되게 된다.

interval로 query 치는상황에 invalidate하게되면?

useQuery('user', fetchFn, {refetchInterval: 30 * SECOND});

useMutation('user', mutateFn, 
{onSuccess: queryCleint.invalidateQueries('user')})

• 위와같이 invalidate를 실행하면 'user' data가 stale상태가 되고 다시 fetchFn을 이용해 refetch되므로 interver time은 reset된다!

** useQuery 사용시 같은 query-key를 사용하는 query에는 가급적 같은 fetchFunction을 넘겨주는것이 권장된다.