Express middleware for Banana Cake Pop GraphQL IDE
This middleware allows to setup Banana Cake Pop GraphQL IDE for your GraphQL server.
You can use a cdn hosted version of the app or a self hosted version using the ad hoc package.
Install this package and the required peerDependencies in your project:
npm install @chillicream/bananacakepop-express-middleware --save-dev
# or
yarn add @chillicream/bananacakepop-express-middleware --dev
# or
pnpm add @chillicream/bananacakepop-express-middleware --save-devNote: @chillicream/bananacakepop-graphql-ide is optional and only needed if you prefer to self host the app.
Add the middleware to your app.
import express from "express";
import bcpMiddleware from "@chillicream/bananacakepop-express-middleware";
// ...
const app = express();
app.use(
"/graphql",
// for `cdn` hosted version
bcpMiddleware({ mode: "cdn" })
// for `self` hosted version
// bcpMiddleware({ mode: "self" }),
// place here your graphql middleware and others
);
app.listen(3000, () => {
console.log(`GraphQL on http://localhost:3000/graphql`);
});-
To pin a specific version instead of using "latest":
bcpMiddleware({ mode: "cdn", target: { version: "3.0.0" }, });
-
To use your own infrastructure:
bcpMiddleware({ mode: "cdn", target: "https://mycompany.com/bcp", });
-
To pass
optionssupported by Banana Cake Pop GraphQL IDE:bcpMiddleware({ mode: "cdn", options: { title: "BCP", }, });
🔗 With graphql-http
import express from "express";
import { createHandler } from "graphql-http";
import { GraphQLObjectType, GraphQLSchema, GraphQLString } from "graphql";
import bcpMiddleware from "@chillicream/bananacakepop-express-middleware";
const schema = new GraphQLSchema({
query: new GraphQLObjectType({
name: "Query",
fields: {
greeting: {
type: GraphQLString,
resolve(_parent, _args) {
return "Hello, World!";
},
},
},
}),
});
const app = express();
const handler = createHandler({ schema });
app.use(
"/graphql",
// for `cdn` hosted version
bcpMiddleware({ mode: "cdn" }),
// for `self` hosted version
// bcpMiddleware({ mode: "self" }),
async (req, res) => {
try {
const [body, init] = await handler({
url: req.url,
method: req.method,
headers: req.headers,
body: () =>
new Promise((resolve) => {
let body = "";
req.on("data", (chunk) => (body += chunk));
req.on("end", () => resolve(body));
}),
raw: req,
});
res.writeHead(init.status, init.statusText, init.headers).end(body);
} catch (err) {
res.writeHead(500).end(err.message);
}
}
);
app.listen(3000, () => {
console.log(`GraphQL on http://localhost:3000/graphql`);
});🔗 With graphql-yoga
import express from "express";
import { createYoga, createSchema } from "graphql-yoga";
import bcpMiddleware from "@chillicream/bananacakepop-express-middleware";
const graphQLServer = createYoga({
schema: createSchema({
typeDefs: /* GraphQL */ `
type Query {
greeting: String
}
`,
resolvers: {
Query: {
greeting: () => "Hello, World!",
},
},
}),
logging: false,
});
const app = express();
app.use(
"/graphql",
// for `cdn` hosted version
bcpMiddleware({ mode: "cdn" }),
// for `self` hosted version
// bcpMiddleware({ mode: "self" }),
graphQLServer
);
app.listen(3000, () => {
console.log(`GraphQL on http://localhost:3000/graphql`);
});🔗 With express-graphql
import express from "express";
import { graphqlHTTP } from "express-graphql";
import { GraphQLObjectType, GraphQLSchema, GraphQLString } from "graphql";
import bcpMiddleware from "@chillicream/bananacakepop-express-middleware";
const schema = new GraphQLSchema({
query: new GraphQLObjectType({
name: "Query",
fields: {
greeting: {
type: GraphQLString,
resolve(_parent, _args) {
return "Hello, World!";
},
},
},
}),
});
const app = express();
app.use(
"/graphql",
// for `cdn` hosted version
bcpMiddleware({ mode: "cdn" }),
// for `self` hosted version
// bcpMiddleware({ mode: "self" }),
graphqlHTTP({
schema,
graphiql: false,
})
);
app.listen(3000, () => {
console.log(`GraphQL on http://localhost:3000/graphql`);
});🔗 With apollo-server-
import { ApolloServer } from "@apollo/server";
import { expressMiddleware } from "@apollo/server/express4";
import { ApolloServerPluginDrainHttpServer } from "@apollo/server/plugin/drainHttpServer";
import express from "express";
import http from "http";
import cors from "cors";
import bodyParser from "body-parser";
import bcpMiddleware from "@chillicream/bananacakepop-express-middleware";
const typeDefs = `#graphql
type Query {
greeting: String
}
`;
const resolvers = {
Query: {
greeting: () => "Hello, World!",
},
};
const app = express();
const httpServer = http.createServer(app);
const server = new ApolloServer({
typeDefs,
resolvers,
plugins: [ApolloServerPluginDrainHttpServer({ httpServer })],
});
await server.start();
app.use(
"/graphql",
// for `cdn` hosted version
bcpMiddleware({ mode: "cdn" }),
// for `self` hosted version
// bcpMiddleware({ mode: "self" }),
cors(),
bodyParser.json(),
expressMiddleware(server, {
context: async ({ req }) => ({ token: req.headers.token }),
})
);
httpServer.listen({ port: 3000 }, () => {
console.log(`GraphQL on http://localhost:3000/graphql`);
});