graphql
[graphiql] Playground doesn't work
Is there an existing issue for this?
- [x] I have searched the existing issues
Current Behavior
Hello,
With the latest commit, playground doesn't work anymore with spring-boot-starter-graphql-3.4.x
Expected Behavior
No response
Steps To Reproduce
No response
Environment
- GraphiQL Version:
- OS:
- Browser:
- Bundler:
reactVersion:graphqlVersion:
Anything else?
No response
The new GraphiQL just released, you should either pin to v4 or update to ne esm based cdn https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-5.0.0.md
The new GraphiQL just released, you should either pin to v4 or update to ne esm based cdn https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-5.0.0.md
Actually I can't choose any version. I am using the file inside spring-boot-starter-graphql-3.4.5. I think I will wait for these.
Feel free to ping your repository maintainers to update graphiql UMD link, to point to v4
-https://unpkg.com/graphiql/dist/index.umd.js
+https://unpkg.com/[email protected]/dist/index.umd.js
Alternatively you can suggest them to use ESM based CDN with new GraphiQL 5, see official example
Feel free to ping your repository maintainers to update graphiql UMD link, to point to v4
-https://unpkg.com/graphiql/dist/index.umd.js +https://unpkg.com/[email protected]/dist/index.umd.js Alternatively you can suggest them to use ESM based CDN with new GraphiQL 5, see official example
We are repointing to https://unpkg.com/[email protected]/dist/index.umd.js since we are not yet ready to ugrade to v5. Will that [email protected] UMD continue to be available in the foreseeable future?
You can find the solution to this. #https://github.com/graphql/graphiql/issues/4033#issuecomment-3001804909
is getting a 404 from https://unpkg.com/graphiql/graphiql.min.js the same problem
What I did was a workaround to fix this issue (until spring-boot-starter-graphql updates their side) I manually provided a local version of the Graphiql by serving it as a static file:
1 - Create the folder structure src/main/resources/static/graphiql 2 - Create an index.html file with this content :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>GraphiQL</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/graphiql.min.css" />
</head>
<body style="margin: 0;">
<div id="graphiql" style="height: 100vh;"></div>
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script crossorigin src="https://unpkg.com/[email protected]/graphiql.min.js"></script>
<script>
const graphQLFetcher = (graphQLParams, options) => {
const headers = options?.headers || {};
return fetch('/graphql', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
...headers
},
body: JSON.stringify(graphQLParams),
}).then(response => response.json());
};
ReactDOM.render(
React.createElement(GraphiQL, {
fetcher: graphQLFetcher,
headersEditorEnabled: true
}),
document.getElementById('graphiql'),
);
</script>
</body>
</html>
You can change the version of [email protected] as needed.
3- Call it on: http://localhost:8080/graphiql/index.html
I upgraded spring boot to 3.5.3 and it is working, but be careful if you do that, some dependancies might be broken, especially if you use spring cloud, I spent some time resolving it.
The Live demo at https://graphql.github.io/swapi-graphql/ , e.g. as linked from https://github.com/graphql/graphiql/blob/main/README.md#graphiql and https://github.com/graphql/graphiql/blob/main/packages/graphiql/README.md#graphiql , fails with errors such as:
We have the same issue. This is breaking production env, please find a solution for this to work or revert!
We have the same issue. This is breaking production env, please find a solution for this to work or revert!
pin your UMD CDN graphiql version to v4, or use ESM based CDN https://github.com/graphql/graphiql/tree/main/examples/graphiql-cdn for graphiql v5