GraphiQL Flashes to a white screen when ENABLE_GATSBY_REFRESH_ENDPOINT is used

Support
1

We recently upgraded our code base from Gatsby v4 to v5 using the following Documentation. After the upgrade we noticed that GraphiQL no longer worked, it would quickly load and then flash to a white screen. All other pages load correctly.

After some debugging, we found that the environmental variable ENABLE_GATSBY_REFRESH_ENDPOINT was the culprit, and removing this from the the Package.json develop call made it so that we could loaf GraphiQL correctly. This call previously worked on Gatsby v4 with no issues.

 "develop": "ENABLE_GATSBY_REFRESH_ENDPOINT=true gatsby develop --verbose" ,

We also saw that some articles were using cross-env in front of the env var, but this returned the same result. As well as using it in the .env.development file as well (.env file gets loaded into config as shown in the docs).

There are no errors in the cli reported while running and encountering this issue.

With a clean version of Gatsby v5 we can run with the the ENABLE_GATSBY_REFRESH_ENDPOINT var in the develop command. However, when it exist in the .env.develop, and the .env file is called into the config we get the flash to the white screen on GraphiQL.

2

This is a bug in the dependency and you might want to pin it to this version: create-contentful-gatsby/package.json at main · hrishikesh-k/create-contentful-gatsby (github.com)

3

Thank you for the quick response. I have tested with the solution provided above of specifying the dependency verstion of :

"gatsby-graphiql-explorer": "3.11.0",

However, after removing all node_modules and reinstalling and running gatsby develop I am still receving the same results of GrapiQL flashing to a white screen when specifying ENABLE_GATSBY_REFRESH_ENDPOINT.

4

Have you checked this: GraphiQL White Screen of Death on Gatsby V5.11.0 · Issue #38634 · gatsbyjs/gatsby (github.com)

5

I’ve read through this article, and I have tried multiple combinations of specifying versions for older versions. However, like some of the individuals here I get the issue as long as I use a TRUE value for ENABLE_GATSBY_REFRESH_ENDPOINT. However, I need to be able to set this item to true.

6

Yes, but that says it’s a Gatsby issue, not something Netlify can help you fix. Feel free to comment in that issue.

7

Thank you for your help. I will try to continue to figure this out.