Prisma SDL

Features

• TypeScript friendly
• Great for quickly prototyping!
• Use as little or as much as you want, all of the generated modules are exported individually
• Tree-shakeable
• Supports custom tsconfig files for client and server compiling
• Supports one or multiple Prisma schemas
• Generates the following from a Prisma schema file
  • Apollo React Hooks
  • GraphQL SDL TypeDefs
  • GraphQL Resolvers
  • GraphQL Context
  • Client side GQL types
  • Server rest apis
• Generates hooks, SDLs, and resolvers ready for:
  • Querying all data from each model
  • Querying a single model by primary key
  • Mutating an array of items from each model

Usage

Installing

1  // npm
2  npm install -D prisma-sdl
3  // yarn
4  yarn add -D prisma-sdl

Using the generator

Create a script file to run the generators

1// generate.js
2import { prismaSdl } from 'prisma-sdl'
3
4const files = prismaSdl({ dest: 'sdl' })

Run the bin script

1npx prisma-sdl \
2root="./" \
3dest="sdl" \
4header="// Autogenerated" \
5fileTypes="ts, js, d.ts" \
6config="prismaSdl.config.json" \
7tscClient="tsconfig.client.json" \
8tscServer="tsconfig.server.json"

Server implementation

1import { ApolloServer } from 'apollo-server-express'
2import { typeDefs, resolvers, context } from './sdl/server'
3
4const server = new ApolloServer({
5  typeDefs,
6  resolvers,
7  context,
8})
9// other node server code

Client implementation

1import React from 'react'
2import { useBar, useFoos, useEditFooBars } from './sdl/client'
3
4export default function App() {
5  const bar = useBar({ variables: { id: 1 } })
6  const foos = useFoos()
7  const [submit, editFooBars] = useEditFooBars()
8
9  const handleClick = () => {
10    // incoming is a universal array that is typed to the model
11    // deleting is a boolean, if false the records are upserted, otherwise deleted
12    // if upserted, the new records with IDs are returned, if deleted, the IDs that were deleted are returned
13    submit({
14      variables: {
15        incoming: [{ name: 'fooBar2' }, { name: 'fooBar3' }],
16        deleting: false,
17      },
18    })
19  }
20
21  if (bar.loading || foos.loading || editFooBars.loading) {
22    return <div>Loading...</div>
23  }
24
25  console.log(editFooBars.data?.editFooBars)
26  // undefined until the button is clicked
27  // [{ name: 'fooBar2' }, { name: 'fooBar3' }]
28
29  return (
30    <div>
31      <h1>{bar.data?.bar.name}</h1>
32      <ul>
33        {foos.data?.foos.map((foo) => (
34          <li key={foo.id}>{foo.name}</li>
35        ))}
36      </ul>
37      <button onClick={handleClick}>Edit Foo Bars</button>
38    </div>
39  )
40}

Optional

If you're using multiple Prisma schema files you can provide Prisma SDL with a name by adding a property to your schema file:

1generator client {
2  provider     = "prisma-client-js"
3  output       = "../../../node_modules/@prisma/client"
4  sdlGenerator = "example"
5}

If any of your models have a DateTime or Json type, you will need to add the GraphQL Scalars package

1  // npm
2  npm install graphql-scalars
3  // yarn
4  yarn add graphql-scalars

Config

1interface Options {
2  root?: string // process.cwd()
3  dest?: string // Options['root']
4  header?: string // '// Automatically generated by Prisma SDL\n'
5  fileTypes?: ['ts', 'js', 'd.ts'] // ['js', 'd.ts']
6  tscClient?: string // ''
7  tscServer?: string // ''
8  customTemplates?: { [key: string]: ModelFile } // {}
9  extraTemplates?: {
10    model?: ModelFile[]
11    models?: ModelFile[]
12  } // { model: [], models: [] }
13}
14
15interface ModelFile {
16  fileName?: string
17  location?: string
18  js?: string
19  ts?: string
20  'd.ts'?: string
21}

