How to implement JSON-Serever in NestJS Application? - nestjs

I am new to Nest JS Framework and I dont whether I can use json-server to mock external API.
I have already checked NestJS documentation but its not having any example.
I found one question on Stack-overflow but it not complete Example Json-server mocking API instead of calls
I simply want to make one POST call and 1 GET Call.
Dont know which file I write these mocked POST and GET calls.

My first question is, what is your purpose for using NestJS?
You can think of NestJS and json-server as "similar" in their goal; you would use one OR the other. Not both.
If your goal is just to mock data and server, then you have everything you need with json-server. You wouldn't need NestJS.
If what you are looking for is to mock data to retrieve instead of creating a database, you can simply create a simple object in NestJS and retrieve data from there.
For the latter, it might look something like this (not tested):
// app.controller.ts
import { Controller, Get } from '#nestjs/common';
import { AppService } from '../services/app.service';
#Controller('api')
export class AppController {
constructor(private readonly appService: AppService) {}
#Get('/users')
findAllUsers(): Promise<any> {
return this.appService.findAllUsers();
}
}
// app.service.ts
import { Injectable } from '#nestjs/common';
#Injectable()
export class AppService {
private getMockData() {
return {
users: [
{
name: 'john',
email: 'john#doe.com',
},
{
name: 'jane',
email: 'jane#doe.com',
},
],
};
}
findAllUsers(): Promise<any> {
return new Promise(function (resolve, reject) {
const data = this.getMockData();
if (data.users.length > 0) resolve(data.users);
else reject('No users found');
});
}
}
Now you would just have to do the request GET <host>/api/users where the host will be something like http://localhost:8080 in your local machine.

Related

Handling HTTP Errors inside services

I'm learning Nest, but there is a practice that i don't really like even in the official tutorial. It's one of Handling HTTP specific errors inside services. If later, for some services i'll used a protocol other that HTTP that will use a Service that handle specific HTTP errors, it don't think it's a best practice. As I'm not yet a Nestjs expert, here is how i'm trying to handle this situation:
// errors.interface.ts
export interface IError {
errorCode: number;
errorMessage: string;
}
import { Injectable } from '#nestjs/common';
import { IError } from './errors.interface';
#Injectable()
export class UserService {
// ...
async remove(id: number): Promise<Partial<User> | IError> {
const user = await this.userRepository.findOne({ where: { id } });
if (!user) {
return { errorCode: 404, errorMessage: 'user not found' };
}
await this.userRepository.remove(user);
return {
id,
};
}
}```
Here is my controller.
```// user.controller.ts
import { Controller, Get, HttpException, HttpStatus } from '#nestjs/common';
import { UserService } from './user.service';
import { IError } from './errors.interface';
#Controller('users')
export class UserController {
constructor(private userService: UserService) {}
#Get(':id')
async remove(#Param('id') id: number) {
const result = await this.userService.remove(id);
if ('errorCode' in result) {
throw new HttpException(result.errorMessage, result.errorCode);
}
return result;
}
}
As you can see, I'm trying to handle HTTP-specific errors inside HTTP controllers.
I don't have enough experience with Nestjs, maybe there are better ways to tackle these kinds of problems. I would like to know what is the best practice.
To create a Nest application instance, we use the core NestFactory class. NestFactory exposes a few static methods that allow creating an application instance. The create() method returns an application object, which fulfills the INestApplication interface. This object provides a set of methods which are described in the coming chapters. In the main.ts example above, we simply start up our HTTP listener, which lets the application await inbound HTTP requests.
so you can only work with HTTP requests and handling HTTP specific errors inside services is in fact the best practice.

How to query Sanity client with NestJS?

