Generate Types

[Nisgrak]

Hi!

It's would nice to have a way of get/export the type of a api collection in Typescript, Go, Java, Python, etc, so the client using the API don't have to generate the types manually.

Thanks, you are doing a amazing job with directus!

[rijkvanzanten]

Good idea! We already do generate types in OAS and GraphQL style. Adding TypeScript is on my want-to-have list. Are there any tools available that can already generate those types into specific languages from a shared starting point? 🤔

[maltejur]

I would love to have types for the javascript sdk automaticaly generated, like prisma does.

[rijkvanzanten]

What would it generate? A .d.ts file?

[maltejur]

It would save the types locally, directly in the node_modules folder, so the user doesn't have to do anything and automatically gets full intellisense. This would only make sense tho if the sdk gets used in the same project as directus itself.

I would image it like this:

• The user edits the data model in the app
• The types of the sdk automatically get updated in the background
• The user can now get intellisense and types, for example directus.items("pages").readOne(id).data now has the right type of pages

Edit:
Putting the types in node_modules is how prisma does it, another option would be to generate a .d.ts file in the root of the project, which overrides the types of the sdk and then could also be tracked by git.

[maltejur]

Upon thinking a bit further about this approach, I don't think it is the greatest way to generate types, because it would only make sense in the limited use case where directus and @directus/sdk are used in the same node project.

It would probably make more sense to have an extension to manually generate types for all kinds of languages that can then be easily be downloaded. I made a quick test extension to do that for typescript: https://gist.github.com/maltejur/e7d915d396b7a2baff43d010662b5720

[rijkvanzanten]

Nice! Yeah that's what I was thinking too. We already have /specs/gql and /specs/oas, so it makes total sense to add a /specs/ts 🙂

[maltejur]

Since this is a feature that probably won't get into directus core, I wrote a extension to do just this. You can take a look here. Currently it only works with TypeScript, Python and OpenAPI, but I would love to add more languages.

@Nisgrak you mentioned Go and Java. I think it would be nice to add them, but currently I am not that familiar with how typing works in those languages. Could you tell me how types should look like in those languages?

[joselcvarela]

Hello @maltejur
I think this is a thing we want to include in core, at least for Typescript only. Also here, we've talked about it: #7909
But instead of a section in the app, we are more thinking in a specific route, like @rijkvanzanten mentioned (#5418 (reply in thread))

You could try a PR for that 😊

By the way, Good job with the extension it looks great 😉

[maltejur]

Thanks :D

You could try a PR for that

I'll give it a try.

[maltejur]

@joselcvarela #8531

[joselcvarela]

Nice one 💪

[marekbrze]

I would love to have this feature working in the core Directus... I love using Prisma for my Typescript projects and this little feature would make me ditch Prisma. Directus would be a powerhouse with it

[muradbu]

Would love this. We're currently looking for a method to generate types from our Directus collections to consume in our other TS projects. Prisma does it very well.

[dapalex]

I actually have been working for a while on this matter for python and GraphQL.
I just concluded a first version of my library and published it on PyPI, it is a python-GraphQL mapper: what it does is to generate python types from a GraphQL schema and these types can be used to send queries and mutations with the correct syntax in GraphQL.
I have been working on it quite hardly (sometimes it was a recursion hell) but I think it ended up quite good.
Here is the source code:

https://github.com/dapalex/py-graphql-mapper

I have created a quite extensive suite of tests in order to make it stable as much as possible, I tried also complex queries and mutations and so far so good.

Have a look at it and I hope it will become useful.

[ernst86913]

Might be worth to have a look at

https://github.com/maltejur/directus-extension-generate-types

[muradbu]

Currently we use Prisma to generate a schema, from which Prisma can generate types including their relations.

[jeffersonsolorzano]

How to you implement all this structure into directus format?

[rijkvanzanten]

Heya! Thanks for opening this feature request!

This feature request has received over 15 votes from the community. This means we'll move this feature request to the Under Review state!

The Core team will schedule a meeting to review this request as soon as possible. The discussion will then be approved or denied. You may or may not be invited to join this meeting with the core team.

For more information, see our Feature Request Process.

[ChappIO]

I released an extension this morning: https://github.com/chappio/directus-extension-models

It allows you to generate types for further extension development. I haven’t tested them for use with the API client as my focus is on extension development but I can’t imagine there being any issues because they are just typescript types.

[jeffersonsolorzano]

@ChappIO quick question, is it possible to add all the "create" "update" or "delete" props? that are in relational data, for example:

FkCommerceServiceToCommerceServiceVehicleBodyType: { create: [ [Object] ], update: [], delete: [] }

[jeffersonsolorzano]

It would generate an object and a type like this:

  FkCommerceServiceToCommerceServiceVehicleBodyType?: Commerceservicevehiclebodytype[] | { create: Commerceservicevehiclebodytype[], update: Commerceservicevehiclebodytype[], delete: [] } | null;

[ChappIO]

@jeffersonsolorzano that would be possible but non-trivial. I don't have the time to implement this soon. But I will keep it in mind when I work on this again.

[jeffersonsolorzano]

@ChappIO I made my own version of the script, it has a typesafe generator for directus request, I'll publish this extension so anyone can use it, I'll give you the credit of the initial script, since my extension is only based on this and made some complex configurations.

[jeffersonsolorzano]

Here's the repo:
https://github.com/jeffersonsolorzano/directus-extension-type-generator-orm-like

[SvenBudak]

I would be interested to know IF and, if so, how high this task is on the priority list of the Directus developers? I would be really delighted with an official solution.

[rijkvanzanten]

this task is a little vague, as it asks for multiple different client API types in various languages. If you're talking about typescript specifically, then the answer is if? absolutely yes. priority? high 🙂 we're tracking that piece over on #18121

[ChappIO]

@SvenBudak it's not an official solution but I've made a bunch of upgrades to my implementation recently: https://github.com/chappio/directus-extension-models

[SvenBudak]

this task is a little vague, as it asks for multiple different client API types in various languages. If you're talking about typescript specifically, then the answer is if? absolutely yes. priority? high 🙂 we're tracking that piece over on #18121

Really good to read that! I am really happy about this :) This will save many people so much time in the future. Thanks!

