2024.09.26

4주차 과제

오늘의 오류 메세지

 

 

'string[]' 유형에 'InvalidateQueryFilters' 유형과 공통적인 속성이 없습니다. 

 

tanstack-query에서는

invalidateQueries에 queryKey를 {queryKey: ["todos"]} 형태로 넣는다.

queryClient.invalidateQueries({ queryKey: ["count"] });

 

 

 

참고

https://velog.io/@innes_kwak/2024.03.07-TIL-%ED%8A%B8%EB%9F%AC%EB%B8%94%EC%8A%88%ED%8C%85tanstack-query-typescript

2024.03.07 TIL - 트러블슈팅(tanstack-query mutation queryKey부분 오류, new Date type오류), 캐싱된 query 사용하

 

 

https://tanstack.com/query/latest/docs/framework/react/guides/query-invalidation

TanStack | High Quality Open-Source Software for Web Developers

 

 

'count'은(는) 'undefined'일 수 있습니다.

방법은 3개

 

1, if 문

if (count) { ... } 혹은 if (count !== undefined) {...} 방법이 있는데..

 

증가, 감소 핸들러 함수 모두 if (count) { ... } 을 쓸 경우

count가 0일 때 버튼을 아무리 눌러도 작동하지 않는다는 사실ㅎㅎ

 

대신 if (count !== undefined) {...} 을 쓸 경우

count가 undefined인 경우만을 제외하고 0인 경우에도 잘 작동한다. (마이너스도)

	const handlePlusCount = () => {
		// count가 undefined가 아닌 경우에만 실행. null, 0, false 등은 모두 실행
		if (count !== undefined) {
			const newCount = count + 1;
			mutate(newCount);
			increment();
		}
	};

	const handleMinusCount = () => {
       	 	// count가 undefined, null, 0 또는 false가 아닌 경우에만 실행
		if (count) {
			const newCount = count - 1;
			mutate(newCount);
			decrement();
		}
	};

 

 

위 코드는 0일 경우 감소가 안 된다.

 

좌 if (count !== undefined) 우 if (count)

 

 

 

2. non-null 단언 연산자 ! (non-null assertion operator)

count가 undefined 또는 null이 될 수 없음을 강제로 지정해주는 방법

 

TypeScript ESLint에서는 non-null assertion을 사용하면 The strict null-checking mode의 이점이 없어지므로 사용을 권장하지 않는다.

	const handlePlusCount = () => {
			const newCount = count! + 1;
			mutate(newCount);
			increment();
    	};

	const handleMinusCount = () => {
			const newCount = count! - 1;
			mutate(newCount);
			decrement();
	};

 

 

3. 초기값 설정

count에 초기값 0을 할당해,

fetchData가 반환되는 데이터가 없거나 로딩 중일 때에도 undefined로 인한 오류 발생을 방지한다

	const { data: count = 0, isLoading } = useQuery({
		queryKey: ["count"],
		queryFn: fetchData,
	});