Using GraphiQL with Foxx

Question

With NodeJS, there is graphQLHTTP from express-graphql which can be passed like the following:

  const {Schema} = require('./data/schema');
  const graphQLApp = express();
  graphQLApp.use('/', graphQLHTTP({
    graphiql: true,
    pretty: true,
    schema: Schema,
  }));

With that kind of configuration, we can use GraphiQL. How to achieve that with Foxx? From this repo, I could see that Foxx is using graphql-sync instead. I browsed the source code and I found it here:

controller.js

'use strict';
const Foxx = require('org/arangodb/foxx');
const schema = require('./schema');
const graphql = require('graphql-sync').graphql;
const formatError = require('graphql-sync').formatError;

const ctrl = new Foxx.Controller(applicationContext);

// This is a regular Foxx HTTP API endpoint.
ctrl.post('/graphql', function (req, res) {
  // By just passing the raw body string to graphql
  // we let the GraphQL library take care of making
  // sure the query is well-formed and valid.
  // Our HTTP API doesn't have to know anything about
  // GraphQL to handle it.
  const result = graphql(schema, req.rawBody(), null, req.parameters);
  console.log(req.parameters);
  if (result.errors) {
    res.status(400);
    res.json({
      errors: result.errors.map(function (error) {
        return formatError(error);
      })
    });
  } else {
    res.json(result);
  }
})
.summary('GraphQL endpoint')
.notes('GraphQL endpoint for the Star Wars GraphQL example.');

Is it possible to use GraphiQL with Foxx? If YES, how do I achieve that? Any thoughts?

Thanks.

Answer 1

You can use GraphiQL with any GraphQL API, even if it isn't built in to the server. You can run GraphiQL yourself in several different ways:

1. As a standalone app: https://github.com/skevy/graphiql-app
2. As a React component inside your application: https://github.com/graphql/graphiql

If you use it as a React component from npm (option 2), you can actually customize it with extra options, manipulate the requests it sends to the server, and more.