TypeScript graphql-playground-html.renderPlaygroundPage函数代码示例

  // If the `playgroundOptions` are set, register a `graphql-playground` instance
  // (not available in production) that is then used to handle all
  // incoming GraphQL requests.
  private handleGraphqlRequestsWithPlayground({
    req,
    res,
  }: {
    req: MicroRequest;
    res: ServerResponse;
  }): boolean {
    let handled = false;

    if (this.playgroundOptions && req.method === 'GET') {
      const accept = parseAll(req.headers);
      const types = accept.mediaTypes as string[];
      const prefersHTML =
        types.find(
          (x: string) => x === 'text/html' || x === 'application/json',
        ) === 'text/html';

      if (prefersHTML) {
        const middlewareOptions = {
          endpoint: this.graphqlPath,
          subscriptionEndpoint: this.subscriptionsPath,
          ...this.playgroundOptions,
        };
        send(res, 200, renderPlaygroundPage(middlewareOptions));
        handled = true;
      }
    }

    return handled;
  }

            (
              req: FastifyRequest<IncomingMessage>,
              reply: FastifyReply<OutgoingMessage>,
              done: () => void,
            ) => {
              // Note: if you enable playground in production and expect to be able to see your
              // schema, you'll need to manually specify `introspection: true` in the
              // ApolloServer constructor; by default, the introspection query is only
              // enabled in dev.
              if (this.playgroundOptions && req.req.method === 'GET') {
                // perform more expensive content-type check only if necessary
                const accept = (req as any).accepts() as Accepts;
                const types = accept.types() as string[];
                const prefersHTML =
                  types.find(
                    (x: string) =>
                      x === 'text/html' || x === 'application/json',
                  ) === 'text/html';

                if (prefersHTML) {
                  const playgroundRenderPageOptions: PlaygroundRenderPageOptions = {
                    endpoint: this.graphqlPath,
                    subscriptionEndpoint: this.subscriptionsPath,
                    ...this.playgroundOptions,
                  };
                  reply.type('text/html');
                  const playground = renderPlaygroundPage(
                    playgroundRenderPageOptions,
                  );
                  reply.send(playground);
                  return;
                }
              }
              done();
            },

      middlewareFromPath(path, (ctx: Koa.Context, next: Function) => {
        if (ctx.request.method === 'OPTIONS') {
          ctx.status = 204;
          ctx.body = '';
          return;
        }

        if (this.playgroundOptions && ctx.request.method === 'GET') {
          // perform more expensive content-type check only if necessary
          const accept = accepts(ctx.req);
          const types = accept.types() as string[];
          const prefersHTML =
            types.find(
              (x: string) => x === 'text/html' || x === 'application/json',
            ) === 'text/html';

          if (prefersHTML) {
            const playgroundRenderPageOptions: PlaygroundRenderPageOptions = {
              endpoint: path,
              subscriptionEndpoint: this.subscriptionsPath,
              ...this.playgroundOptions,
            };
            ctx.set('Content-Type', 'text/html');
            const playground = renderPlaygroundPage(
              playgroundRenderPageOptions,
            );
            ctx.body = playground;
            return;
          }
        }

        return graphqlKoa(() => {
          return this.createGraphQLServerOptions(ctx);
        })(ctx, next);
      }),

      method: async function(request, h) {
        if (request.path !== path) {
          return h.continue;
        }

        if (this.uploadsConfig && typeof processFileUploads === 'function') {
          await handleFileUploads(this.uploadsConfig)(request);
        }

        if (this.playgroundOptions && request.method === 'get') {
          // perform more expensive content-type check only if necessary
          const accept = parseAll(request.headers);
          const types = accept.mediaTypes as string[];
          const prefersHTML =
            types.find(
              (x: string) => x === 'text/html' || x === 'application/json',
            ) === 'text/html';

          if (prefersHTML) {
            const playgroundRenderPageOptions: PlaygroundRenderPageOptions = {
              endpoint: path,
              subscriptionEndpoint: this.subscriptionsPath,
              version: this.playgroundVersion,
              ...this.playgroundOptions,
            };

            return h
              .response(renderPlaygroundPage(playgroundRenderPageOptions))
              .type('text/html')
              .takeover();
          }
        }
        return h.continue;
      }.bind(this),

    app.use(path, (req, res, next) => {
      if (this.playgroundOptions && req.method === 'GET') {
        // perform more expensive content-type check only if necessary
        // XXX We could potentially move this logic into the GuiOptions lambda,
        // but I don't think it needs any overriding
        const accept = accepts(req);
        const types = accept.types() as string[];
        const prefersHTML =
          types.find(
            (x: string) => x === 'text/html' || x === 'application/json',
          ) === 'text/html';

        if (prefersHTML) {
          const playgroundRenderPageOptions: PlaygroundRenderPageOptions = {
            endpoint: path,
            subscriptionEndpoint: this.subscriptionsPath,
            ...this.playgroundOptions,
          };
          res.setHeader('Content-Type', 'text/html');
          const playground = renderPlaygroundPage(playgroundRenderPageOptions);
          res.write(playground);
          res.end();
          return;
        }
      }
      return graphqlExpress(() => {
        return this.createGraphQLServerOptions(req, res);
      })(req, res, next);
    });

    return (context: HttpContext, req: FunctionRequest) => {
      if (cors && cors.origin) {
        if (typeof cors.origin === 'string') {
          corsHeaders['Access-Control-Allow-Origin'] = cors.origin;
        } else if (
          typeof cors.origin === 'boolean' ||
          (Array.isArray(cors.origin) &&
            cors.origin.includes(
              req.headers['Origin'] || req.headers['origin'],
            ))
        ) {
          corsHeaders['Access-Control-Allow-Origin'] =
            req.headers['Origin'] || req.headers['origin'];
        }

        if (!cors.allowedHeaders) {
          corsHeaders['Access-Control-Allow-Headers'] =
            req.headers['Access-Control-Request-Headers'];
        }
      }

      if (req.method === 'OPTIONS') {
        context.done(null, {
          body: '',
          status: 204,
          headers: corsHeaders,
        });
        return;
      }

      if (this.playgroundOptions && req.method === 'GET') {
        const acceptHeader = req.headers['Accept'] || req.headers['accept'];
        if (acceptHeader && acceptHeader.includes('text/html')) {
          const path = req.originalUrl || '/';

          const playgroundRenderPageOptions: PlaygroundRenderPageOptions = {
            endpoint: path,
            ...this.playgroundOptions,
          };
          const body = renderPlaygroundPage(playgroundRenderPageOptions);
          context.done(null, {
            body: body,
            status: 200,
            headers: {
              'Content-Type': 'text/html',
              ...corsHeaders,
            },
          });
          return;
        }
      }

      const callbackFilter = (error?: any, output?: FunctionResponse) => {
        context.done(
          error,
          output && {
            ...output,
            headers: {
              ...output.headers,
              ...corsHeaders,
            },
          },
        );
      };
      graphqlAzureFunction(async () => {
        await promiseWillStart;
        return this.createGraphQLServerOptions(req, context);
      })(context, req, callbackFilter);
    };

    return (
      event: APIGatewayProxyEvent,
      context: LambdaContext,
      callback: APIGatewayProxyCallback,
    ) => {
      if (cors && cors.origin) {
        if (typeof cors.origin === 'string') {
          corsHeaders['Access-Control-Allow-Origin'] = cors.origin;
        } else if (
          typeof cors.origin === 'boolean' ||
          (Array.isArray(cors.origin) &&
            cors.origin.includes(
              event.headers['Origin'] || event.headers['origin'],
            ))
        ) {
          corsHeaders['Access-Control-Allow-Origin'] =
            event.headers['Origin'] || event.headers['origin'];
        }

        if (!cors.allowedHeaders) {
          corsHeaders['Access-Control-Allow-Headers'] =
            event.headers['Access-Control-Request-Headers'];
        }
      }

      if (event.httpMethod === 'OPTIONS') {
        return callback(null, {
          body: '',
          statusCode: 204,
          headers: corsHeaders,
        });
      }

      if (this.playgroundOptions && event.httpMethod === 'GET') {
        const acceptHeader = event.headers['Accept'] || event.headers['accept'];
        if (acceptHeader && acceptHeader.includes('text/html')) {
          const path =
            event.path ||
            (event.requestContext && event.requestContext.path) ||
            '/';

          const playgroundRenderPageOptions: PlaygroundRenderPageOptions = {
            endpoint: path,
            ...this.playgroundOptions,
          };

          return callback(null, {
            body: renderPlaygroundPage(playgroundRenderPageOptions),
            statusCode: 200,
            headers: {
              'Content-Type': 'text/html',
              ...corsHeaders,
            },
          });
        }
      }

      const callbackFilter: APIGatewayProxyCallback = (error, result) => {
        callback(
          error,
          result && {
            ...result,
            headers: {
              ...result.headers,
              ...corsHeaders,
            },
          },
        );
      };

      graphqlLambda(async () => {
        // In a world where this `createHandler` was async, we might avoid this
        // but since we don't want to introduce a breaking change to this API
        // (by switching it to `async`), we'll leverage the
        // `GraphQLServerOptions`, which are dynamically built on each request,
        // to `await` the `promiseWillStart` which we kicked off at the top of
        // this method to ensure that it runs to completion (which is part of
        // its contract) prior to processing the request.
        await promiseWillStart;
        return this.createGraphQLServerOptions(event, context);
      })(event, context, callbackFilter);
    };

    return (req: Request, res: Response) => {
      // Handle both the root of the GCF endpoint and /graphql
      // With bare endpoints, GCF sets request params' path to null.
      // The check for '' is included in case that behaviour changes
      if (req.path && !['', '/', '/graphql'].includes(req.path)) {
        res.status(404).end();
        return;
      }

      if (cors) {
        if (typeof cors.origin === 'string') {
          res.set('Access-Control-Allow-Origin', cors.origin);
        } else if (
          typeof cors.origin === 'boolean' ||
          (Array.isArray(cors.origin) &&
            cors.origin.includes(req.get('origin') || ''))
        ) {
          res.set('Access-Control-Allow-Origin', req.get('origin'));
        }

        if (!cors.allowedHeaders) {
          res.set(
            'Access-Control-Allow-Headers',
            req.get('Access-Control-Request-Headers'),
          );
        }
      }

      if (req.method === 'OPTIONS') {
        res.status(204).send('');
        return;
      }

      if (this.playgroundOptions && req.method === 'GET') {
        const acceptHeader = req.headers['accept'] as string;
        if (acceptHeader && acceptHeader.includes('text/html')) {
          const playgroundRenderPageOptions: PlaygroundRenderPageOptions = {
            endpoint: req.get('referer'),
            ...this.playgroundOptions,
          };

          res
            .status(200)
            .send(renderPlaygroundPage(playgroundRenderPageOptions));
          return;
        }
      }

      res.set(corsHeaders);

      graphqlCloudFunction(async () => {
        // In a world where this `createHandler` was async, we might avoid this
        // but since we don't want to introduce a breaking change to this API
        // (by switching it to `async`), we'll leverage the
        // `GraphQLServerOptions`, which are dynamically built on each request,
        // to `await` the `promiseWillStart` which we kicked off at the top of
        // this method to ensure that it runs to completion (which is part of
        // its contract) prior to processing the request.
        await promiseWillStart;
        return this.createGraphQLServerOptions(req, res);
      })(req, res);
    };