@SvenBudak it's not an official solution but I've made a bunch of upgrades to my implementation recently: https://github.com/chappio/directus-extension-models

Thank you for reminding me! I saw this package already. I am still not sure if I should try https://github.com/maltejur/directus-extension-generate-types or your package. The issue is that I have to wait until our Sys-Admin has time to add one of these extensions.

[ChappIO]

@SvenBudak ah if you're not developing on Directus yourself my extension probably does not help you and I am guessing generate-types will suit you better.

My extension adds a cli command, so if you're depending on a sysadmin to install extensions I'm guessing you'd also need them to run the cli commands to generate the types. Probably too much of a hassle.

[SvenBudak]

I roughly thought that already, I unfortunately haven't had the time to take a closer look at your package. Thank you for the hint! Then I will have MalteJurs extension installed over the weekend :)

[feliche93]

I also had some challenges and now use Drizzle ORM with Directus and it's a very smooth experience. Did a small write up about it here: https://www.felixvemmer.com/blog/drizzle-orm-directus-typescript-sdk/

[jclaveau]

Interesting! Having a client side ORM is definitelly missing IMHO.

When you write:

Direct Database Access: One of the most significant advantages Drizzle ORM offers is its independence from the Directus server. Instead of routing my queries through Directus, I can communicate directly with the database. This direct approach makes it lightweight and perfect for edge deployments, ensuring speed and efficiency.

Does it mean you bypass all the RBAC and Accountability layers of Directus?

Thus in the file packages/frontend/directus-drizzle.config.ts you add

export default {
  out: './directus-drizzle',
  dbCredentials: {
    connectionString: process.env.DIRECTUS_DIRECT_URL,
  },
  driver: 'pg',
} as Config

Does it mean your Postgres credentials are available on the frontend? I would have a very big security concern in this case

[feliche93]

@jclaveau thanks for the comment!

So the ORM/drizzle code is always executed on the server, e.g. I am using next, so I do most in react server components or server actions! As this is all done on the Server no credentials will be leaked. Also in Next.js if you don't put the NEXT_PUBLIB_xxx prefix, any imported env variable will not be leaked into client side code. So by having process.env.DIRECTUS_DIRECT_URL the creds will not leak into client side code even if you import it into a client component.

And yes I do bypass all the directus layers as I am currently using Clerk as auth provider. But I guess you could still call the auth provider to do some checks and only if the user is authorized run the drizzle part. Although this add some aditional complexity!

[jclaveau]

Ok, the naming packages/frontend/directus-drizzle.config.ts was misleading. Thank you for the quick response

[johnsusek]

npx openapi-typescript http://directus.local/server/specs/oas -o ./schema.d.ts

import type { components } from './schema';
type ItemsPages = components["schemas"]["ItemsPages"];

to use globally without needing to import, make the generated schema global:

declare global { 
  <generated code> 
}

export { }  

This could be good to add to the docs somewhere?

EDIT:

I'm using this bash script to regenerate the schema automatically:

oas="http://directus.local/server/specs/oas"; prev=""; while true; do current=$(curl -s $oas); if [[ "$prev" != "$current" ]]; then npx openapi-typescript $oas -o ./schema.d.ts; fi; prev="$current"; sleep 
5; done

[LouisHaftmann]

Does anyone know the structure of the generic DirectusClient<Collections> expects? (Including relations) I have been trying to get this working for hours :(

[jeffersonsolorzano]

Hi @LouisHaftmann I have an extension to make directusBackend services way more type safe, like am ORM would do, I'll publish a repo, so you can check if you wish

[LouisHaftmann]

That would be awesome, thank you!

[jeffersonsolorzano]

Here it goes:
https://github.com/jeffersonsolorzano/directus-extension-type-generator-orm-like

[ryami333]

Related discussion I just created: tools like GraphQL Codegen already exist but their utility is limited if the GraphQL Schema is role-dependent:

#21805