Graphql: Playground broken when a reverse proxy adds a prefix

[rkutca]

I'm submitting a bug

[ ] Regression 
[x] Bug report
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead post your question on Stack Overflow.

Current behavior

Currently when using the GraphQL package in combination with a globalPrefix, custom path and AWS gateway where the nestjs app is exposed on a subpath, the graphical interface keeps trying to connect with the hardcoded global prefix, while the GraphQL API it self uses the custom path of the gateway correct:

Correct endpoint (GET)

As you can see the API gateway is exposing all API's on it's subpath [HOST_NAME]/v1/[NEST_PREFIX].

Wrong endpoint (POST)

As you can see the GraphiQL interface omits the v1 prefix if the api gateway: [HOST_NAME]/[NEST_PREFIX]. This results in the graphiQL interface in a 403. However, this only occurs with the GraphiQL interface. Using the GraphQL endpoint via Postman works fine.

Expected behavior

I Expect the GraphiQL interface to respect the prefixes from both the NestJS app as the API gateway, like the GraphQL API it self.

Minimal reproduction of the problem with instructions

// main.ts
import 'dotenv/config';
import { NestFactory } from '@nestjs/core';
import { FastifyAdapter, NestFastifyApplication } from '@nestjs/platform-fastify';
import { AppModule } from './modules';

async function bootstrapApp(): Promise<void> {

  // create nest app
  const app = await NestFactory.create<NestFastifyApplication>(
    AppModule,
    new FastifyAdapter(),
  );

  // set global prefix
  // note this prefix is dependend on
  // the AWS API gateway prefix
  app.setGlobalPrefix('api/company/v1');

  await app.listen(3000, '0.0.0.0');
}

void bootstrapApp();

import { Module } from '@nestjs/common';
import { GraphQLModule } from '@nestjs/graphql';
import { join } from 'path';

@Module({
  imports: [
    GraphQLModule.forRoot({
      autoSchemaFile: join(process.cwd(), 'src', 'schemas', 'schema.gql'),
      path: '/search',
      playground: true,
      useGlobalPrefix: true,
    }),
  ],
})
export class AppModule {}

What is the motivation / use case for changing the behavior?

Environment

• AWS API Gateway
• Docker: node:14.9.0-alpine3.10
• pm2

Package.json

{
  "name": "my-graphql-api",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "prebuild": "rimraf dist lib",
    "build": "nest build",
    "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
    "precommit": "pretty-quick --staged && lint-staged",
    "start": "nest start",
    "start:dev": "nest start --watch",
    "start:debug": "nest start --debug --watch",
    "lint": "eslint \"{src,apps,libs,test}/**/*.ts\"",
    "lint:fix": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
    "test": "jest --no-cache",
    "test:watch": "jest --watch",
    "test:cov": "jest --coverage",
    "test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
    "test:e2e": "jest --config ./__e2e__/jest-e2e.json --no-cache",
    "typecheck": "tsc -d"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@nestjs/cli": "^7.5.1",
    "@nestjs/common": "^7.4.4",
    "@nestjs/core": "^7.4.4",
    "@nestjs/graphql": "^7.7.0",
    "@nestjs/microservices": "^7.4.4",
    "@nestjs/platform-fastify": "^7.4.4",
    "@nestjs/schedule": "^0.4.0",
    "@nestjs/swagger": "^4.6.0",
    "@nestjs/terminus": "^7.0.1",
    "apollo-datasource-soap": "^1.2.0",
    "apollo-server-cache-redis": "^1.2.2",
    "apollo-server-fastify": "^3.0.0-alpha.3",
    "apollo-server-plugin-response-cache": "^0.5.6",
    "chalk": "^4.1.0",
    "class-transformer": "^0.3.1",
    "class-validator": "^0.12.2",
    "dotenv": "^8.2.0",
    "fastify": "^3.3.0",
    "fastify-compress": "^3.3.0",
    "fastify-helmet": "^5.0.1",
    "fastify-rate-limit": "^4.0.2",
    "fastify-swagger": "^3.3.0",
    "jsdom": "^16.4.0",
    "nest-winston": "^1.3.6",
    "nestjs-redis": "^1.2.8",
    "node-fetch": "^2.6.0",
    "pm2": "^4.4.0",
    "reflect-metadata": "^0.1.13",
    "soap": "^0.34.0",
    "standard-version": "^9.0.0",
    "winston": "^3.3.3",
    "winston-daily-rotate-file": "^4.5.0"
  },
  "devDependencies": {
    "@commitlint/cli": "^10.0.0",
    "@commitlint/config-conventional": "^10.0.0",
    "@nestjs/testing": "^7.4.4",
    "@types/chalk": "^2.2.0",
    "@types/jest": "^26.0.12",
    "@types/jsdom": "^16.2.4",
    "@types/nock": "^11.1.0",
    "@types/node-fetch": "^2.5.7",
    "@types/redis": "^2.8.26",
    "@types/supertest": "^2.0.10",
    "@typescript-eslint/eslint-plugin": "^3.6.0",
    "@typescript-eslint/parser": "^3.6.0",
    "artillery": "^1.6.1",
    "artillery-plugin-fuzzer": "^1.0.1",
    "artillery-plugin-metrics-by-endpoint": "^0.1.1",
    "eslint": "7.4.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-import": "^2.22.0",
    "eslint-plugin-prettier": "3.1.4",
    "husky": "^4.2.5",
    "jest": "^26.1.0",
    "jest-mock-console": "^1.0.1",
    "lint-staged": "^10.2.13",
    "nock": "^13.0.4",
    "prettier": "^2.0.5",
    "pretty-quick": "^2.0.1",
    "stylelint": "13.6.1",
    "stylelint-config-standard": "20.0.0",
    "supertest": "^4.0.2",
    "ts-jest": "^26.1.1",
    "ts-loader": "^8.0.3",
    "ts-node": "^8.10.2",
    "tsconfig-paths": "^3.9.0",
    "tslint": "^6.1.2",
    "typescript": "^3.9.5",
    "typescript-eslint": "0.0.1-alpha.0"
  },
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  },
  "lint-staged": {
    "*.{ts,tsx}": [
      "prettier --write",
      "git add"
    ]
  },
  "standard-version": {
    "skip": {
      "changelog": true
    }
  }
}

[kamilmysliwiec]

Have you tried updating @nestjs/graphql to the latest version?

Please provide a minimum reproduction repository.

[rkutca]

I added the latest packages but that does not fix the issue. A minimal repository: https://github.com/rkutca/nestjs-graphql-prefixes. It uses an reverse proxy, in this case nginx to force the deployment of the nestjs application on a subpath. The api resolves well, but the Playground throws issues, as it does not respect the reverse proxy subpath but only uses the global prefix and path.

Use docker-compose up instead of nest start.

[kamilmysliwiec]

Have you tried setting the playground.endpoint manually? As follows:

GraphQLModule.forRoot({
  playground: {
    endpoint: 'http://whatever-you-need-here'
  },
})

This seems to be related to this issue https://github.com/apollographql/apollo-server/issues/1908, let's track this there