How to use @apollographql/graphql-playground-html - 9 common examples
To help you get started, we’ve selected a few @apollographql/graphql-playground-html examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
terascope / teraslice / packages / data-access-plugin / src / dynamic-server / index.ts View on Github 
// 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;
}
}
/* Not necessary, but removing to ensure schema built on the request */
// tslint:disable-next-line
const { schema, ...serverObj } = this;
/**
* This is the main reason to extend, to access graphqlExpress(),
* to be able to modify the schema based on the request
* It binds to our new object, since the parent accesses the schema
* from this.schema etc.
*/// schemaPath: "schema.graphql",
// extensions: {
// endpoints: {
// dev: {
// url: `${this.config.prefix || ''}/graphql`,
// headers: {
// Authorization: `Bearer ${ctx.auth.token}`
// }
// }
// }
// }
// },
...custom
});
if (options.tabs) options.tabs.forEach(tab => tab.endpoint = options.endpoint);
return renderPlaygroundPage(options || options);
}// 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);
}),
);app.get(graphiqlPath, (req, res) => {
const tab = { endpoint };
if (req.query && req.query.query) {
tab.query = req.query.query;
tab.variables = req.query.variables;
}
res.setHeader('Content-Type', 'text/html');
res.write(
renderPlaygroundPage({
endpoint,
version: playgroundPkg.version,
tabs: [tab],
settings: { 'request.credentials': 'same-origin' },
})
);
res.end();
});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',
...requestCorsHeadersObject,
},
});
}
}
const callbackFilter: APIGatewayProxyCallback = (error, result) => {
callback(
error,
result && {
...result,
headers: {
...result.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),
});handleGraphqlRequestsWithPlayground({ req, res, }) {
let handled = false;
if (this.playgroundOptions && req.method === "GET") {
const { mediaTypes } = accept.parseAll(req.headers);
const prefersHTML = mediaTypes.find((x) => x === "text/html" || x === "application/json") === "text/html";
if (prefersHTML) {
const middlewareOptions = Object.assign({ endpoint: this.graphqlPath, subscriptionEndpoint: this.subscriptionsPath }, this.playgroundOptions);
send(res, 200, renderPlaygroundPage(middlewareOptions), "text/html");
handled = true;
}
}
return handled;
}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.url || '/';
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?: HttpResponse) => {
context.done(
error,
output && {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();
},
];@apollographql/graphql-playground-html
GraphQL IDE for better development workflows (GraphQL Subscriptions, interactive docs & collaboration).
