graphiql icon indicating copy to clipboard operation
graphiql copied to clipboard

Published 20 hours ago • verified publisher icon graphql

[graphiql] Plugin Examples / CDN integration broken

Open chaffeqa opened this issue 1 year ago • 4 comments

Is there an existing issue for this?

  • [X] I have searched the existing issues

Current Behavior

When I try to use the CDN approach for any of the plugins, I run into the following issues:

  1. Repo samples are broken
  2. Unpkg versions are not fully published (3.0.1 loads, but not 3.0.3: https://unpkg.com/browse/[email protected] https://unpkg.com/browse/[email protected])
  3. 3.0.1 errors out due to incompatible runtime bundling:

<!DOCTYPE html>
<html>
<head>
<title>Sample - GraphiQL</title>
<link href="https://unpkg.com/graphiql/graphiql.min.css" rel="stylesheet" />
<link href="https://unpkg.com/@graphiql/plugin-code-exporter/dist/style.css" rel="stylesheet" />
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script crossorigin src="https://unpkg.com/graphiql/graphiql.min.js"></script>
<script crossorigin src="https://unpkg.com/@graphiql/[email protected]"></script>
</head>
</html>

Expected Behavior

Working example files in the plugins

Steps To Reproduce

No response

Environment

  • GraphiQL Version:
  • OS:
  • Browser:
  • Bundler:
  • react Version:
  • graphql Version:

Anything else?

Guessing this may just simply be that 3.0.3 is not published to the CDN?

chaffeqa avatar May 28 '24 14:05 chaffeqa

2 & 3 will need to be fixed with peer versions I'm afraid, as the graphiql-code-exporter itself is third party, our module is @graphiql/plugin-code-exporter and implements this library

acao avatar May 28 '24 20:05 acao

Ah figured it out: So the example is referencing a UMD compiled version (which bundles in graphiql-code-exporter, hence why I was confused).

The issue is: it looks like the Babel regenerator-runtime is no longer included in any of the other previous scripts (react, react-dom, graphiql). Simply adding the script import fixes the issue:

<!DOCTYPE html>
<html>
<head>
<title>Sample - GraphiQL</title>
<link href="https://unpkg.com/graphiql/graphiql.min.css" rel="stylesheet" />
<link href="https://unpkg.com/@graphiql/plugin-code-exporter/dist/style.css" rel="stylesheet" />
<script crossorigin src="https://unpkg.com/[email protected]/runtime.js"></script>
<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/graphiql/graphiql.min.js"></script>
<script crossorigin src="https://unpkg.com/@graphiql/plugin-code-exporter/dist/index.umd.js"></script>
</head>
</html>

chaffeqa avatar May 29 '24 14:05 chaffeqa

fantastic! i forget why we hadn't removed that long ago, what an artefact 😂 we need to have some script type module examples as well, it's 2024 c'mon 😂!!

acao avatar May 29 '24 21:05 acao

Ok been diving even deeper now that I have this working:

  • OneGraph got acquired by Netlify, and it looks like has abandoned their plugin
  • this repo was forked from it, and looks to be the most up to date. I have a hunch it's owned by StepZen, however it hasn't been updated since Jul 29, 2023

I believe it would be in the communities best intirest to figure out how to move forward with this plugin. Maybe ask @mtrythall (who was the last committer) what their use is, whether that repo should be the community standard, or if it should be merged into this mono-repo?

chaffeqa avatar May 30 '24 12:05 chaffeqa

UMD CDN builds are deprecated, use ESM-based CDN instead, check out the migration guide for more info.

dimaMachina avatar May 03 '25 09:05 dimaMachina