How to integrate GraphiQL inside a relay sample application

In order to facilitate the exploration of the Relay samples apps, we’ll show how to integrate the GraphiQL in browser IDE in those samples

With our newly acquired semi-familiarity with GraphQL, it may be interesting to revisit Relay.

The Relay library comes with the sempiternal Todo MVCexample.

This application is great for experimentation because it is has a simple model and UI but with interesting mutations.

Side note:

The problem with a cutting edge API like GraphQL and relay is that it is very much in flux and can be broken… that’s what happened to me earlier this week (issue) but the problem was fixed promptly.

GraphQL for relay

The relay layer is about bringing GraphQL into a react application and it defines:

GraphiQL can show us what it means to build a Relay ready GraphQL backend.

integration of GraphiQL in the TodoMVC relay sample application.

In a previous post we saw how to embed GraphiQL inside a GraphQL server - time use that knowledge.

The TodoMVC server has 2 components :

We want to inject a GraphiQL on the port 8080.

This is a 2 steps process:

Add a static middleware in line 2 like here:

var graphQLServer = express();
graphQLServer.use(express.static(path.resolve(__dirname, 'public')));
graphQLServer.use('/', graphQLHTTP({schema, pretty: true}));
graphQLServer.listen(GRAPHQL_PORT, () => console.log(
  `GraphQL Server is now running on http://localhost:${GRAPHQL_PORT}`
));

You need to rename the index.html into ql.html to avoid a conflict with the application index.html file.

The files to be added are then: ql.html , graphiql.css and graphiql.min.js

Once it is done, you know have a way to query the relay/graphql server at: http://127.0.0.1:3000/ql.html

GraphQL query GraphQL response
{
  __schema {
    mutationType {
      fields {
        name
      }
    }
  }
}
{
  "data": {
    "__schema": {
      "mutationType": {
        "fields": [
          {
            "name": "addTodo"
          },
          {
            "name": "changeTodoStatus"
          },
          {
            "name": "markAllTodos"
          },
          {
            "name": "removeCompletedTodos"
          },
          {
            "name": "removeTodo"
          },
          {
            "name": "renameTodo"
          }
        ]
      }
    }
  }
}