Hi Dato,
probably it’s the low typescript know how on my side … Anyway, I’m stuck in the middle of implementing StructuredText in a nextjs/typescript project and would need some help or guidance.
The build fails with the following error:
Type 'MonitoringItemModelContentField' is not assignable to type 'Document | Node | StructuredText<Record, Record>'.
Type 'MonitoringItemModelContentField' is not assignable to type 'StructuredText<Record, Record>'.
My GraphQL query looks like this:
query($slug: String!, $lang: SiteLocale) {
monitoringItem (filter: { slug: { eq: $slug } }, locale: $lang) {
id
slug
title
content {
value
links
blocks {
__typename
... on CoverImageRecord {
id
image {
id
responsiveImage(imgixParams: {fit: crop, w: 300, h: 300, auto: format}) {
srcSet
webpSrcSet
sizes
src
width
height
aspectRatio
alt
title
base64
}
}
}
}
}
}
}
And this is the component that should renders the content:
import {
MonitoringItemRecord,
} from "@/lib/types/datoTypes"
import { StructuredText, Image } from 'react-datocms'
interface Props {
monitoringItem: MonitoringItemRecord
}
const MonitoringItemTemplate = ({
monitoringItem
}: Props) => {
return (
<>
<h1>{monitoringItem.title}</h1>
<StructuredText
data={monitoringItem.content}
renderBlock={({ record }) => {
switch (record.__typename) {
case 'CoverImageRecord':
return <Image data={record.image.responsiveImage} />;
default:
return null;
}
}}
/>
</>
)
}
export default MonitoringItemTemplate
The types in “@/lib/types/datoTypes” are defined through “graphql-codegen”.
export type MonitoringItemRecord = {
__typename?: 'MonitoringItemRecord';
_allContentLocales?: Maybe<Array<Maybe<MonitoringItemModelContentFieldMultiLocaleField>>>;
_allDescriptionLocales?: Maybe<Array<Maybe<StringMultiLocaleField>>>;
...
content?: Maybe<MonitoringItemModelContentField>;
...
slug?: Maybe<Scalars['String']>;
title?: Maybe<Scalars['String']>;
updatedAt: Scalars['DateTime'];
};
export type MonitoringItemModelContentField = {
__typename?: 'MonitoringItemModelContentField';
blocks: Array<CoverImageRecord>;
links: Array<Scalars['String']>;
value: Scalars['JsonField'];
};
React-datocms is fresh "react-datocms": "^3.0.11",
Would be great if you can give me some help. Thanks!
