📑 Order Subscriptions

🔷 Graphql-subscriptions

GraphQL subscriptions은 GraphQL에서 subscriptions을 구현하기 위해 pubsub 시스템과 GraphQL을 연결할 수 있는 Npm 패키지이다.
모든 GraphQL 클라이언트 및 서버와 함께 사용할 수 있다.

npm i graphql-subscriptions
https://www.npmjs.com/package/graphql-subscriptions

🔸Web Socket(ws) Error

다음과 같이 PubSub 인스턴스를 생성하고 Subscription decorator를 사용해 pubsub.asyncIterator를 return 할 경우 "error": "Could not connect to websocket endpoint ws://localhost:3000/graphql. Please check if the endpoint url is correct." 와 같은 에러를 return한다.

우리 서버는 http 프로토콜을 사용하고 있는데 ws 또한 프로토콜이면 realtime을 처리하는 WebSocket을 말한다. mutation과 query는 http를 필요로 하고 subscription은 webSocket을 필요로 하기때문에 두 곳에서 모두 서버가 돌아갈 수 있어야한다.

const pubsub = new PubSub();

@Subscription((returns) => String)
  hotPotatos() {
    return pubsub.asyncIterator('hotPotatos');
  }

- 해결방법 (Subscriptions 활성화)

subscriptions을 활성화하려면 app module에서 다음과 같이 설정해야한다. 이렇게 하면 서버에서 두가지 프로토콜을 모두 사용할 수 있게된다.

GraphQLModule.forRoot<ApolloDriverConfig>({
  driver: ApolloDriver,
  subscriptions: {
    'graphql-ws': true
  },
})

🔷 Using both 'http' and 'ws'

• http프로토콜에는 request가 있고 ws프로토콜에는 이와 같은 역할을 하는 connection이 있다.

🔹 Flow

먼저 Guard와 AuthUser 데코레이터에서 user를 받아오는 과정에 대해 알아보자

로그인해서 받은 토큰을 http header에 넣어서 request를 보내면 jwtmiddleware에서 토큰을 받아 decoding한 후 user를 req에 넣어서 리턴한다.
그럼 graphql module에서 context에 req를 넣어 guard에서 받은 후 context를 통해 role을 알아낼 수 있다.

🔹 Problem & Fix

하지만 middleware를 사용해서는 request만 받아올 수 있어 http프로토콜만 사용이 가능하며 connection을 받아와야하는 ws프로토콜은 사용이 불가능하다. 그래서 app module에서 middleware를 제거해준 후 graphql module에 아래의 코드를 추가해준다.

subscriptions 내부의 코드는 connection에 토큰을 추가해주는 코드이고 아래의 context 내부의 코드는 req에 토큰을 추가해주는 코드이다.

GraphQLModule.forRoot({
      driver: ApolloDriver,
      subscriptions: {
        'subscriptions-transport-ws': {
          onConnect: (connectionParams) => {
            console.log('connectionParams', connectionParams);
            const authToken = connectionParams['x-jwt'];
            if (!authToken) {
              throw new Error('Token is not valid');
            }
            const token = authToken;
            return { token };
          },
        },
      },
      context: ({ req }) => ({ token: req.headers['x-jwt'] }),
    }),

이후 Guard에서 토큰을 받아 middleware에서 하던 decoding을 Guard에서 아래의 코드와 같이 진행한다.

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(
    private readonly reflector: Reflector,
    private readonly jwtService: JwtService,
    private readonly userService: UserService,
  ) {}
  async canActivate(context: ExecutionContext) {
    const roles = this.reflector.get<AllowedRoles>(
      'roles',
      context.getHandler(),
    );
    if (!roles) {
      return true;
    }
    const gqlContext = GqlExecutionContext.create(context).getContext();
    const token = gqlContext.token;
    if (token) {
      const decoded = this.jwtService.verify(token.toString());
      if (typeof decoded === 'object' && decoded.hasOwnProperty('id')) {
        const { user } = await this.userService.findById(decoded['id']);
        if (user) {
          gqlContext['user'] = user;
          if (roles.includes('Any')) {
            return true;
          }
          return roles.includes(user.role);
        }
      }
    }
    return false;
  }
}

🔷 PubSub

• PubSub 모델은 특정한 주제(Topic)에 대하여 구독(Subscribe)한 모두에게 메시지를 발생(Publish)하는 통신 방법이다.