• root: The root directory to start searching for Prisma schemas
• dest: The directory to write the generated files to. If you set it to '', files will not be saved
• header: The header to prepend to each file.
• fileTypes: Which file types you want returned. Defaults to js and d.ts but you can add native .ts files if you'd like or only return .js if you don't want type definitions.
• tscClient: The name of the tsconfig.json file that you want the TS compiler to compile the client side code with, leaving it blank uses the default templates
• tscServer: The name of the tsconfig.json file that you want the TS compiler to compile the server side code with, leaving it blank uses the default templates
• customTemplates: A map of custom templates, file names, and file locations to use for each file type.
  • Available keys are serverQueryAll, serverQueryOne, serverMut, serverTdQueries, serverTdMutations, clientQueryAll, clientQueryOne, clientMut, hookAll, hookOne, hookMut, tsTypes, allResolvers, typeDefs, context.
• extraTemplates: Allows you to add extra templates that you might wish to generate using your Prisma schema.
  • model generates a module per model in your schema, does not have access to the other models
  • models generates summarized files with all models, such as resolvers, typeDefs, and context. Has some additional properties, does not currently support a custom location.

CLI Config

• If you're loading a config from the CLI it must be in JSON format.
• By default it will search for a file named prismaSdl.config.json using process.cwd() as the root.
• You can choose a different file name if you pass config="my_own.config.json" in the CLI args.
• If it doesn't find it, it will try again from the specified root directory.

Generated Structure

Respective exported names are commented for reference

1.
2├── client
3│   ├── hooks
4│   │   ├── mutations
5│   │   │   ├── useEditFoos.ts // useEditFoos
6│   │   │   ├── useEditBars.ts // useEditBars
7│   │   │   └── index.ts
8│   │   ├── queryOne
9│   │   │   ├── useFoo.ts // useFoo
10│   │   │   ├── useBar.ts // useBar
11│   │   │   └── index.ts
12│   │   └── queryAll
13│   │       ├── useFoos.ts // useFoos
14│   │       ├── useBars.ts // useBars
15│   │       └── index.ts
16│   ├── mutations
17│   │   ├── EDIT_FOOS.ts // EDIT_FOOS
18│   │   ├── EDIT_BARS.ts // EDIT_BARS
19│   │   └── index.ts
20│   ├── queryOne
21│   │   ├── FOO.ts // FOO
22│   │   ├── BAR.ts // BAR
23│   │   └── index.ts
24│   ├── queryAll
25│   │   ├── FOOS.ts // FOOS
26│   │   ├── BARS.ts // BARS
27│   │   └── index.ts
28│   └── index.ts
29├── server
30│   ├── context
31│   │   ├── context.ts // context
32│   │   └── index.ts
33│   ├── resolvers
34│   │   ├── resolvers.ts // resolvers
35│   │   ├── mutations
36│   │   │   ├── editFoos.ts // editFoos
37│   │   │   ├── editBars.ts // editBars
38│   │   │   └── index.ts
39│   │   ├── queryOne
40│   │   │   ├── foo.ts // foo
41│   │   │   ├── bar.ts // bar
42│   │   │   └── index.ts
43│   │   └── queryAll
44│   │       ├── foos.ts // foos
45│   │       ├── bars.ts // bars
46│   │       └── index.ts
47├── rest
48│   ├── express
49│   │   ├── foos.ts // foos
50│   │   ├── bars.ts // bars
51│   │   └── index.ts
52│   └── typeDefs
53│       ├── typeDefs.ts // typeDefs
54│       ├── mutations
55│       │   ├── FOO_INPUT.ts // FOO_INPUT
56│       │   ├── BAR_INPUT.ts // BAR_INPUT
57│       │   └── index.ts
58│       └── queries
59│           ├── FOO.ts // FOO
60│           ├── BAR.ts // BAR
61│           └── index.ts
62└── types
63    ├── foos.ts // GqlFoo, GqlQFoos, GqlMFoos, GqlFooVar
64    ├── bars.ts // GqlBar, GqlQBars, GqlMBars, GqlBarVar
65    └── index.ts