inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)

코드스타일 문의드립니다.

해결된 질문

83

알랭들롱

작성한 질문수 2

0

import {deletPost} from '@/api';
import queryClient from '@/api/queryClient';
import {queryKeys} from '@/constants';
import {UseMutationCustomOptions} from '@/types';
import {useMutation} from '@tanstack/react-query';

function useMutateDeletePost(mutationOptions?: UseMutationCustomOptions) {
  return useMutation({
    mutationFn: deletPost,
    onSuccess: () => {
      queryClient.invalidateQueries({
        queryKeys: [queryKeys.POST, queryKeys.GET_POST],
      });
      queryClient.invalidateQueries({
        queryKey: [queryKeys.MARKER, queryKeys.GET_MARKERS]
      })\
    }
  });
}

export default useMutateDeletePost;

안녕하세요. 궁금한 게 있습니다.다름아니라 재갱신을 위해서 invalidataQueies를 호출할때 쿼리클라이언트를 여러개로 쪼개신 이유가 무엇인가요?
해당 키들을 한개의 invalidataQueries로만 호출이 가능할텐데, 여러개로 쪼개신 이유가 갑자기 궁금해서 문의드립니다.

 

onSuccess: () => {

  queryClient.invalidateQueries({

    queryKey: [

      queryKeys.POST,

      queryKeys.GET_POST,

      queryKeys.MARKER,

      queryKeys.GET_MARKERS,

    ],

  });

}

react-native typescript nestjs react-query zustand

답변 2

1

Kyo

[queryKeys.POST, queryKeys.GET_POSTS] 는 앞자리가 [queryKeys.POST, queryKeys.GET_POSTS] 인 쿼리들을 무효화하기 위함이고, [queryKeys.MARKER, queryKeys.GET_MARKERS]는 앞자리가[queryKeys.MARKER, queryKeys.GET_MARKERS]에 해당하는 쿼리들을 무효화하기 위해서 나눠서 사용했습니다.

0

인프런 AI 인턴

안녕하세요, 알랭들롱님. 인프런 AI 인턴입니다.

질문해주신 내용에 대한 답변을 드리겠습니다. invalidateQueries를 여러 번 호출하시는 이유에 대해 궁금해하셨는데요, 이는 주로 코드의 가독성과 제어의 명확성을 위해 이뤄지는 경우가 많습니다. 다수의 queryKey를 한 번에 무효화할 수 있지만, 나누어 호출함으로써 각 쿼리의 갱신을 더 명확하고 개별적으로 관리할 수 있다는 이점이 있습니다.

특히, 별도의 queryKey 그룹이 서로 연관이 없거나 독립적으로 갱신되어야 할 경우, 이를 명시적으로 분리하여 처리함으로써 예상하지 못한 상호 작용을 피할 수 있습니다. 코드 유지보수 시 어떤 쿼리 키가 무효화될지 명확하게 파악할 수 있어 개발자에게 더 직관적일 수 있습니다.

하지만, 만약 모든 쿼리가 같은 상황에서 항상 함께 무효화된다면, 코드 스타일을 간단하게 하여 한 번에 쿼리 키들을 묶어 처리하는 것도 효율적인 방법일 수 있습니다. 이 결정은 개발자의 의도와 팀의 코드 스타일 가이드에 따라 다를 수 있습니다.

위의 설명을 바탕으로 본인의 코드에 맞는 방식으로 구성하시면 됩니다. 관련된 질문 및 답변도 확인하며 더 나은 이해를 돕기에 좋을 것 같습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

react-native-screens 버전 호환 문제

2

153

1

안드로이드 실행 중 Drawer네비게이션과 MapView 성능 문제

0

103

2

해당 강의 부분은 실제 활용하기에 부족해 제가 해결한 방법입니다.

0

96

1

소스코드가 강의 순서랑 다른가요?

0

72

2

현재 Windows에서 VsCode로 작업 중인데 추후에 IOS도 가능하게 하려면

0

115

2

react-native-fast-image는 react 19 버전에서 설치가 안되나요?

0

208

2

SQL Shell의 역할이 무엇인가요?

0

91

1

혹시 해당 강의에서invalidateQueries를 사용한 이유가 있을까요?

0

79

2

빠르게 실행해보고싶습니다.

0

82

1

강의 수강 순서 관련

0

70

1

애뮬레이터 실행 방법

0

99

2

무료 Apple ID로 실기기 테스트 가능한가요?

0

90

2

ios 실기기 연결

0

70

2

npm run ios에러

0

74

1

10월 삭제 예정인 강의는 이유를 알 수 있을까요?

0

101

1

캘린더 개발 후에 navigation 에 대해서 궁금한 점이 있습니다.

0

51

1

안드로이드 위치 권한 이슈 2가지 문의

0

71

1

지도가 보이려면 음.. 작성해주신 스타일과 다르게

0

74

0

제대로 설치한거같은데 안드로이드랑 ios 둘다 앱실행이 안되는것같아요

0

83

3

강의 내용을 보면 전체적으로 function 함수 키워드를 사용하시는데

0

69

2

강의 3-9 에서 useGetRefreshToken 훅 안에 즉시 함수로 처리하는 이유가 궁금합니다!

0

82

2

사내에서 figma.com 업로드 안되나요?

0

96

1

AWS EC2 + RDS 설정

0

85

2

안드로이드 안켜집니다.

0

91

2