emersonlara / prisma-sdl

Generate SDL code from a Prisma Schema file

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

  // npm
  npm install -D prisma-sdl
  // yarn
  yarn add -D prisma-sdl

Using the generator

Create a script file to run the generators

// generate.js
import { prismaSdl } from 'prisma-sdl'

const files = prismaSdl({ dest: 'sdl' })

Run the bin script

npx prisma-sdl \
root="./" \
dest="sdl" \
header="// Autogenerated" \
fileTypes="ts, js, d.ts" \
config="prismaSdl.config.json" \
tscClient="tsconfig.client.json" \
tscServer="tsconfig.server.json"

Server implementation

import { ApolloServer } from 'apollo-server-express'
import { typeDefs, resolvers, context } from './sdl/server'

const server = new ApolloServer({
  typeDefs,
  resolvers,
  context,
})
// other node server code

Client implementation

import React from 'react'
import { useBar, useFoos, useEditFooBars } from './sdl/client'

export default function App() {
  const bar = useBar({ variables: { id: 1 } })
  const foos = useFoos()
  const [submit, editFooBars] = useEditFooBars()

  const handleClick = () => {
    // incoming is a universal array that is typed to the model
    // deleting is a boolean, if false the records are upserted, otherwise deleted
    // if upserted, the new records with IDs are returned, if deleted, the IDs that were deleted are returned
    submit({
      variables: {
        incoming: [{ name: 'fooBar2' }, { name: 'fooBar3' }],
        deleting: false,
      },
    })
  }

  if (bar.loading || foos.loading || editFooBars.loading) {
    return <div>Loading...</div>
  }

  console.log(editFooBars.data?.editFooBars)
  // undefined until the button is clicked
  // [{ name: 'fooBar2' }, { name: 'fooBar3' }]

  return (
    <div>
      <h1>{bar.data?.bar.name}</h1>
      <ul>
        {foos.data?.foos.map((foo) => (
          <li key={foo.id}>{foo.name}</li>
        ))}
      </ul>
      <button onClick={handleClick}>Edit Foo Bars</button>
    </div>
  )
}

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:

generator client {
  provider     = "prisma-client-js"
  output       = "../../../node_modules/@prisma/client"
  sdlGenerator = "example"
}

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

  // npm
  npm install graphql-scalars
  // yarn
  yarn add graphql-scalars

Config

interface Options {
  root?: string // process.cwd()
  dest?: string // Options['root']
  header?: string // '// Automatically generated by Prisma SDL\n'
  fileTypes?: ['ts', 'js', 'd.ts'] // ['js', 'd.ts']
  tscClient?: string // ''
  tscServer?: string // ''
  customTemplates?: { [key: string]: ModelFile } // {}
  extraTemplates?: {
    model?: ModelFile[]
    models?: ModelFile[]
  } // { model: [], models: [] }
}

interface ModelFile {
  fileName?: string
  location?: string
  js?: string
  ts?: string
  'd.ts'?: string
}

• 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

.
├── client
│   ├── hooks
│   │   ├── mutations
│   │   │   ├── useEditFoos.ts // useEditFoos
│   │   │   ├── useEditBars.ts // useEditBars
│   │   │   └── index.ts
│   │   ├── queryOne
│   │   │   ├── useFoo.ts // useFoo
│   │   │   ├── useBar.ts // useBar
│   │   │   └── index.ts
│   │   └── queryAll
│   │       ├── useFoos.ts // useFoos
│   │       ├── useBars.ts // useBars
│   │       └── index.ts
│   ├── mutations
│   │   ├── EDIT_FOOS.ts // EDIT_FOOS
│   │   ├── EDIT_BARS.ts // EDIT_BARS
│   │   └── index.ts
│   ├── queryOne
│   │   ├── FOO.ts // FOO
│   │   ├── BAR.ts // BAR
│   │   └── index.ts
│   ├── queryAll
│   │   ├── FOOS.ts // FOOS
│   │   ├── BARS.ts // BARS
│   │   └── index.ts
│   └── index.ts
├── server
│   ├── context
│   │   ├── context.ts // context
│   │   └── index.ts
│   ├── resolvers
│   │   ├── resolvers.ts // resolvers
│   │   ├── mutations
│   │   │   ├── editFoos.ts // editFoos
│   │   │   ├── editBars.ts // editBars
│   │   │   └── index.ts
│   │   ├── queryOne
│   │   │   ├── foo.ts // foo
│   │   │   ├── bar.ts // bar
│   │   │   └── index.ts
│   │   └── queryAll
│   │       ├── foos.ts // foos
│   │       ├── bars.ts // bars
│   │       └── index.ts
├── rest
│   ├── express
│   │   ├── foos.ts // foos
│   │   ├── bars.ts // bars
│   │   └── index.ts
│   └── typeDefs
│       ├── typeDefs.ts // typeDefs
│       ├── mutations
│       │   ├── FOO_INPUT.ts // FOO_INPUT
│       │   ├── BAR_INPUT.ts // BAR_INPUT
│       │   └── index.ts
│       └── queries
│           ├── FOO.ts // FOO
│           ├── BAR.ts // BAR
│           └── index.ts
└── types
    ├── foos.ts // GqlFoo, GqlQFoos, GqlMFoos, GqlFooVar
    ├── bars.ts // GqlBar, GqlQBars, GqlMBars, GqlBarVar
    └── index.ts