Skip to content

Commit cae5d98

Browse files
arthurfioretteaidankmcalister
authored andcommitted
Improve documentation about typed json and prisma-json-types-generator (prisma#6994)
* documentation * remove prisma folder from filename * typing strings --------- Co-authored-by: Aidan McAlister <105178005+aidankmcalister@users.noreply.github.com>
1 parent 245feef commit cae5d98

2 files changed

Lines changed: 54 additions & 28 deletions

File tree

content/200-orm/100-prisma-schema/10-overview/03-generators.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -289,7 +289,7 @@ The following is a list of community created generators.
289289
- [`prisma-dbml-generator`](https://notiz.dev/blog/prisma-dbml-generator/): Transforms the Prisma schema into [Database Markup Language](https://dbml.dbdiagram.io/home/) (DBML) which allows for an easy visual representation
290290
- [`prisma-docs-generator`](https://github.com/pantharshit00/prisma-docs-generator): Generates an individual API reference for Prisma Client
291291
- [`prisma-json-schema-generator`](https://github.com/valentinpalkovic/prisma-json-schema-generator): Transforms the Prisma schema in [JSON schema](https://json-schema.org/)
292-
- [`prisma-json-types-generator`](https://github.com/arthurfiorette/prisma-json-types-generator): Adds support for [Strongly Typed `Json`](https://github.com/arthurfiorette/prisma-json-types-generator#readme) fields for all databases. It goes on `prisma-client-js` output and changes the json fields to match the type you provide. Helping with code generators, intellisense and much more. All of that without affecting any runtime code.
292+
- [`prisma-json-types-generator`](https://github.com/arthurfiorette/prisma-json-types-generator): Enhances `prisma-client-js` (or `prisma-client`) to provide strongly typed JSON fields for all databases, based on your schema. It improves code generation, Intellisense, and more, without affecting runtime code.
293293
- [`typegraphql-prisma`](https://github.com/MichalLytek/typegraphql-prisma#readme): Generates [TypeGraphQL](https://typegraphql.com/) CRUD resolvers for Prisma models
294294
- [`typegraphql-prisma-nestjs`](https://github.com/EndyKaufman/typegraphql-prisma-nestjs#readme): Fork of [`typegraphql-prisma`](https://github.com/MichalLytek/typegraphql-prisma), which also generates CRUD resolvers for Prisma models but for NestJS
295295
- [`prisma-typegraphql-types-gen`](https://github.com/YassinEldeeb/prisma-tgql-types-gen): Generates [TypeGraphQL](https://typegraphql.com/) class types and enums from your prisma type definitions, the generated output can be edited without being overwritten by the next gen and has the ability to correct you when you mess up the types with your edits.

content/200-orm/200-prisma-client/200-special-fields-and-types/100-working-with-json-fields.mdx

Lines changed: 53 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -976,46 +976,72 @@ These _null enums_ do not apply to MongoDB because MongoDB does not differentiat
976976

977977
</Admonition>
978978

979-
## Typed `Json`
979+
## Typed `Json` Fields
980980

981-
By default, `Json` fields are not typed in Prisma models. To accomplish strong typing inside of these fields, you will need to use an external package like [prisma-json-types-generator](https://www.npmjs.com/package/prisma-json-types-generator) to accomplish this.
981+
Prisma's `Json` fields are untyped by default. To add strong typing, you can use the external package [prisma-json-types-generator](https://www.npmjs.com/package/prisma-json-types-generator).
982982

983-
### Using `prisma-json-types-generator`
983+
1. First, install the package and add the generator to your `schema.prisma`:
984984

985-
First, install and configure `prisma-json-types-generator` [according to the package's instructions](https://www.npmjs.com/package/prisma-json-types-generator#using-it).
985+
```bash
986+
npm install -D prisma-json-types-generator
987+
```
986988

987-
Then, assuming you have a model like the following:
989+
```prisma file=schema.prisma
990+
generator client {
991+
provider = "prisma-client-js"
992+
}
988993
989-
```prisma no-copy
990-
model Log {
991-
id Int @id
992-
meta Json
993-
}
994-
```
994+
generator json {
995+
provider = "prisma-json-types-generator"
996+
}
997+
```
995998

996-
You can update it and type it by using [abstract syntax tree comments](/orm/prisma-schema/overview#comments)
999+
2. Next, link a field to a TypeScript type using an [AST comment](/orm/prisma-schema/overview#comments).
9971000

998-
```prisma highlight=4;normal file=schema.prisma showLineNumbers
999-
model Log {
1000-
id Int @id
1001+
```prisma highlight=4;normal file=schema.prisma showLineNumbers
1002+
model Log {
1003+
id Int @id
10011004
1002-
//highlight-next-line
1003-
/// [LogMetaType]
1004-
meta Json
1005-
}
1006-
```
1005+
//highlight-next-line
1006+
/// [LogMetaType]
1007+
meta Json
1008+
}
1009+
```
10071010

1008-
Then, make sure you define the above type in a type declaration file included in your `tsconfig.json`
1011+
3. Then, define `LogMetaType` in a type declaration file (e.g., `types.ts`) that is included in your `tsconfig.json`.
10091012

1010-
```ts file=types.ts showLineNumbers
1011-
declare global {
1012-
namespace PrismaJson {
1013-
type LogMetaType = { timestamp: number; host: string }
1014-
}
1013+
```ts file=types.ts showLineNumbers
1014+
declare global {
1015+
namespace PrismaJson {
1016+
type LogMetaType = { timestamp: number; host: string };
1017+
}
1018+
}
1019+
1020+
// This file must be a module.
1021+
export {};
1022+
```
1023+
1024+
Now, `Log.meta` will be strongly typed as `{ timestamp: number; host: string }`.
1025+
1026+
### Typing `String` Fields and Advanced Features
1027+
1028+
You can also apply these techniques to `String` fields. This is especially useful for creating string-based enums directly in your schema when your database does not support enum types.
1029+
1030+
```prisma
1031+
model Post {
1032+
id Int @id
1033+
1034+
/// !['draft' | 'published']
1035+
status String
1036+
1037+
/// [LogMetaType]
1038+
meta Json[]
10151039
}
10161040
```
10171041

1018-
Now, when working with `Log.meta` it will be strongly typed!
1042+
This results in `post.status` being strongly typed as `'draft' | 'published'` and `post.meta` as `LogMetaType[]`.
1043+
1044+
For a complete guide on configuration, monorepo setup, and other advanced features, please refer to the [official `prisma-json-types-generator` documentation](https://github.com/arthurfiorette/prisma-json-types-generator#readme).
10191045

10201046
## `Json` FAQs
10211047

0 commit comments

Comments
 (0)