inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

suspense사용시 오류가 생겨요

122

정근혁

작성한 질문수 5

0

"resource": "/c:/Porject/ReactNative/lottoApp/front/src/features/map/hooks/queries/useGetInfinitePosts.ts",

"owner": "typescript",

"code": "2322",

"severity": 8,

"message": "Type 'unique symbol | QueryFunction<ResponsePost[], readonly unknown[], number>' is not assignable to type 'QueryFunction<ResponsePost[], readonly unknown[], number> | undefined'.\n Type 'typeof skipToken' is not assignable to type 'QueryFunction<ResponsePost[], readonly unknown[], number>'.",

"source": "ts",

"startLineNumber": 22,

"startColumn": 5,

"endLineNumber": 22,

"endColumn": 12,

"relatedInformation": [

{

"startLineNumber": 28,

"startColumn": 5,

"endLineNumber": 28,

"endColumn": 12,

"message": "The expected type comes from property 'queryFn' which is declared here on type 'UseSuspenseInfiniteQueryOptions<ResponsePost[], ResponseError, InfiniteData<ResponsePost[], number>, ResponsePost[], readonly unknown[], number>'",

"resource": "/c:/Porject/ReactNative/lottoApp/front/node_modules/@tanstack/react-query/build/modern/types.d.ts"

}

]

}] 라는 오류인데 queryfn이랑 skiptoken이랑 겹친다는 식으로 이야길하는것같은데 영상에서는 딱히 오류가없어서요..

import {queryKeys} from '@/app/config';
import {getFavoritePost, ResponsePost} from '@/shared/api';
import {ResponseError} from '@/shared/types/common';
import {
  InfiniteData,
  QueryKey,
  UseInfiniteQueryOptions,
  useSuspenseInfiniteQuery,
} from '@tanstack/react-query';

const useGetInfiniteFavoritePosts = (
  queryOptions?: UseInfiniteQueryOptions<
    ResponsePost[],
    ResponseError,
    InfiniteData<ResponsePost[], number>,
    ResponsePost[],
    QueryKey,
    number
  >,
) => {
  return useSuspenseInfiniteQuery({
    queryFn: ({pageParam}) => getFavoritePost(pageParam),
    queryKey: [queryKeys.POST, queryKeys.FAVORITE, queryKeys.GET_FAVORITE_POST],
    initialPageParam: 1,
    getNextPageParam: (lastPage, allPages) => {
      const lastPost = lastPage[lastPage.length - 1];
      return lastPost ? allPages.length + 1 : undefined;
    },
    // select: data => data.pages,
    ...queryOptions,
  });
};

export default useGetInfiniteFavoritePosts;

react-native typescript nestjs react-query zustand

답변 1

0

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.

정근혁님께서 주신 내용에서는 TypeScript 타입 오류가 발생하고 있는 것 같습니다. 오류 메시지에 따르면 queryFnskipToken과 겹친다고 나오는데요, 이는 unique symbol 타입이 QueryFunction 타입에 맞지 않다는 의미입니다.

주어진 코드 상으로 보면 useSuspenseInfiniteQuery에 전달하는 queryFn은 정상처럼 보입니다. 따라서 아래 사항들을 점검해보시기를 권장드립니다:

  1. queryFn을 정의하는 부분에서 Typescript가 QueryFunction과 호환되지 않는다고 지적하고 있습니다. 이는 타입스크립트의 strict 옵션이 활성화되어 있거나, 패키지가 업데이트됨에 따라 타입 정의가 변경되었기 때문일 수 있습니다.

  2. queryKey나 다른 옵션이 모두 예상치대로 발생하고 있는지 확인하세요. queryKey에 잘못된 값이 포함되어 있거나 queryOptions에서 예상하지 못한 타입이 들어갈 수도 있습니다.

  3. QueryFunction 타입이 잘못 정의된 경우, 패키지를 최신 버전으로 업데이트 하거나, @tanstack/react-query 패키지의 변경사항을 확인해보세요.

필요하다면 공식 문서나 기타 레퍼런스를 참고하여 문제가 되는 부분을 확인하시기 바랍니다.
자세한 정보나 예제는 Spring Data JMS 공식 문서나 관련된 자료를 참조하시면 도움이 될 수 있습니다.

그럼 오류가 잘 해결되시기를 바랍니다. 다른 질문 있으시면 언제든지 말씀해 주세요!

react-native-screens 버전 호환 문제

2

156

1

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

0

105

2

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

0

98

1

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

0

74

2

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

0

116

2

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

0

209

2

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

0

92

1

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

0

79

2

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

0

84

1

강의 수강 순서 관련

0

72

1

애뮬레이터 실행 방법

0

101

2

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

0

92

2

ios 실기기 연결

0

70

2

npm run ios에러

0

76

1

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

0

102

1

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

0

52

1

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

0

72

1

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

0

75

0

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

0

84

3

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

0

70

2

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

0

83

2

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

0

97

1

AWS EC2 + RDS 설정

0

86

2

안드로이드 안켜집니다.

0

92

2