PubSub은 App 전체에서 하나의 인스턴스만 생성되어야 한다. 이를 위해 인스턴스를 common Module에 다음과 같이 선언한 후 common Module을 @Global() 처리 해준다.

const pubsub = new PubSub();

@Global()
@Module({
  providers: [
    {
      provide: PUB_SUB,
      useValue: pubsub,
    },
  ],
  exports: [PUB_SUB],
})
export class CommonModule {}

Resolver에서는 PubSub을 사용하고자 할 때는 다음과 같이 @Inject를 통해 사용할 수 있다

@Resolver(of => Order)
export class OrderResolver {
  constructor(
    @Inject(PUB_SUB) private readonly pubSub: PubSub,
  ) {}

🔷 Subscriptions Option

🔹 Filtering Subscriptions

Subscriptions을 사용할 때 특정 이벤트를 필터링하려면 필터 속성을 필터 함수로 설정할 수 있다.

//EX
@Subscription(returns => Comment, {
filter: (payload, variables, context) =>
payload.commentAdded.title === variables.title,
})
commentAdded(@Args('title') title: string) {
return pubSub.asyncIterator('commentAdded');
}

• payload: pubsub.publish()를 통해 전달한 객체
• variables: subscription에 전달한 객체(인자)
• context: gqlContext객체

  @Mutation((returns) => Boolean)
  async potatoReady(@Args('potatoId') potatoId: number) {
    await this.pubSub.publish('hotPotatos', {
      readyPotato: potatoId,
    });
    return true;
  }

  @Subscription((returns) => String, {
    filter: ({ readyPotato }, { potatoId }) => {
      return readyPotato === potatoId;
    },
  })
  @Role(['Any'])
  readyPotato(@AuthUser() user: User, @Args('potatoId') potatoId: number) {
    return this.pubSub.asyncIterator('hotPotatos');
  }

potatoId가 같을 경우에만 결과를 Load한다.

https://docs.nestjs.com/graphql/subscriptions#filtering-subscriptions

🔹 Resolve

resolver함수가 리턴하는 값은 pubsub.asyncIterator()를 통해 받는 값이 된다. publish한 event payload를 변형하려면 resolve 속성을 함수로 설정한다. 함수는 이벤트 payload를 수신하고 적절한 값을 반환힌다.

@Subscription((returns) => String, {
    filter: ({ readyPotato }, { potatoId }) => {
      return readyPotato === potatoId;
    },
    resolve: ({ readyPotato }) =>
      `Your potato with the id ${readyPotato} is ready!`,
  })

🔷 Pending Orders

//orders.service.ts / createOrder part
await this.pubSub.publish(NEW_PENDING_ORDER, {
        pendingOrders: { order, ownerId: restaurant.ownerId },
      });

//orders.resolver.ts
@Subscription((returns) => Order, {
    filter: ({ pendingOrders: { ownerId } }, _, { user }) => {
      return ownerId === user.id;
    },
    resolve: ({ pendingOrders: { order } }) => order,
  })
  @Role(['Owner'])
  pendingOrders() {
    return this.pubSub.asyncIterator(NEW_PENDING_ORDER);
  }

service의 payload에 Order이 아닌 {pendingOrders: { order, ownerId: restaurant.ownerId }} 이와 같은 Object를 넣었기 때문에 Resolve Option을 통해 Order를 반환해줘야한다.

🔷 Eager relations

Eager relation은 데이터베이스에서 엔티티를 로드할 때마다 자동으로 relation 필드들을 로드한다. (eager: true를 추가)

@ManyToMany(type => Category, category => category.questions, {
eager: true
})
@JoinTable()
categories: Category[];

https://orkhan.gitbook.io/typeorm/docs/eager-and-lazy-relations#eager-relations

🔷 Lazy relations

Lazy relation은 해당 필드에 접근하면 로드된다. Lazy relation은 타입으로 Promise를 가져야 한다. Promise에 값을 저장하고 로드할 때도 Promise를 반환힌다.

@ManyToMany(type => Question, question => question.categories)
questions: Promise< Question[]>;

@ManyToMany(type => Category, category => category.questions)
@JoinTable()
categories: Promise< Category[]>;

const question = await connection.getRepository(Question).findOne(1);
const categories = await question.categories;

https://orkhan.gitbook.io/typeorm/docs/eager-and-lazy-relations#lazy-relations