I'm in the process of developing a basic Next.js application with TypeScript by integrating Strapi as a headless CMS.
The main goal is to use Strapi and GraphQL, along with TypeScript, to display content on the Next.js app.
Within Strapi, there is a Color Content type consisting of two colors: red and blue.
GraphQL has been successfully set up in Strapi, and it functions properly in the playground.
query ColorData{
colors{
data{
attributes{
color_name
}
}
}
}
The output of this query:
{
"data": {
"colors": {
"data": [
{
"attributes": {
"color_name": "Red"
}
},
{
"attributes": {
"color_name": "Blue"
}
}
]
}
}
}
In the Next.js app, I am utilizing GraphQL codegen for type generation purposes.
import type { CodegenConfig } from '@graphql-codegen/cli';
const config: CodegenConfig = {
overwrite: true,
schema: "http://0.0.0.0:1337/graphql",
documents: "graphql/**/*.ts",
generates: {
"./src/__generated__/": {
preset: "client",
plugins: []
}
}
};
export default config
The generated types related to colors are as follows:
[types here]
However, when attempting to use these types in the Next.js app, they do not seem to correspond correctly with the queried data.
[more code snippets]
If I exclude the types:
<ColorEntityResponseCollection, ColorEntityResponse>
The console displays data, but with the included types, only the loading indicator appears. What could be causing this issue with the code generation?