adamyeats / typegraphql-prisma-demo

📈 A Prisma/TypeGraphQL demo for DEPT.

📈 TypeGraphQL x Prisma Demo

This app was first presented at the 30/06/20 talk I gave at the Tech Stage at DEPT. It was a live-coding exercise designed to demonstrate just how much could be done in Node.js with some scaffolding and some command-line tools in under 10 minutes; in this case, we built an entire typesafe GraphQL API with Prisma and TypeGraphQL!

Steps to recreate

In a new Node.js project with a package.json, first, run:

npm install --save-dev prisma

This installs Prima's CLI tooling. Once installed you can then run:

npx prisma init

This will scaffold a new Prisma project, complete with a schema file.

Included in this repo is a docker-compose.yml file that creates a new Postgres instance. After bringing the database up with docker compose up, you can then access it with Prisma by using the following DATABASE_URL string into your .env file.

DATABASE_URL="postgresql://postgres:my-secret-pw@localhost:5432/dept-prisma-tgql?schema=public"

The next step is to install the Prisma Client package. This is where the JavaScript that is generated by the Prisma CLI lives.

npm install --save @prisma/client

Once this is done, you can open the schema file located at prisma/schema.prisma and start making changes!

We'll create a simple schema based on a beer brewery. A brewery has many types of beer. We'll also add some basic detail properties to each model.

model Beer {
  id   Int    @id @default(autoincrement())
  name String
  abv  Float

  Brewery   Brewery @relation(fields: [breweryId], references: [id])
  breweryId Int
}

model Brewery {
  id       Int    @id @default(autoincrement())
  name     String
  location String
  beers    Beer[]
}

You're ready to run a migration! You can do that by running this command:

npx prisma migrate dev --name init

Next up, let's generate the GraphQL schema! We generate this using Prisma, which outputs the schema to TypeScript. Let's install the dependencies first:

npm install --save type-graphql graphql graphql-fields reflect-metadata class-validator
npm install --save-dev @types/graphql-fields typegraphql-prisma

Then, underneath the existing generator block in prisma/schema.prisma, add the TypeGraphQL generator:

generator typegraphql {
  provider = "typegraphql-prisma"
  output   = "../src/generated/typegraphql-prisma"
}

Then, regenerate the Prisma Client and watch all the code be generated into ../src/generated/typegraphql-prisma!

npx prisma generate

Next, let's add a GraphQL server...

npm install --save apollo-server

In src/index.ts, you'll see the code needed to consume the generated schema.

You can then start the server using npm run dev. At localhost:4000 (by default), you will now see the GraphQL Playground. Now we can add some data:

Query:

mutation ($data: BreweryCreateInput!) {
  createBrewery(data: $data) {
    name
    location
    beers {
      name
      abv
    }
  }
}

Variables:

{
  "data": {
    "name": "Brouwerij 't IJ",
    "location": "Amsterdam, The Netherlands"
  }
}

Query:

mutation ($data: BeerCreateInput!) {
  createBeer(data: $data) {
    name
    abv
    breweryId
  }
}

Variables:

{
  "data": {
    "name": "IJwit",
    "abv": 7,
    "Brewery": {
      "connect": {
        "id": 1
      }
    }
  }
}

Finally, let's run a query to see this data we've just added coming from the database:

Query:

query {
  breweries {
    name
    location
    beers {
      abv
      name
    }
  }
}

Success!

Quick Start

• Initialise the project by cloning it into a new directory
• Copy .env.example to .env and fill in the required variables
• Run npm install to install the dependencies
• Run npm dev to start the tsc compiler and nodemon in watch mode

Development

This project requires at least Node.js v14. Always use the latest LTS version of Node.js when you can!

Version management configuration for Node.js is provided for volta. We recommend you have this installed to automatically switch between Node.js versions when you enter one of our project directories. This allows for more deterministic and reproducible builds, which makes debugging easier.

You use volta to configure the project to use the latest LTS version of Node.js by running:

volta pin node@lts

You can run this command again to update the version.

Installation

To install the dependencies:

npm install

You can then run the following to start the project in dev mode.

npm run dev

This runs the build:watch and start:debug commands at the same time.

Debugging the server

You can run the following to only start the server in debug mode. This will also watch your files for changes, and reload the server when your files are saved.

npm run start:debug

TypeScript Compilation

You can also run the following to only start the compiler in watch mode.

npm run build:watch

You can also build the library without watching the directory:

npm run build

Further reading

• Prisma Getting Started Guide
• Unit Testing with Prisma