Property 'contentType' does not exist on type 'Link<"Entry">'
seballoon opened this issue · 2 comments
I'm getting errors like these:
Property 'contentType' does not exist on type 'Link<"Entry"> | (EntrySys & { contentType: { sys: { id: string; }; }; })'.
Property 'contentType' does not exist on type 'Link<"Entry">'.
Property 'fields' does not exist on type 'UnresolvedLink<"Entry"> | Entry<EntrySkeletonType, undefined, string>'.
Property 'fields' does not exist on type 'UnresolvedLink<"Entry">'.
In this code here:
content.map((d) => {
const Component = dynamicComponents[d.sys.contentType.sys.id]
return Component ? <Component {...d.fields} /> : null
})
the values are coming from getStaticPaths():
export async function getStaticPaths() {
const pages = await contentfulClient.getEntries<TypePageSkeleton>({
content_type: 'page',
})
const result = pages.items.map((page) => {
const { slug, content } = page.fields
return {
params: { id: slug },
props: { content },
}
})
return result
}
These are the types generated by the app:
import type { ChainModifiers, Entry, EntryFieldTypes, EntrySkeletonType, LocaleCode } from "contentful";
export interface TypePageFields {
title: EntryFieldTypes.Symbol;
slug: EntryFieldTypes.Symbol;
content?: EntryFieldTypes.Array<EntryFieldTypes.EntryLink<EntrySkeletonType>>;
}
export type TypePageSkeleton = EntrySkeletonType<TypePageFields, "page">;
export type TypePage<Modifiers extends ChainModifiers, Locales extends LocaleCode = LocaleCode> = Entry<TypePageSkeleton, Modifiers, Locales>;
And just to clarify, the "content" is a type "references to many"
I know this is probably not a bug, but i'd appreciate if you can give me any clue to what I'm doing wrong?
Hi @seballoon 👋
in your current setup, the response from the server might contain unresolvable links. This is also reflected in the types. You can fix this, by dropping unresolvable links with a chain modifier:
export async function getStaticPaths() {
const pages = await contentfulClient.withoutUnresolvableLinks.getEntries<TypePageSkeleton>({
content_type: 'page',
})
const result = pages.items.map((page) => {
const { slug, content } = page.fields
return {
params: { id: slug },
props: { content },
}
})
return result
}
closing this for now!