Closed helios1138 closed 3 years ago
@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.
@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} />
}
}
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?
no, in my case all the parents of the wrapper already had 100% height
+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
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.
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
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?
@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.
we have a create-react-app
example now that works fine.
@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.
if you end up coming across this issue, it's probably because of this, or because you just need to style the css properly. please see our examples or the graphiql/packages/readme
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 usingreact-helmet
to put a style<link>
dynamically, manually doing stuff likedocument.head.insertBefore()
in wrapper'scomponentDidMount()
- nothing works.It does work, however, if I put CDN link to
graphiql.css
directly topublic/index.html
which seems like a hack right now