• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    해결됨

graphqlFetcher 관련 에러와 , data 객체 정의 되지 않는 오류 질문 드립니다

23.11.28 01:06 작성 조회수 151

0

안녕하세요. msw 강의를 듣는 중에 해결되지 않는 문제가 있어서 질문 남깁니다.id.pngpages > products > [id].tsx

이 호출과 일치하는 오버로드가 없습니다.
오버로드 1/3('(queryKey: QueryKey, options?: Omit<UseQueryOptions<Product, unknown, Product, QueryKey>, "queryKey"> | undefined): UseQueryResult<...>')에서 다음 오류가 발생했습니다.
'() => Promise<unknown>' 유형에 'Omit<UseQueryOptions<Product, unknown, Product, QueryKey>, "queryKey">' 유형과 공통적인 속성이 없습니다.
오버로드 2/3('(queryKey: QueryKey, queryFn: QueryFunction<Product, QueryKey>, options?: Omit<UseQueryOptions<Product, unknown, Product, QueryKey>, "queryKey" | "queryFn"> | undefined): UseQueryResult<...>')에서 다음 오류가 발생했습니다.
'Promise<unknown>' 형식은 'Product | Promise<Product>' 형식에 할당할 수 없습니다.
'Promise<unknown>' 형식은 'Promise<Product>' 형식에 할당할 수 없습니다.
'unknown' 형식은 'Product' 형식에 할당할 수 없습니다.ts(2769)

types.d.ts(9, 89): 필요한 형식은 이 시그니처의 반환 형식에서 가져옵니다

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

'{}' 형식에 'Product' 형식의 id, imageUrl, price, title 외 2개 속성이 없습니다.ts(2740)

detail.tsx(3, 77): 필요한 형식은 여기에서 'IntrinsicAttributes & { item: Product; }' 형식에 선언된 'item' 속성에서 가져옵니다.

import { Product } from '../../graphql/products'

const ProductDetail = ({ item: { title, imageUrl, description, price } }: { item: Product }) => (
  <div className="product-detail">
    <p className="product-detail__title">{title}</p>
    <img className="product-detail__image" src={imageUrl} />
    <p className="product-detail__description">{description}</p>
    <span className="product-detail__price">${price}</span>
  </div>
)

export default ProductDetail

components > products > detail.tsx


pages > products > index.tsx

이 호출과 일치하는 오버로드가 없습니다. ... 필요한 형식은 이 시그니처의 반환 형식에서 가져옵니다(위와 동일)

'NonNullable<TQueryFnData>' 형식에 'products' 속성이 없습니다

'product' 매개 변수에는 암시적으로 'any' 형식이 포함됩니다

 

해당 에러는 앞서 다른 수강생들도 질문한 부분이라 찾아봤는데

const { data } = useQuery<Products>(QueryKeys.PRODUCTS, () => graphqlFetcher<Products>(GET_PRODUCTS) ) 

알려주신 방식대로 리액트쿼리 버전 변경에 따라 타입스크립트 정의 방식이 바뀐 형태로 수정해주었는데도 같은 에러가 발생합니다.

handlers.ts


data-undefined.png페이로드.png이 상태에서 실행을 하니 data객체가 정의되지 않는다고 나오며 localhost 500 Request Handler Error가 뜹니다

import { gql } from 'graphql-tag'

export type Product = {
  id: string
  imageUrl: string
  price: number
  title: string
  description: string
  createdAt: string
}

// export type MutableProduct = Omit<Product, 'id' | 'createdAt'> 

export type Products = {
  products: Product[]
}

const GET_PRODUCTS = gql`
  query GET_PRODUCTS {
      id
      imageUrl
      price
      title
      description
      createdAt
    }
`

export const GET_PRODUCT = gql`
  query GET_PRODUCT($id: string) {
      id
      imageUrl
      price
      title
      description
      createdAt
    }
`

graphql > products.ts

며칠째 계속 잡고 하다가 안되서 그냥 두고 다음 강의 듣고 있는 중인데 오류 때문에 자꾸 신경이 쓰이네요

별거 아닌 에러였으면 좋겠네요

답변 2

·

답변을 작성해보세요.

0

정재남님의 프로필

정재남

지식공유자

23.11.28 21:47

msw 버전에 따라 사용법이 달라서 생긴 문제네요.

강의상의 버전은 0.39.0인 반면, 설치하신 버전은 2.0.9로 파악됩니다.

 

msw를 재설치하고 강의내용 그대로 진행하시거나

yarn remove msw
yarn add msw@0.39

msw 공식문서를 참고해서 내용 수정하시면서 진행하시는 방법도 있겠습니다.

https://mswjs.io/docs/api/graphql/

 

msw는 모킹을 위한 도구일 뿐 강의내용에서 중요도가 큰 것은 아니니

강의를 따라가는 데에 막힘이 없도록 버전을 낮추시는 편이 더 좋겠다고 생각합니다.

 

추가로 implicit any 관련 오류는 eslint 설정에서 off로 설정하시면 더이상 발견되지 않을 겁니다.

// .eslintrc.cjs
...
rules: {
  ...
  '@typescript-eslint/no-explicit-any': 'off'
},
...

 

4562sky님의 프로필

4562sky

질문자

23.11.28 22:50

image감사합니다. 해결됐습니다!

placeholder 만들어 주는 placeimg 사이트가 서비스 종료하여 이미지 로딩이 되지 않아 밑의 사이트로 대체하였습니다

imageUrl: `https://source.unsplash.com/200x150/?nature/${i + 1}`

 

0

정재남님의 프로필

정재남

지식공유자

23.11.28 16:53

깃헙에 올려주시고 url 공유해주시면 제가 한 번 보고 다시 말씀드릴게요