feat: add Altair IDE

Author: nodkz

index.js

@@ -4,6 +4,7 @@ import express from 'express';
 import cors from 'cors';
 import graphqlHTTP from 'express-graphql';
 import expressPlayground from 'graphql-playground-middleware-express';
+import { altairExpress } from 'altair-express-middleware';
 import { mainPage, addToMainPage } from './mainPage';
 import { expressPort, getExampleNames, resolveExamplePath } from './config';
 import './mongooseConnection';
@@ -29,22 +30,23 @@ server.get('/', (req, res) => {
 });
 
 server.listen(expressPort, () => {
-  console.log(`The server is running at http://localhost:${expressPort}/`);
+  console.log(`🚀🚀🚀 The server is running at http://localhost:${expressPort}/`);
 });
 
 function addExample(example, uri) {
   example.uri = `/${uri}`; // eslint-disable-line
   server.use(
     example.uri,
-    graphqlHTTP(() => ({
+    (graphqlHTTP(() => ({
       schema: example.schema,
       graphiql: true,
-      customFormatErrorFn: error => ({
+      customFormatErrorFn: (error) => ({
         message: error.message,
         stack: !error.message.match(/for security reason/i) ? error.stack.split('\n') : null,
       }),
-    }))
+    })): any)
   );
   server.get(`${example.uri}-playground`, expressPlayground({ endpoint: example.uri }));
+  server.use(`${example.uri}-altair`, altairExpress({ endpointURL: example.uri }));
   addToMainPage(example);
 }

mainPage.js

@@ -9,14 +9,12 @@ export function addToMainPage(example: any) {
 }
 
 function renderExamplesLinks() {
-  const examplesHtml = examplesMeta.map(meta => {
+  const examplesHtml = examplesMeta.map((meta) => {
     const titleHtml = `<h4>
       ${meta.title}
       ${
         meta.github
-          ? `<small><a href="${
-              meta.github
-            }" target="_blank">GitHub <span class="glyphicon glyphicon-new-window"></span></a></small>`
+          ? `<small><a href="${meta.github}" target="_blank">GitHub <span class="glyphicon glyphicon-new-window"></span></a></small>`
           : ''
       }
     </h4>`;
@@ -26,15 +24,16 @@ function renderExamplesLinks() {
       descriptionHtml = `<p>${meta.description}</p>`;
     }
 
-    const queries = meta.queries.map(queryData => {
+    const queries = meta.queries.map((queryData) => {
       return `<b><a href="${meta.uri}/?query=${qs.escape(queryData.query)}" target="_blank">${
         queryData.title
       }</a></b>`;
     });
     queries.push(
-      `<b><a href="${
-        meta.uri
-      }-playground" target="_blank">GraphQL Playground</a> (improved GraphiQL IDE)</b>`
+      `<b><a href="${meta.uri}-playground" target="_blank">GraphQL Playground</a> (improved GraphiQL IDE)</b>`
+    );
+    queries.push(
+      `<b><a href="${meta.uri}-altair" target="_blank">Altair</a> (improved GraphiQL IDE)</b>`
     );
     const queriesHtml = `<ul><li>${queries.join('</li><li>')}</li></ul>`;
 

package.json

@@ -34,14 +34,7 @@
     "@babel/plugin-transform-flow-strip-types": "7.8.3",
     "@babel/preset-env": "7.8.4",
     "@babel/preset-flow": "7.8.3",
-    "@babel/cli": "7.5.0",
-    "@babel/core": "7.5.4",
-    "@babel/node": "7.5.0",
-    "@babel/plugin-proposal-object-rest-spread": "7.5.4",
-    "@babel/plugin-transform-flow-strip-types": "7.4.4",
-    "@babel/preset-env": "7.5.4",
-    "@babel/preset-flow": "7.0.0",
-    "aws-sdk": "2.490.0",
+    "altair-express-middleware": "^2.4.3",
     "aws-sdk": "2.614.0",
     "cors": "2.8.5",
     "elasticsearch": "16.6.0",