Type-Safe Fetch with Next.js, Strapi, and OpenAPI

1

This blog post will teach you how to achieve type safety in a front-end application used for your Strapi backend. You can accomplish this with just a few lines of code using a REST API and the fetch function.

This is a companion discussion topic for the original entry at https://strapi.io/blog/type-safe-fetch-with-next-js-strapi-and-open-api
2

That sounds nice, but if think there are some gotchas. For example, if I fetch a collection of items, the meta.pagination property of the response data is typed as

| {
    page?: number | undefined;
    pageSize?: number | undefined;
    pageCount?: number | undefined;
    total?: number | undefined;
  }
| undefined

As far as I know, the meta.pagination should always be defined when we fetch a collection? It is annoying to have to deal with undefined when you know for sure that it is not. The exclamation mark could be used to tell TS that the property exists, but it is also annoying to have to add exclamation marks everywhere.

The type of the items is also pretty weird: all properties are something | undefined, even the id.