Comments (7)
I'm having a similar issue. where IMyContentTypeName
incorrectly extends interface Entry<IMyContentTypeNameFields>
:
Types of property 'sys' are incompatible.
Type '{ id: string; type: string; createdAt: string; updatedAt: string; locale: string; contentType: { sys: { id: "primaryNavigation"; linkType: "ContentType"; type: "Link"; }; }; }' is missing the following properties from type 'EntrySys': revision, space, environment
this is what is generated for one of my components:
export interface IMyContentTypeName extends Entry<IMyContentTypeNameFields> {
sys: {
id: string;
type: string;
createdAt: string;
updatedAt: string;
locale: string;
contentType: {
sys: {
id: "myContentTypeName";
linkType: "ContentType";
type: "Link";
};
};
};
}
and this is what passes the type checks:
export interface IMyContentTypeName extends Entry<IMyContentTypeNameFields> {
sys: {
id: string;
type: string;
createdAt: EntryFields.Date;
updatedAt: EntryFields.Date;
locale: string;
contentType: {
sys: {
id: "myContentTypeName";
linkType: "ContentType";
type: "Link";
};
};
revision: number;
space: { sys: SpaceLink }
environment: { sys: EnvironmentLink }
};
}
I also need to add EntryFields
, SpaceLink
, and EnvironmentLink
to the imports.
I tried downgrading to a previous version of the Contentful repo v10 beta to see if that fixed it but it did not
@GabrielAnca are you guys still using it with this issue? seems like it would break something down the line
from contentful-typescript-codegen.
Hi 👋🏻 Thanks a lot for sharing this with us, and sorry for the late response
Starting from the end, we're still using this repo on our day-to-day indeed.
@asimpson good point 🤔 We never had this issue because we don't use toPlainObject
nor update
, but I ran a test in some of our code and those methods don't exist. Based on Contentful docs they should exist from version 3 onwards: https://github.com/contentful/contentful.js/blob/cdd57af9a234427e35a3487bec0345bcd53323f3/MIGRATION.md?plain=1#L126-L136. If I'm reading this right, this might be an issue on Contentful side. Can you let me know if my reasoning makes any sense?
@intcreator we are hardcoding the sys interface and we actually shouldn't do that. We only intend to hardcode the content type to help typescript with typing. Your proposed solution makes perfect sense to me. An alternative I was thinking about was actually removing duplication by just extending Contentful's Sys
interface. Something like:
export interface ICtaLink extends Entry<ICtaLinkFields> {
sys: Sys & {
contentType: {
sys: {
id: 'ctaLink'
linkType: 'ContentType'
type: 'Link'
}
}
}
}
Would something like this work?
from contentful-typescript-codegen.
@GabrielAnca I believe that would work. if it passes the type check immediately after generation that's pretty much all I need
from contentful-typescript-codegen.
I've been experiencing, what I think is a related issue – I'm using version 3.4.0
of this package, and version 9.3.3
of contentful's SDK (v10 doesn't work with the packages generated by this).
After I generate the types, I get something like this:
export interface ICategory extends Entry<ICategoryFields> {
sys: {
id: string;
type: string;
createdAt: string;
updatedAt: string;
locale: string;
contentType: {
sys: {
id: "category";
linkType: "ContentType";
type: "Link";
};
};
};
}
I then create a function to fetch this entry, that looks like this:
export const fetchCategories = async (): Promise<
EntryCollection<ICategoryFields>
> => {
return await Contentful.getEntries<ICategory["fields"]>({
content_type: "category",
});
};
The issue here is that the type for sys.contentType.sys.id
is set to string, and not category
.
So, when I try to feed this data into a component like so:
const categories = await fetchCategories();
type IHomeProps = {
categories: ICategory[];
}
<Home categories={categories.items} />
TS gives me the following error:
Type 'Entry<ICategoryFields>[]' is not assignable to type 'ICategory[]'.
Type 'Entry<ICategoryFields>' is not assignable to type 'ICategory'.
The types of 'sys.contentType.sys.id' are incompatible between these types.
Type 'string' is not assignable to type '"category"'.ts(2322)
I've tried a number of different things, but can't get it to work. Short of casting (which I would rather avoid as it defeats the purpose of TS), does anyone know how to get around this?
from contentful-typescript-codegen.
I've also exhausted all options trying to get this to work in userland. Anybody else had any luck?
from contentful-typescript-codegen.
I am not 100% sure if I did this right but I got the typing mostly working by:
- Creating a utility type that extends the base entry, and nests the fields on
fields
key - Extending the
sys
with theEntitySys
that comes fromcontentful
so we have the types.
It fixes the TS, but no idea if these types will actually be returned by API calls.
Before:
// type error, this is from raw generated types
export interface IPage extends Entry<IPageFields> {
sys: {
id: string;
type: "Entry";
createdAt: string;
updatedAt: string;
locale: string;
contentType: {
sys: {
id: "page";
linkType: "ContentType";
type: "Link";
};
};
}
}
After:
// grab the EntitySys from contentful
import { EntitySys } from "contentful";
// create a utility type
interface WithFieldsType<Fields> {
contentTypeId: string;
fields: Fields;
}
// use the utility type instead on the original fields
export interface IPage extends Entry<WithFieldsType<IPageFields>> {
sys: {
id: string;
type: "Entry";
createdAt: string;
updatedAt: string;
locale: string;
contentType: {
sys: {
id: "page";
linkType: "ContentType";
type: "Link";
};
};
} & EntitySys; // extend sys here
}
Types working now.
from contentful-typescript-codegen.
Okay, I did one more patch because apparently the Entry
from contentful
is horrible.
import {
type Asset,
type Entry, // this sucks
type EntrySys,
type BaseEntry,
} from "contentful";
export interface IPage extends WithFieldsType<IPageFields>, BaseEntry {
sys: {
id: string;
type: "Entry";
createdAt: string;
updatedAt: string;
locale: string;
contentType: {
sys: {
id: "page";
linkType: "ContentType";
type: "Link";
};
};
} & EntrySys;
}
from contentful-typescript-codegen.
Related Issues (20)
- The automated release is failing 🚨 HOT 2
- Smooth integration with next.js , env.local and alternative to getContentfulEnvironment HOT 5
- TypeError: Cannot read property 'getContentTypes' of undefined HOT 6
- Imports { Document } when it is not used HOT 2
- Feature Request: Export union of all entries HOT 1
- ERR_REQUIRE_ESM in Node 16.6 HOT 5
- Not using prettierrc.json
- Missing collection types in generated file HOT 3
- Type narrowing not working with current setup HOT 1
- generating typescript models fails for specific space with TypeError: contentTypeValidation.linkContentType.map is not a function
- Syntax error from code generation
- TypeError: functionMap[field.type] is not a function HOT 2
- Update to work with Contentful v10 HOT 8
- Non-required attributes are not automatically generated to have `| null` appended to type
- getContenfulEnvironment.ts HOT 1
- Prettier config not resolved correctly
- contentful^8.1.9 is required HOT 1
- Top level id, contentType and type on Entry HOT 1
- have option to add namespace and own commenting to generated types
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from contentful-typescript-codegen.