Right now I have React app initialized with Vite connected with Sanity.
Everything is working just fine, Sanity client is connected, React is fetching data from Sanity, I'm receiving it with no problem.
But the problem is, that if I deploy React app with Sanity connected, then I will leak my projectID and sanity_token to the fronted, which I want to avoid of course.
So I have to make some backend REST API which will be fetched by React, and then my API will fetch Sanity. I could do it with Node.js and Express without problem, but I decided that I will use NestJS and learn something instead.
But when it comes to NestJS, everything is connected a bit different.
On the front I had :
import sanityClient from '#sanity/client';
export const client = sanityClient({
projectId: import.meta.env.VITE_SANITY_PROJECT_ID,
dataset: 'production',
apiVersion: '2022-02-01',
useCdn: true,
token: import.meta.env.VITE_SANITY_TOKEN
});
And for NestJS I found something like this:
import { Injectable } from '#nestjs/common';
import sanityClient, { SanityClient } from '#sanity/client';
#Injectable()
export class SanityService {
public readonly client: SanityClient = sanityClient({
projectId: process.env.SANITY_PROJECT_ID,
dataset: 'production',
apiVersion: '2022-02-01',
useCdn: true,
token: process.env.SANITY_TOKEN
});
}
My question is that if it's a good way to connect Sanity client?
How to query Sanity client with specified GROQ query?
Till now I was using this on the frontend, but it's not gonna work in NestJS:
const query = '*[_type == "blogPost"]';
client.fetch(query)
.then((data) => {
setPosts(data);
})
.catch((err) => {
console.log(err);
})
It turned out that this is the proper way to connect with Sanity client, I had an issue with that similar to this thread
And the solution was the same as in the thread above. Add "esModuleInterop": true to tsconfig.json.
{
"compilerOptions": {
...
"esModuleInterop": true,
...
}
}
Then call for data to sanity client is working properly:
#Get()
async getAllPosts() {
// initialize sanity instance
const sanityService = new SanityService();
// your query
const query = '*[_type == "blogPost"]';
try {
const data = await sanityService.client.fetch(query);
return data;
} catch (error) {
console.log(error.msg);
}
}

How to intercept HTTP Calls in AWS Amplify with Angular

Problem Statement:
I have working on project in Angular using AWS Amplify. The project uses cognito and successfully created AWS api for client calls. Now, I need an interceptor to intercept the requests as I need to do perform some action.
What I DID:
I have tried using Angular HTTP Interceptors but they don't work. According to my research that AWS Amplify uses axios interceptors under the hood to intercept the calls. I tried implementing using Axios package
https://www.npmjs.com/package/axios
My Implementation:
MyIntercept.ts
import { Injectable } from '#angular/core';
import axios from 'axios';
#Injectable({providedIn: 'root'})
export class MyInterceptor {
intercept() {
console.log("Hello this is my interceptor")
axios.interceptors.request.use(request => {
console.log("*******************Inside My Interceptor*************");
console.log("Call: ", request);
return request;
});
}
}
export function InterceptorFactory(myIntercept: MyInterceptor): any {
return () => myIntercept.intercept();
}
and in the app Module file
import { InterceptorFactory, MyInterceptor } from './myInterceptor.service';
import { APP_INITIALIZER } from '#angular/core';
providers: [
{
provide: APP_INITIALIZER,
useFactory: InterceptorFactory,
deps: [MyInterceptor],
multi: true
}
]
What I get:
When I run the code, all I see the line outside the console for once only which is:
Hello this is my interceptor
I need to ask you if I am doing something wrong here or is there any other approach to achieve this?

I'm using a passport-jwt auth strategy in my nestJS app (with authGuard), how to get access to the token payload in my controller?

I'm trying to get access to the jwt payload in a route that is protected by an AuthGuard.
I'm using passport-jwt and the token payload is the email of the user.
I could achieve this by runing the code bellow:
import {
Controller,
Headers,
Post,
UseGuards,
} from '#nestjs/common';
import { JwtService } from '#nestjs/jwt';
import { AuthGuard } from '#nestjs/passport';
#Post()
#UseGuards(AuthGuard())
async create(#Headers() headers: any) {
Logger.log(this.jwtService.decode(headers.authorization.split(' ')[1]));
}
I want to know if there's a better way to do it?
Your JwtStrategy has a validate method. Here you have access to the JwtPayload. The return value of this method will be attached to the request (by default under the property user). So you can return whatever you need from the payload here:
async validate(payload: JwtPayload) {
// You can fetch additional information if needed
const user = await this.userService.findUser(payload);
if (!user) {
throw new UnauthorizedException();
}
return {user, email: payload.email};
}
And then access it in you controller by injecting the request:
#Post()
#UseGuards(AuthGuard())
async create(#Req() request) {
Logger.log(req.user.email);
}
You can make this more convenient by creating a custom decorator:
import { createParamDecorator } from '#nestjs/common';
export const User = createParamDecorator((data, req) => {
return req.user;
});
and then inject #User instead of #Req.

Nest.JS use AuthGuard as Middleware for GraphQL

I'm trying to make secure my GraphQL endpoint with passportJS in order that every call to this endpoint uses the AuthGuard for validating the token and setting the user on request.user, just as it does in a controller with this code:
#Get('findAll')
#UseGuards(AuthGuard('jwt'))
findAll(#Req() request): Promise<Array<Thing>> {
return this.thingService.findByUser(request.user.email);
}
The thing is I want to use it in the graphQL endpoint, which is created like this:
consumer
.apply(graphiqlExpress({ endpointURL: '/graphql' }))
.forRoutes('/graphiql')
.apply(
graphqlExpress(req => ({ schema, rootValue: req })),
¿?,
)
.forRoutes('/graphql');
I suppose I can just set it like a middleware function after the graphqlExpress function, but I have not been successful. Any thoughts?
Thank you in advance!
Edit
As a workaround I have implemented the solution proposed on Nest Docs where it uses the #UseGuard in every query/mutation that must be protected.
However, I want to protect the entire endpoint so that the guard is not called for every protected resolver, but only once on the main request. Is this even possible?
This technically is possible, but it's a pretty sloppy thing to write, and there's absolutely no guarantees it will work with Fastify so heads up. The meat of the functionality comes from the module where you implement the middleware. I ended up doing this all with the AppModule which I do not suggest (at least not all of the code there), but it works nonetheless.
You need to make the guard a custom provider so it can be injected into any context.
Then you need to mock up the ExecutionContext using req, res, next. This is easier said than done if you want type safety, but if you don't care about that (which I didn't for this) then slap up an as any and call it a day.
After that, in the middleware consumer you run the apply and make use of this.guard.canActivate with that mock ExecutionContext you created. Make this middleware async and await the canActivate call. Check that it comes back as true and if not then throw new <ErrorOfYourChoice>() and boom. It's set up. The code would look (vaguely) like this:
import {
BadRequestException,
CanActivate,
Inject,
MiddlewareConsumer,
Module,
NestModule,
} from '#nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { AppResolver } from './app.resolver';
import { GraphQLModule } from '#nestjs/graphql';
import { JwtModule } from '#nestjs/jwt';
import { AuthGuard, PassportModule } from '#nestjs/passport';
import { JwtStrategy } from './jwt.strategy';
#Module({
imports: [
GraphQLModule.forRoot({
autoSchemaFile: true,
}),
JwtModule.register({ secret: 'secret' }),
PassportModule.register({ defaultStrategy: 'jwt' }),
],
controllers: [AppController],
providers: [
AppService,
AppResolver,
JwtStrategy,
{ provide: 'CustomGuard', useClass: AuthGuard() },
],
})
export class AppModule implements NestModule {
constructor(#Inject('CustomGuard') private readonly guard: CanActivate) {}
configure(consumer: MiddlewareConsumer) {
consumer
.apply(async (req, res, next) => {
const canActivate = await this.guard.canActivate({
switchToHttp: () => ({
getRequest: () => req,
getResponse: () => res,
getNext: () => next,
}),
} as any);
if (canActivate) {
next();
} else {
throw new BadRequestException();
}
})
.forRoutes('graphql');
}
}
You can check this repository for everything wired up and working. Login with POST /login -d 'username=test1&password=changeme', get the JWT and play around with it as you like.
However, I want to protect the entire endpoint so that the guard is not called for every protected resolver, but only once on the main request. Is this even possible?
I was able to get a middleware function to resolve on every query/mutation by using the reference global approach from NestJS here: https://docs.nestjs.com/graphql/field-middleware#global-field-middleware.

Resources