Question

我使用apollo服务器开发了一个实时应用程序，其中使用angular作为前端，使用nestjs作为后端。我从角度上得到了这个错误。

与'ws：// localhost：3000 / graphql'的WebSocket连接失败：在建立连接之前，WebSocket已关闭。

在Playground中，订阅工作正常。

我在游乐场和订阅工作中尝试我的代码。

subscription noti($repoFullName: String!) {
  notificationAdded(repoFullName: $repoFullName) {
    id
  }
}

mutation createNotification($data: NotificationCreateInput!) {
  createNotification(data: $data) {
    id
  }
}

这是我的代码：在解析器中

 @Subscription('notificationAdded')
    notificationAdded(repoFullName: string) {
         return this.pubSub.asyncIterator('notificationAdded');
    }

 @Mutation('createNotification')
    async createNotification(@Args('data') data: NotificationCreateInput) {
        const noti = await this.prisma.prisma.createNotification(data);
        this.pubSub.publish('notificationAdded', {notificationAdded: noti}).then(succ => {
            console.log(succ);
        }).catch(error => {
            console.log(error);
        });
        return noti;
    }

我的AppModule（NestJs）

@Module({
  imports: [
    GraphQLModule.forRoot({
      typeDefs: [typeDefs,notificationTypeDefs, pushSubscriptionTypeDefs,accountTypeDefs],
      resolverValidationOptions: {
        requireResolversForResolveType: false,
      },
      installSubscriptionHandlers: true,
      subscriptions: {
        onConnect : connectionParams => {
          console.log(connectionParams);
        }
      },
      context: ({ req }) => {
        return {
          request: req,
        };
      },
      playground: true,
      debug: false,
    }),
    PrismaModule,
    AccountModule,
    PushSubscriptionModule,
    NotificationModule,
    CardModule,
  ],
  controllers: [AppController],
  providers: [
    AppService,
  ],
})
export class AppModule {}

我的GraphqlModule（角度）

const uri = environment.backend_graph_url; // <-- add the URL of the GraphQL server here
const ws = new WebSocketLink({
  uri: `ws://localhost:3000/graphql`,
  options: {
    reconnect: true,
    timeout: 45000,
    connectionCallback : (error) => {
      console.log('connectionCallback')
    }
  }
});

export function createApollo(httpLink: HttpLink) {


  const link = split(
    // split based on operation type
    ({ query }) => {
      const { kind, operation } = getMainDefinition(query);
      return kind === 'OperationDefinition' && operation === 'subscription';
    },
    ws,
    httpLink.create({uri}),
  );
  return {
    link,
    cache: new InMemoryCache(),
  };
}

@NgModule({
  exports: [ApolloModule, HttpLinkModule],
  providers: [
    {
      provide: APOLLO_OPTIONS,
      useFactory: createApollo,
      deps: [HttpLink],
    },
  ],
})
export class GraphQLModule {}

我想得到这份工作。请任何帮助问候

Angular Nestjs Grapgql订阅失败

0 个答案: