Is there a way to extract typescript types to be used in a separate frontend?

[ahmad_alghanam]

I’m using typescript nextjs app to communicate with strapi.
I have for example a “project” content type that has several fields (text and media fields)
My question is: is there a way to get the type of the data returned from calling the “projects” rest endpoint from my nextjs app so I can use it rather than defining the types manually in my nextjs app?

[mancku]

I’m working on a plugin for that. Hope I can get it ready soon. I’ll let you know in this post

[Andrei_Wilkens]

You can use Tools liek “orval” for this. You just need to exclude some types in the orval config - but you can just generate the types with it from the OpenAPI Documentation that Strapi generates

[Andrei_Wilkens]

Sharing Strapi schema with other projects (e.g. front-ends)

Hey dude, So as answer 1 said, if You’re using typescript You can ts generate types This will create a file “schemas,d.ts” or sth like that In that file You should have almost all the content types, only that You have to access their “attributes” attribute (so You import the type, but the fields of the content types are like: import type ApiOrder type Order = ApiOrder[“attributes”] What You can do is then add the strapi repo to Your nuxt repo as a submodule, You can then import those types…

Here you can see another Thread about it , where i described it a bit more detailed

[d17e]

I recently ran into the same problem and noticed that the documentation plugin generates an openapi json spec. I tried some codegenerators to get my typescript types & client generated but didn’t get this to work well. The strapi types and openapi spec contain a lot of abstractions and details that aren’t exactly relevant for the frontend which I think are related to the issues I faced.

As this didn’t exactly work out and I didn’t want to roll everything by hand, I decided to try out the graphql endpoint plugin. turns out this comes with a graphql playground (little UI to play with the api) and let’s you configure the location where it generates the graphql schema. So now my Strapi server regenerates the schema every time the model changes and then this is consumed in my client app with the @graphql-codegen package. I had to learn how to write graphql queries though, but all in all this is working great for me now.

Note that I’m still hand-rolling simplified view models and mappers as I don’t want to deal with all the intermediary types of the strapi abstractions in my client application.

I would however have rather seen a cleaner and more straightforward solution to all this and might give the orval.dev generator a try if I find some time. Or the new plugin that’s coming soon.

Let me know if anyone wants more details on the graphql setup I’m currently using

[gokeez]

Is there at least one working plugin for this right now?

[mancku]

@gokeez, @d17e, @ahmad_alghanam @Andrei_Wilkens

I finally uploaded the plugin to NPM and I got it working just fin in 3 different projects: strapi-plugin-schemas-to-ts - npm and hope it helps.
The documentation needs improvements, because Strapi generates so many different versions of the same interface that it’s difficult to comprehend at first glance. I’ll keep working on it. Any feedback is welcome.