Starter template for 😻 nest and Prisma.
- GraphQL w/ playground
- Code-First w/ type-graphql
- Prisma for database modelling, migration and type-safe access (Postgres, MySQL & MongoDB)
- 🔐 JWT authentication w/ passport-jwt
- REST API docs w/ Swagger
Install the dependencies for the nest server:
npm installSetup Prisma CLI
npm install -g prismaInstall Docker and start Prisma and the connected database by running the following command:
docker-compose up -dTo deploy the Prisma schema run:
prisma deployPlayground of Prisma is available here: http://localhost:4466/
Prisma Admin is available here: http://localhost:4466/_admin
Run Nest Server in Development mode:
npm run start
# watch mode
npm run start:devRun Nest Server in Production mode:
npm run start:prodPlayground for the NestJS Server is available here: http://localhost:3000/graphql
Some queries and mutations are secured by an auth guard. You have to accuire 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"
}
RESTful API documentation available with Swagger.
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.
There is one thing to be mentioned. A library called bcrypt is used for password hashing in the nest server starter. However, the docker container keeped crashing and the problem was missing tools for compilationof bcrypt. The solution is to install these tools for bcrypt's compilation before npm install:
# Install necessary tools for bcrypt to run in docker before npm install
RUN apt-get update && apt-get install -y build-essential && apt-get install -y pythonNow 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 nest-prisma-serverNow open up localhost:3000 to verify that your nest server is running.
If you see an error like request to http://localhost:4466/ failed, reason: connect ECONNREFUSED 127.0.0.1:4466 this is because Nest tries to access the Prisma server on http://localhost:4466/. In the case of a docker container localhost is the container itself.
Therefore, you have to open up Prisma Service endpoint: 'http://localhost:4466', and replace localhost with the IP address where the Prisma Server is executed.
Update the Prisma schema prisma/datamodel.prisma and after that run the following two commands:
prisma deployprisma deploy will update the database and for each deploy prisma generate is executed. This will generate the latest Prisma Client to access Prisma from your resolvers.
The schema.graphql is generated with type-graphql. The schema is generated from the models, the resolvers and the input classes.
You can use class-validator to validate your inputs and arguments.
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.
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.
To start using Apollo Angular simply run in an Angular and Ionic project:
ng add apollo-angularHttpLink 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.
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.
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
});
}
}To execute a subscription you can use:
this.apollo.subscribe({
query: YOUR_SUBSCRIPTION_QUERY
});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).