Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[graphiql] Plugin Examples / CDN integration broken #3617

Open
1 task done
chaffeqa opened this issue May 28, 2024 · 4 comments
Open
1 task done

[graphiql] Plugin Examples / CDN integration broken #3617

chaffeqa opened this issue May 28, 2024 · 4 comments
Labels
bug graphiql plugins

Comments

@chaffeqa
Copy link

Is there an existing issue for this?

  • 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?
@acao
Copy link
Member

acao commented May 28, 2024

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

@chaffeqa
Copy link
Author

chaffeqa commented May 29, 2024 •
edited
Loading

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>

@acao
Copy link
Member

acao commented May 29, 2024

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 😂!!

@chaffeqa
Copy link
Author

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug graphiql plugins
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@chaffeqa @acao