강의

멘토링

커뮤니티

Inflearn コミュニティ Q&A

junyeongheo のプロフィール画像
junyeongheo

投稿した質問数

アバターコミュニティアプリ作成 (React Native Expo)

[5-13] 楽観的アップデート(Optimistic Update)の適用

[5-13] useLikePost 쿼리 구현 중 Tanstack Query 관련 질문

作成

·

58

0

optimistic-updates#updating-a-single-todo 문서를 보면 useMutation - onError의 모든 parameter err, newPost (variables), onMutationResult, context와 onSettle의 모든 parameter를 사용해서 구현하는데, client를 queryClient를 가져와서 쓰는 강의 중 예제와, 문서 내의 내용으로 구현한 아래의 주석처리된 구현은 어떤 차이가 있을까요?

 

onError: (err, newPost, context) => {
  queryClient.setQueryData(
    [queryKeys.POST, queryKeys.GET_POST, context?.newPost?.id],
    context?.previousPost,
  );
},
// onError: (err, newPost, onMutationResult, context) => {
//   context.client.setQueryData(
//     [
//       queryKeys.POST,
//       queryKeys.GET_POST,
//       onMutationResult?.previousPost?.id,
//     ],
//     onMutationResult?.previousPost,
//   );
// },
onSettled: (data, error, variables, context) => {
  queryClient.invalidateQueries({
    queryKey: [queryKeys.POST, queryKeys.GET_POST, variables],
  });
  queryClient.invalidateQueries({
    queryKey: [queryKeys.POST, queryKeys.GET_POSTS],
  });
},
// onSettled: (data, error, variables, onMutationResult, context) => {
//   context.client.invalidateQueries({
//     queryKey: [queryKeys.POST, queryKeys.GET_POST, variables],
//   });
//   context.client.invalidateQueries({
//     queryKey: [queryKeys.POST, queryKeys.GET_POSTS],
//   });
// },

a

react-nativetypescriptexporeact-hook-formreact-query

回答 1

0

Kyo님의 프로필 이미지
Kyo
インストラクター

해당 내용은 5.89.0 버전에서 새로 변경된 내용인데요. 새로운 인자 context가 mutationFn과 mutation 콜백에 추가되어 queryClient를 사용하지않아도 context.client.로 사용할수 있습니다.

따라서 queryClient를 사용해도 문제는 없지만, 5.89.0 버전 이상을 사용하신다면 올려주신 공식문서 코드처럼 사용해주시면 될것같습니다!

 

 

 

junyeongheo のプロフィール画像
junyeongheo

投稿した質問数

質問する