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';
        }
}
...

[alxx]

Trying to test subscriptions with GraphiQL and a Rails backend I got this error message:

This GraphQL Subscription client does not support the transport protocol expectedby the backend Subscription Server implementation (graphql-ruby ActionCableSubscriptions in this case).Some official client implementation including Apollo (https://graphql-ruby.org/javascript_client/apollo_subscriptions.html), Relay Modern (https://graphql-ruby.org/javascript_client/relay_subscriptions.html#actioncable).GraphiQL via graphiql-rails may not work out of box (#1051).

Could someone please clean it up so that it makes grammatical sense? The second sentence has no verb and the reader has no idea why those two implementations are mentioned.

Also, an actual solution to the issue would be nice. :)

[rmosolgo]

I don't have anything else planned for this, so I'm going to close it.

• graphiql-rails still works fine for a basic Rails setup (I just installed it on the latest Rails and it worked fine for me...)
• For setups with fancier JavaScript pipelines or need for customization, installing GraphiQL from NPM is a better choice
• As for defer and subscriptions, I recently implemented some bridge code for those:
  • https://graphql-ruby.org/defer/graphiql.html
  • https://graphql-ruby.org/javascript_client/graphiql_subscriptions.html