Graphql-ruby: Repackage GraphiQL for Ruby

[rmosolgo]

A long time ago, I made rmosolgo/graphiql-rails to use GraphiQL with Rails apps. I would like to repackage it as GraphQL::GraphiQL for a couple of reasons:

• One less repo to maintain and document
• Make it Rails-independent; package it as a Rack app instead (no Sprockets etc)
• Support subscriptions (eg https://github.com/rmosolgo/graphql-ruby/issues/1038#issuecomment-337508203)
• Consider graphiql-workspace instead of GraphiQL

[jvanbaarsen]

@rmosolgo Is this something you want outside contributors to work on?

[rmosolgo]

That would be great! Happy to help out in some way if I can, too. I just opened the issue to see if anyone was interested ... and if anyone was interested enough to _do it_ :P

[jvanbaarsen]

@rmosolgo nice! I think I'll start with a very rough concept PR. From there we can look at what tests we want to include, and where I'm forgetting things. Does that sound ok?

[rmosolgo]

Sounds great!

[casiodk]

Support subscriptions 👍

[daemonsy]

Hi, dredging up a very old issue 😸

I made a PoC attempt to load GraphQL Playground directly as a very simple rack app.

https://github.com/rmosolgo/graphql-ruby/pull/2382

The hope is to get it to a point that most people starting with graphql-ruby can easily mount a dev only playground that has some default auth setup.

It's one of the toughest hurdle in GraphQL adoption among devs.

"Now I got the rails server running, what do I do next to explore this new API?"

[connorshea]

This'd be great. GraphiQL has been receiving pretty regular updates lately. I've been considering trying to turn graphiql-rails into a Rails Engine that uses Webpacker, but this'd be much better.

I'd rather not swap GraphiQL out for GraphQL Playground if we don't have to.

[ro-savage]

@rmosolgo - Any update on this? We recently upgraded to rails 6.0.2 and now GraphiQL has broken before of #2550

[butsjoh]

We managed to get a graphiql running with actioncable for subscriptions compatibility using https://github.com/prisma-labs/graphql-playground. We will eventually publish a package for this but we currently do not have a lot of time to do the grunt work for it now but here are the main outlines of what we did to get it to work:

1) use create react app to bootstrap a react app easily

2) added the necessary packages (did not check so could be missing some)

 yarn add graphql-playground-react react-redux
yarn add actioncable
yarn add graphql-ruby-client
yarn add apollo-cache-inmemory
yarn add apollo-client

3) modify the client so that it is actioncable compatible (similar to what is in https://github.com/rmosolgo/graphql-ruby/blob/ce9a36941517591fbfd94b26f4171718f3a639ca/guides/javascript_client/apollo_subscriptions.md#apollo-2----actioncable)

in index.js (create by create react app)

import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import { Playground, store } from 'graphql-playground-react'
import { ApolloLink } from 'apollo-link'
import { ApolloClient } from 'apollo-client'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { HttpLink } from 'apollo-link-http'
import ActionCable from 'actioncable'
import { ActionCableLink } from 'graphql-ruby-client'
import './index.css'

const createLinkWithActionCableSubscription = (graphEndpointUrl) => {
  const hasSubscriptionOperation = ({ query: { definitions } }) => {
    return definitions.some(
      ({ kind, operation }) => kind === 'OperationDefinition' && operation === 'subscription'
    )
  }

  return ApolloLink.split(
    hasSubscriptionOperation,
    new ActionCableLink({
      cable: ActionCable.createConsumer(process.env.REACT_APP_WEBSOCKET_ENDPOINT) }),
    new HttpLink({
      uri: graphEndpointUrl,
      credentials: 'include'
    })
  );
}

const client = new ApolloClient({
  link: createLinkWithActionCableSubscription(process.env.REACT_APP_GRAPH_ENDPOINT),
  cache: new InMemoryCache()
})

const settings = {
  'editor.theme': 'light'
}

const rootElement = document.getElementById('root')
ReactDOM.render(
  <React.StrictMode >
    <Provider store = {store}>
      <Playground createApolloLink={(options) => { return client }} settings={settings} />
    </Provider>
  </React.StrictMode>,
  rootElement
)

4) make sure you pass in the env variables for you graph endpoint and websocket endpoint (REACT_APP_GRAPH_ENDPOINT and REACT_APP_WEBSOCKET_ENDPOINT) or replace them directly in the above file and run yarn start

*) You also need to make sure that setup the correct CORS headers on you graph endpoint so that it will allow you graphql playground to access the graph. When using nginx you could do the following:

...
location / {
        if ($request_method = OPTIONS) {
            add_header 'Content-Length' 0;
            add_header 'Content-Type' 'text/plain; charset=utf-8';
            add_header 'Access-Control-Allow-Origin' "http://YOUR_LOCAL_GRAPHQL_PLAYGROUND_URL";
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept';
            add_header 'Access-Control-Allow-Credentials' 'true';
            return 204;
        }

        if ($request_method = 'POST') {
            add_header 'Access-Control-Allow-Origin' "https://YOUR_LOCAL_GRAPHQL_PLAYGROUND_URL";
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept';
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
        }
}
...