Instructions

Starter template for 😻 NestJS and Prisma.

Checkout NestJS Prisma Schematics to automatically add Prisma support to your Nest application.

Version

Branch	Nest	Prisma	Graphql
master	v7	prisma2	Code-first
Prisma2 Code First	v6	prisma2-preview	Code-first
Prisma1 Code First	v6	v1	Code-first
Prisma1 SDL First	v6	v1	SDL First
Prisma1 SDL First	v5	v1	SDL First

Features

• GraphQL w/ playground
• Code-First w/ decorators
• Prisma for database modelling, migration and type-safe access (Postgres, MySQL & MongoDB)
• 🔐 JWT authentication w/ passport-jwt
• REST API docs w/ Swagger

Overview

• Instructions
  • Features
  • Overview
  • Prisma Setup
    • 1. Install Dependencies
    • 2. Prisma2: Prisma Migrate
    • 3. Prisma2: Prisma Client JS
    • 4. Seed the database data with this script
    • 5. Install Nestjs
  • Start NestJS Server
  • Playground
  • Rest Api
  • Docker
  • Schema Development
  • NestJS - Api Schema
    • Resolver
  • Graphql Client
    • Angular
      • Setup
      • Queries
      • Mutations
      • Subscriptions
      • Authentication

Prisma Setup

1. Install Dependencies

Install the dependencies for the nest server:

npm install

2. Prisma2: Prisma Migrate

Prisma Migrate is used to manage the schema and migration of the database.

Saving the migration of the database:

npx prisma migrate save --experimental
# or
npm run prisma:save

Perform the database migration:

npx prisma migrate up --experimental
# or
npm run prisma:up

3. Prisma2: Prisma Client JS

Prisma Client JS is a type-safe database client auto-generated based on the data model.

To generate Prisma Client JS execute, this will always be executed after npm install:

npx prisma generate
# or
npm run prisma:generate

4. Seed the database data with this script

Execute the script with this command:

npm run seed

5. Install Nestjs

The Nestjs CLI can be used to generate controller, services, resolvers and more.

npm i -g @nestjs/cli

⬆ back to top

Start NestJS Server

Run Nest Server in Development mode:

npm run start

# watch mode
npm run start:dev

Run Nest Server in Production mode:

npm run start:prod

Playground for the NestJS Server is available here: http://localhost:3000/graphql

⬆ back to top

Playground

Some queries and mutations are secured by an auth guard. You have to acquire a JWT token from signup or login. Add the the auth token as followed to HTTP HEADERS in the playground and replace YOURTOKEN here:

{
  "Authorization": "Bearer YOURTOKEN"
}

Rest Api

RESTful API documentation available with Swagger.

Docker

Nest serve is a Node.js application and it is easily dockerized.

See the Dockerfile on how to build a Docker image of your Nest server.

Now to build a Docker image of your own Nest server simply run:

# give your docker image a name
docker build -t <your username>/nest-prisma-server .
# for example
docker build -t nest-prisma-server .

After Docker build your docker image you are ready to start up a docker container running the nest server:

docker run -d -t -p 3000:3000 --env-file .env nest-prisma-server

Now open up localhost:3000 to verify that your nest server is running.

Schema Development

Update the Prisma schema prisma/schema.prisma and after that run the following two commands:

npx prisma generate
# or in watch mode
npx prisma generate --watch
# or
npm run prisma:generate
npm run prisma:generate:watch

⬆ back to top

NestJS - Api Schema

The schema.graphql is generated with code first approach. The schema is generated from the models, the resolvers and the input classes.

You can use class-validator to validate your inputs and arguments.

Resolver

To implement the new query, a new resolver function needs to be added to users.resolver.ts.

@Query(returns => User)
async getUser(@Args() args): Promise<User> {
  return await this.prisma.client.user(args);
}

Restart the NestJS server and this time the Query to fetch a user should work.

⬆ back to top

Graphql Client

A graphql client is necessary to consume the graphql api provided by the NestJS Server.

Checkout Apollo a popular graphql client which offers several clients for React, Angular, Vue.js, Native iOS, Native Android and more.

Angular

Setup

To start using Apollo Angular simply run in an Angular and Ionic project:

ng add apollo-angular

HttpLink from apollo-angular requires the HttpClient. Therefore, you need to add the HttpClientModule to the AppModule:

imports: [BrowserModule,
    HttpClientModule,
    ...,
    GraphQLModule],

You can also add the GraphQLModule in the AppModule to make Apollo available in your Angular App.

You need to set the URL to the NestJS Graphql Api. Open the file src/app/graphql.module.ts and update uri:

const uri = 'http://localhost:3000/graphql';

To use Apollo-Angular you can inject private apollo: Apollo into the constructor of a page, component or service.

⬆ back to top

Queries

To execute a query you can use:

this.apollo.query({query: YOUR_QUERY});

# or

this.apollo.watchQuery({
  query: YOUR_QUERY
}).valueChanges;

Here is an example how to fetch your profile from the NestJS Graphql Api:

const CurrentUserProfile = gql`
  query CurrentUserProfile {
    me {
      id
      email
      name
    }
  }
`;

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {
  data: Observable<any>;

  constructor(private apollo: Apollo) {}

  ngOnInit() {
    this.data = this.apollo.watchQuery({
      query: CurrentUserProfile,
    }).valueChanges;
  }
}

Use the AsyncPipe and SelectPipe to unwrap the data Observable in the template:

<div *ngIf="data | async | select: 'me' as me">
  <p>Me id: {{me.id}}</p>
  <p>Me email: {{me.email}}</p>
  <p>Me name: {{me.name}}</p>
</div>

Or unwrap the data using RxJs.

This will end up in an GraphQL error because Me is protected by an @UseGuards(GqlAuthGuard) and requires an Bearer TOKEN. Please refer to the Authentication section.

⬆ back to top

Mutations

To execute a mutation you can use:

this.apollo.mutate({
  mutation: YOUR_MUTATION,
});

Here is an example how to login into your profile using the login Mutation:

const Login = gql`
  mutation Login {
    login(email: "[email protected]", password: "pizzaHawaii") {
      token
      user {
        id
        email
        name
      }
    }
  }
`;

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {
  data: Observable<any>;

  constructor(private apollo: Apollo) {}

  ngOnInit() {
    this.data = this.apollo.mutate({
      mutation: Login,
    });
  }
}

⬆ back to top

Subscriptions

To execute a subscription you can use:

this.apollo.subscribe({
  query: YOUR_SUBSCRIPTION_QUERY,
});

⬆ back to top

Authentication

To authenticate your requests you have to add your TOKEN you receive on signup and login mutation to each request which is protected by the @UseGuards(GqlAuthGuard).

Because the apollo client is using HttpClient under the hood you are able to simply use an Interceptor to add your token to the requests.

Create the following class:

import { Injectable } from '@angular/core';
import {
  HttpEvent,
  HttpInterceptor,
  HttpHandler,
  HttpRequest,
} from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class TokenInterceptor implements HttpInterceptor {
  constructor() {}

  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    const token = 'YOUR_TOKEN'; // get from local storage
    if (token !== undefined) {
      req = req.clone({
        setHeaders: {
          Authorization: `Bearer ${token}`,
        },
      });
    }

    return next.handle(req);
  }
}

Add the Interceptor to the AppModule providers like this:

providers: [
    ...
    { provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true },
    ...
  ]

After you configured the Interceptor and retrieved the TOKEN from storage your request will succeed on resolvers with @UseGuards(GqlAuthGuard).

⬆ back to top