Improve Your Frontend Experience With Strapi Types And TypeScript

1

Web development keeps changing, and it's all about building fast, reliable websites and apps. That's why many developers use tools like Strapi, a headless CMS, and Next.js.

This is a companion discussion topic for the original entry at https://strapi.io/blog/improve-your-frontend-experience-with-strapi-types-and-type-script
2

Hey, I have opened an issue in this articleā€™s GitHub repo. Basically, itā€™s very frustrating to try and use nested component data. Also I think that there are still some issues with how the API responds and what the types actually represent (nested data and attribute keys, no arrays where they should actually be). Could be I am using this the wrong way or thereā€™s still some work to do to get everything 100% working. Some examples in the issue that Iā€™ve mentioned.

4

hi, a few things

  1. if you are working in a monorepo you can create a dev dependency in the frontend module on the strapi module and then import the contentTypes.d.ts. no need to copy the file.
  2. I found some errors in the types.ts file. for example:
    in type MediaValue it should be APIResponse and not APIResponseData
type MediaValue<TAttribute extends Attribute.Attribute> = TAttribute extends Attribute.Media<
  infer _TKind,
  infer TMultiple
>
  ? Utils.Expression.If<TMultiple, APIResponse<'plugin::upload.file'>[], APIResponse<'plugin::upload.file'>>
  : never;

and APIResponseCollectionMetadata is missing the pagination level and should be

export interface APIResponseCollectionMetadata {
  pagination: {
    page: number;
    pageSize: number;
    pageCount: number;
    total: number;
  };
}

it would be very nice if this was part of the Strapi project so that it would be maintained along with the actual types

1 Like
5

also media fields should be optional in the type even if they are required in the schema. cause you need to populate the image to get it.

1 Like
6

Do you have any idea why the required fields are being typed as possibly undefined?

For example, my collection type attribute start_at is:

start_at: Attribute.DateTime & Attribute.Required;

But typescript is displaying:

(property) start_at: DateTimeValue | undefined
7

Normally this is something that should be working. Can you give more context on the issue your are having. Also, are you sure that your project is loading types from types found in types/generated/components.d.ts.

8

Thank you for the awesome feedback. Great tip in point one. On your second point we will update the types.ts accordingly with all your fixes.

9

Which type are you using exactly that return this undefined value? In any case, even required fields can be undefined when ā€˜draft and publishā€™ is enabled.

10

Hi, can you please explain what should be added to package.json and tsconfig in a monorepo case?

12

I also struggled with setting up Strapi with TypeScript in a monorepo. To help, I created a starter template that combines Strapi, TypeScript, and Next.js with Turborepo (a monorepo solution from Vercel). It might be just what youā€™re looking for! :slightly_smiling_face:

Check it out here: GitHub - sawden/turbostrapi: :zap: TurboStrapi: The fast lane to kickstarting Strapi & Next.js projects.

1 Like
13

nice. I was looking for something like this.
one quick question, is the api in nextj app type safe?

14

Hi :slightly_smiling_face:,
The Next.js frontend is more or less type-safe. As you know, Strapi allows you to request only specific fields (e.g., slug and title) via the ā€˜populateā€™ parameter in the query URL, even if the content-type has many more fields.
However, the generated types always include all possible fields of the content-type, regardless of what you request in your query!
So while you have the complete type information, the actual data you receive may not include all fields. If you need 100% type safety, I would recommend using GraphQL.

15

Thank you for your article!

It has been many months since your article was written.

Is there any need to write a types.ts file now - or is it already built into strapi?

16

I made a small module that looks at all your files in api and components and by them make a folder with types
Try adding the package to the backend folder
npm i create-strapi-types

And then in the root (in terminal) run the command
npx create-strapi-types frontend

The frontend option creates the folder and types in the
/frontend/src/types/types.ts

This will create all api types and components for you
/backend/types/types.ts

1 Like
18

Going to check it out. Hey, would you be willing to write a blog post quickly showcasing this pacakage and your motivation for creating it and how it fits in your work flow. We can share it on our blog to give it some more visibility.

19

@Paul_Brats Hi Paul, thanks for your in depth tutorial. But Iā€™m running into a problemā€¦ inside the types file saw the MediaValue type that should return a ResponseCollection whenever a media field accepts multiple files:

type MediaValue<TAttribute extends Attribute.Attribute> =
  TAttribute extends Attribute.Media<infer _TKind, infer TMultiple>
    ? Utils.Expression.If<
        TMultiple,
        APIResponseCollection<"plugin::upload.file">,
        APIResponse<"plugin::upload.file"> | null
      >
    : never;

But when I look inside my components.d.ts file, I have a section that contains a media field with that allows for multiple files:

export interface SectionsLanguage extends Schema.Component {
  collectionName: 'components_sections_languages';
  info: {
    displayName: 'Language';
    description: '';
  };
  attributes: {
    title: Attribute.String & Attribute.Required;
    description: Attribute.Text;
    logo: Attribute.Media;
    link: Attribute.String;
  };
}

However, I donā€™t see anything that indicates that this is a ā€œcollectionā€ of media files.

Is this a bug in strapi? Do you have any idea on how I could fix this?

20

Nice tutorial, but is not actual already with Strapi 5 :frowning:

1 Like
21

Are there any v5 tutorials expected on a similar topic?

2 Likes