Update GraphiQL page to the latest version

[MattExact]

Description

Updated the GraphiQL page to use [email protected] (was previously using [email protected]).

This is necessary because older versions of GraphiQL have a Cross-site Scripting vulnerability (see snyk and the GraphiQL docs).

I have updated the file to be based upon the CDN example provided by the GraphiQL team.

I have made a couple of modifications to the file to bring in line with our current GraphiQL page:

• Using the GraphiQL provided fetcher with the subscriptions URL (dependent on if subscriptions are enabled for the integration)
• Added a CSRF token, which was a previous modification to the file made in this PR

There are a couple of changes to the interface due to the updated version, most notably the loss of the "Explorer". It may be possible to add this back in via the graphiql-explorer package.

Types of Changes

• [ ] Core
• [ ] Bugfix
• [ ] New feature
• [x] Enhancement/optimization
• [ ] Documentation

Issues Fixed or Closed by This PR

• Closes #1268

Checklist

• [x] My code follows the code style of this project.
• [ ] My change requires a change to the documentation.
• [ ] I have updated the documentation accordingly.
• [x] I have read the CONTRIBUTING document.
• [ ] I have added tests to cover my changes.
• [x] I have tested the changes and verified that they work and don't break anything (as well as I can manage).

[codecov[bot]]

Codecov Report

Merging #1889 (1565e78) into main (3201e3f) will decrease coverage by 0.00%. The diff coverage is 100.00%.

@@            Coverage Diff             @@
##             main    #1889      +/-   ##
==========================================
- Coverage   98.20%   98.19%   -0.01%     
==========================================
  Files         161      160       -1     
  Lines        6405     6379      -26     
  Branches     1205     1203       -2     
==========================================
- Hits         6290     6264      -26     
  Misses         58       58              
  Partials       57       57              

[botberry]

Thanks for adding the RELEASE.md file!

Here's a preview of the changelog:

---

This release updates the built-in GraphiQL version to version 2.0, which means you can now enjoy all the new features that come with the latest version!

---

Here's the preview release card for twitter:

Here's the tweet text:

🆕 Release (next) is out! We updated @GraphiQL to version 2.0!

Thanks to Matt for creating the original, @patrick91 for taking over and the whole @GraphiQL
team for releasing the new version of GraphiQL! ❤️

Get it here 👉 https://github.com/strawberry-graphql/strawberry/releases/tag/(next)

[MattExact]

I have now added in the GraphiQL Explorer using OneGraph's package (see here for repo and here for the example I based it off)

I'm ngl doing it with CDN based packages provided some limitations and challenges but I think I got it working pretty well 😅

See below for how it looks The styles aren't super clean, but this is actually the case for OneGraph's own implementation strangely enough https://www.onegraph.com/graphiql

PS: I seem to have broken Windows builds somehow with my file encoding 🙈

[patrick91]

@MattExact this seems to be slightly broken for me:

it doesn't get the field for the people field, is this something you can reproduce as well?

[patrick91]

@MattExact there's version 2 of GraphiQL coming out soon, maybe we can wait for that, I tried a pre-release on this PR and it seems to work:

it doesn't have the same explorer capabilities yet, but it is planned, there's even a prototype here: https://jonathanawesome.github.io/graphiql-v2-prototype/?mode=preview&story=reference--reference

[MattExact]

@patrick91 Apologies I forgot to reply to your previous comment, I was able to replicate your problem. However, I was unable to figure out a way to fix it, my guess is it's probably fixed by the parts of the GraphiQL explorer example that I was unable to replicate using CDN packages.

I would be inclined to wait for v2, and hopefully they have decent support for using GraphiQL with a CDN 🤞

[patrick91]

No worries! I'll update this PR with the beta so we have it ready for the release 😌

[ryou90]

Any news on this?

[patrick91]

we are still waiting for the release of GraphiQL v2 😊

[ryou90]

Is it not possible to use a preview version? It seems like it will be a while before there is a release or beta.

[patrick91]

Is it not possible to use a preview version? It seems like it will be a while before there is a release or beta.

I think the release should happen soon, see: https://discord.com/channels/625400653321076807/966768858402816020/1001946875093602476

I'd prefer to release an update with a stable version of GraphiQL 😊

[patrick91]

GraphiQL 2 has been released! I'll see if I can update this PR this week :) I need to figure out how to get the explorer working via the CDN version of GraphiQL.

Ref: https://github.com/graphql/graphiql/blob/main/examples/graphiql-explorer/src/App.tsx

[patrick91]

I think we'll be able to update when this PR is released 😊 https://github.com/graphql/graphiql/pull/2699

[patrick91]

seems there's a couple of small issues, as soon as they are fixed I'll merge this PR 😊

[patrick91]

also I need to reintroduce support for websockets 😊

[patrick91]

/pre-release

[botberry]

Pre-release

:wave:

Releasing commit [a43d9bfa02508960f528ea6bca959bf5897a54ae] to PyPi as pre-release! :package:

[botberry]

Pre-release

:wave:

Pre-release 0.127.0.dev.1661797666 [a43d9bfa02508960f528ea6bca959bf5897a54ae] has been released on PyPi! :rocket: You can try it by doing:

poetry add strawberry-graphql==0.127.0.dev.1661797666

[star2000]

The following CSS needs to be added to make the explorer scrollable and fully display the "Add new" below.

.doc-explorer-contents {
  overflow-y: hidden !important;
}

.docExplorerWrap {
  width: unset !important;
  min-width: unset !important;
}