`<QueryClientConsumer/>` Props 변환

@suspensive/react-query & @tanstack/react-query@4 환경에서 @tanstack/react-query@5로 업데이트하는 경우 추천합니다.

@suspensive/react-query & @tanstack/react-query@5 환경에서는 @suspensive/react-query가 제공하는 <QueryClientConsumer/> 컴포넌트의 context props가 queryClient로 변경되었습니다.

Terminal


npx @suspensive/codemods migrate-query-client-consumer-props .

context props를 queryClient로 변환할 수 있습니다.

예:


const PostRefreshButton = () => {
  return (
    <QueryClientConsumer context={queryClientContext}>
      {(queryClient) => (
        <button
          onClick={() =>
            queryClient.invalidateQueries({
              queryKey: ['posts'],
            })
          }
        >
          Posts refresh
        </button>
      )}
    </QueryClientConsumer>
  )
}

변환 후:


const PostRefreshButton = () => {
  return (
    <QueryClientConsumer queryClient={queryClient}>
      {(queryClient) => (
        <button
          onClick={() =>
            queryClient.invalidateQueries({
              queryKey: ['posts'],
            })
          }
        >
          Posts refresh
        </button>
      )}
    </QueryClientConsumer>
  )
}

<QueryClientConsumer/> Props 변환

`<QueryClientConsumer/>` Props 변환