apollo-server-express: Use req.originalUrl inside ApolloServer

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ### v2.5.0
 
+- `apollo-server-express`: Fix Playground URL when Apollo Server is mounted inside of another Express app by utilizing `req.originalUrl`. [PR #2451](https://github.com/apollographql/apollo-server/pull/2451)
 - New plugin package `apollo-server-plugin-response-cache` implementing a full query response cache based on `apollo-cache-control` hints. The implementation added a few hooks and context fields; see the PR for details. There is a slight change to `cacheControl` object: previously, `cacheControl.stripFormattedExtensions` defaulted to false if you did not provide a `cacheControl` option object, but defaulted to true if you provided (eg) `cacheControl: {defaultMaxAge: 10}`. Now `stripFormattedExtensions` defaults to false unless explicitly provided as `true`, or if you use the legacy boolean `cacheControl: true`. [PR #2437](https://github.com/apollographql/apollo-server/pull/2437)
 - Allow `GraphQLRequestListener` callbacks in plugins to depend on `this`. [PR #2470](https://github.com/apollographql/apollo-server/pull/2470)
 - Move shared TypeScript utility types `WithRequired` and `ValueOrPromise` into `apollo-server-env`. [PR #2415](https://github.com/apollographql/apollo-server/pull/2415) [PR #2417](https://github.com/apollographql/apollo-server/pull/2417)

packages/apollo-server-express/src/ApolloServer.ts

@@ -195,7 +195,7 @@ export class ApolloServer extends ApolloServerBase {
 
         if (prefersHTML) {
           const playgroundRenderPageOptions: PlaygroundRenderPageOptions = {
-            endpoint: path,
+            endpoint: req.originalUrl,
             subscriptionEndpoint: this.subscriptionsPath,
             ...this.playgroundOptions,
           };

packages/apollo-server-express/src/__tests__/ApolloServer.test.ts

@@ -185,6 +185,57 @@ describe('apollo-server-express', () => {
       });
     });
 
+    it('renders GraphQL playground using request original url', async () => {
+      const nodeEnv = process.env.NODE_ENV;
+      delete process.env.NODE_ENV;
+      const samplePath = '/innerSamplePath';
+
+      const rewiredServer = new ApolloServer({
+        typeDefs,
+        resolvers,
+      });
+      const innerApp = express();
+      rewiredServer.applyMiddleware({ app: innerApp });
+
+      const outerApp = express();
+      outerApp.use(samplePath, innerApp);
+
+      const httpRewiredServer = await new Promise<http.Server>(resolve => {
+        const l = outerApp.listen({ port }, () => resolve(l));
+      });
+
+      const { url } = createServerInfo(rewiredServer, httpRewiredServer);
+
+      const paths = url.split('/');
+      const rewiredEndpoint = `${samplePath}/${paths.pop()}`;
+
+      await new Promise<http.Server>((resolve, reject) => {
+        request(
+          {
+            url: paths.join('/') + rewiredEndpoint,
+            method: 'GET',
+            headers: {
+              accept:
+                'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8',
+            },
+          },
+          (error, response, body) => {
+            process.env.NODE_ENV = nodeEnv;
+            if (error) {
+              reject(error);
+            } else {
+              expect(body).toMatch(rewiredEndpoint);
+              expect(body).not.toMatch('settings');
+              expect(response.statusCode).toEqual(200);
+              resolve();
+            }
+          },
+        );
+      });
+      await rewiredServer.stop();
+      await httpRewiredServer.close();
+    });
+
     const playgroundPartialOptionsTest = async () => {
       const defaultQuery = 'query { foo { bar } }';
       const endpoint = '/fumanchupacabra';