Banana Cake Pop Server Adapter Plugin

Server Adapter Plugin for Banana Cake Pop GraphQL IDE

Description

This plugin allows to setup Banana Cake Pop GraphQL IDE for your GraphQL Yoga server or any other server that implements the Server Adapter (see @whatwg-node).

You can use a cdn hosted version of the app or a self hosted version using the ad hoc package.

Installation

Install this package and the required peerDependencies in your project:

1npm install @chillicream/bananacakepop-server-adapter-plugin --save-dev
2# or
3yarn add @chillicream/bananacakepop-server-adapter-plugin --dev
4# or
5pnpm add @chillicream/bananacakepop-server-adapter-plugin --save-dev

Note: @chillicream/bananacakepop-graphql-ide is optional and only needed if you prefer to self host the app.

Usage

Add the plugin to your server.

1import { useBananaCakePop } from "@chillicream/bananacakepop-server-adapter-plugin";
2import { createYoga } from "graphql-yoga";
3import { createServer } from "node:http";
4
5const yoga = createYoga({
6  schema: // Schema omitted for brevity,
7  plugins: [useBananaCakePop()], // Adds Banana Cake Pop
8  graphiql: false, // Disables the default GraphQL IDE
9});
10
11const server = createServer(yoga);
12
13server.listen(3000, () => {
14  console.log("Running a GraphQL API server at http://localhost:3000/graphql");
15});

Extended configuration

• To pin a specific version instead of using "latest":

  1useBananaCakePop({
  2  mode: "cdn",
  3  target: { version: "x.0.0" },
  4});

• To use your own infrastructure:

  1useBananaCakePop({
  2  mode: "cdn",
  3  target: "https://mycompany.com/bcp",
  4});

Custom options

• To pass options supported by Banana Cake Pop GraphQL IDE:

  1useBananaCakePop({
  2  mode: "cdn",
  3  options: {
  4    title: "BCP",
  5  },
  6});

Recipes

1import { useBananaCakePop } from "@chillicream/bananacakepop-server-adapter-plugin";
2import { createYoga } from "graphql-yoga";
3import { createServer } from "node:http";
4
5const yoga = createYoga({
6  schema: createSchema({
7    typeDefs: /* GraphQL */ `
8      type Query {
9        greeting: String
10      }
11    `,
12    resolvers: {
13      Query: {
14        greeting: () => "Hello, World!",
15      },
16    },
17  }),
18  plugins: [useBananaCakePop()], // Adds Banana Cake Pop
19  graphiql: false, // Disables the default GraphQL IDE
20});
21
22const server = createServer(yoga);
23
24server.listen(3000, () => {
25  console.log("Running a GraphQL API server at http://localhost:3000/graphql");
26});

1import { useBananaCakePop } from "@chillicream/bananacakepop-server-adapter-plugin";
2import { createYoga, createSchema } from "graphql-yoga";
3import { createServer } from "node:http";
4import { getSchema } from "./schema"; // Will be generated by Grats
5
6/** @gqlType */
7type Query = unknown;
8
9/** @gqlField */
10export function hello(_: Query): string {
11  return "Hello world!";
12}
13
14const yoga = createYoga({
15  schema: getSchema(),
16  plugins: [useBananaCakePop()], // Adds Banana Cake Pop
17  graphiql: false, // Disables the default GraphQL IDE
18});
19
20const server = createServer(yoga);
21
22server.listen(3000, () => {
23  console.log("Running a GraphQL API server at http://localhost:3000/graphql");
24});