Graphiql: editor is broken when used in create-react-app

[helios1138]

I'm trying to embed the GraphiQL inside existing app. Whole thing looks styled correctly, but the query editor section itself is not responding at all: it's gray, there's no cursor, no content and it doesn't react to input.

I've tried import 'graphiql/graphiql.css', tried using react-helmet to put a style <link> dynamically, manually doing stuff like document.head.insertBefore() in wrapper's componentDidMount() - nothing works.

It does work, however, if I put CDN link to graphiql.css directly to public/index.html which seems like a hack right now

[asiandrummer]

@helios1138 I think this is because the css file needs to be loaded before GraphiQL component becomes mounted - how did you try embedding GraphiQL without including the stylesheet in index.html? I'd say loading a GraphiQL stylesheet before running rendering JavaScript code would be the recommended way, but am curious how you did it initially.

[helios1138]

@asiandrummer well, my goal was to embed the GraphiQL into an existing app (I'm using create-react-app), so I created a simple wrapper component like this

import 'graphiql/graphiql.css' // this was supposed to work, currently removed
                               // and styles instead are loaded in index.html from CDN

import React from 'react'
import { connect } from 'react-redux'
import GraphiQL from 'graphiql'
import fetch from 'isomorphic-fetch'

@connect(state => ({ token: state.auth.token }))
export class GraphiQLWrapper extends React.Component {
  request = async params => {
    const response = await fetch(`${process.env.REACT_APP_API_URL}/graphql`, {
      method: 'post',
      headers: {
        'Content-Type': 'application/json',
        'Token': this.props.token
      },
      body: JSON.stringify(params),
    })

    return response.json()
  }

  render () {
    return <GraphiQL fetcher={this.request} />
  }
}

[asiandrummer]

Also, from #462 someone also had this issue until the parent div's height was set to 100%:

.App {
  height: 100vh;
}

Would this fix the issue?

[helios1138]

no, in my case all the parents of the wrapper already had 100% height

[hassankhan]

+1 running into the same issue, thought it was something I was doing wrong.

EDIT: It's still broken even when using a CSS file from a CDN like cdnjs

[sbrigham]

I changed the container the react was mounting to from a div to a span and it fixed my css issues. It looks like there is an issue when .graphql-container is surrounded by a container that is display: block.

[enricribas]

This still appears broken, it used to work for me and then one day, the css menus stopped working

It still works for some people at my company but not for others.
The open class is added to elements when clicked, but nothing opens.

PS, cleared cache, tried Firefox, Chrome and Opera

Also this online version is broken for me in the same way
http://toolbox.sangria-graphql.org/graphiql
Try clicking the add headers

Perhaps always pulling in the latest bootstrap is not the best idea? ;)

Nevermind, sorry, issue is with absinthe_plug I think

[RavinderSinghMaan]

This issue still seems to be there. It works if I include link to CDN as suggested by @helios1138 but was wondering if there is better way to do it?

[acao]

@enricribas that appears to be a customized instance of graphiql, the form for editing headers is not part of this codebase

this is a very real bug, and I've seen it in some cases. there could be numerous issues, but I think #770 might be a duplicate of some of these cases. for anyone still having this issue, please try running a simple command in your browser console:
g.refresh()
the GraphiQL component attaches window.g = this on componentDidMount and GraphiQL component has a method called refresh() that invokes CodeMirror.editor.refresh() on all of the editors.

if this fixes anyone's rendering issues, then it confirms that you might actually be seeing a race condition on loading of Codemirror modules, as described in #770 in more detail.