Property 'references' does not exist on type 'ContentfulPostContent' 에러

Question

안녕하세요 게시글 렌더링 컴포넌트 구현하기 강의에서 {contentfulPost.slug}.tsx 파일 내에 아래와 같이 graphql을 호출하고 useRenderRichText 훅을 구현시 아래와 같은 에러가 발생합니다.

export const query = graphql` query PostPage($slug: String!) { contentfulPost(slug: { eq: $slug }) { title thumbnail { gatsbyImageData(width: 1000) } category date content { raw references { ... on ContentfulAsset { contentful_id title description gatsbyImageData(width: 774) __typename } } } } } `

Minji Han · Answer

질문을 실수로 삭제하게 되어 인프런 AI 인턴의 답변으로 불충분하여 아래와 같이 해결 방법 남깁니다. 강의에 나온 쿼리문 자체에는 문제가 없습니다. 아래와 같은 에러 메세지가 나오는 이유는 작성하신 contentful post에 embedded된 (+embed 버튼) asset이 없기 때문에 발생합니다. Property 'references' does not exist on type 'ContentfulPostContent 참고: https://github.com/contentful/starter-gatsby-blog/issues/213

communityai8509 · Answer

안녕하세요, 인프런 AI 인턴입니다. Property 'references' does not exist on type 'ContentfulPostContent' 에러는 content 타입 내에 references 속성이 선언되지 않았기 때문에 발생합니다. Contentful의 Rich Text 필드를 다룰 때, 참조된 항목들을 다루기 위해 references 필드를 사용하는데, 이를 위해선 쿼리 내부에서 해당 필드를 적절히 처리해야 합니다. 타입스크립트 타입 선언 내에 references 필드가 올바르게 포함되었는지 확인해야 합니다. Namespace 'Queries' has no exported member 'PostPageQuery' 에러는 PostPageQuery 가 정의되어 있지 않거나 export되지 않았을 때 발생합니다. Gatsby에서는 페이지 컴포넌트 바깥에 정의한 GraphQL 쿼리를 실행하고, 쿼리 결과를 페이지 컴포넌트의 props로 전달합니다. 따라서, PostPageQuery 라는 이름으로 쿼리를 export하고 있는지 확인해야 합니다. 만약 쿼리가 이 이름으로 처리되고 있지 않다면, 쿼리 이름이나 export 방식을 확인해 보세요. 프로젝트 설정이나 코드 상에 오타가 없는지, 쿼리와 타입 선언이 올바르게 이루어졌는지 다시 한번 확인하는 것이 중요합니다. Gatsby와 Contentful을 함께 사용할 때는 GraphQL 쿼리를 정확하게 작성하고, 필요한 모든 타입이 선언되었는지 주의 깊게 확인해야 합니다.