feat: Add @graphiql/plugin-batch-request

[samuelAndalon]

Description

Hi all, this is Sam from Expedia Group, we recently added graphiql to graphql-kotlin with explorer and exporter plugin, at EG we heavily rely on batched requests from clients to GraphQL servers.

The graphiql@2 plugin API gave us an idea of a plugin that we really need, a way to create batched requests from an IDE, as currently playground, graphiql, insomina, postman offer that capabilty, forcing us to use raw http clients to make some requests for testing.

This PR that adds a batch-request plugin, relies on the editorContext to access to tabs and operations on each tab, then it presents the operations in a file tree format to have user to select which operations are going to be sent in a batch.

Please let us know your feedback and if this is indeed a candidate for a plugin.

Couple of notes:

1. The plugin scope is for sending multiple graphQL operations with two approaches aliasing and arrays (server requires to be configured for array inputs).
2. we could consider this PR as a continuation of this opened issue
3. we use react-checkbox-tree to present tabs and operations.
4. still need to work on the code-mirror graphql-results mode, as setting the batch response array in response editor causes some parsing issues.

Demo video:

https://user-images.githubusercontent.com/6611331/216736177-2d8d6153-b246-48ef-8e97-687beea6f9fc.mov

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: a3ed4f225505571839949f88d0a7552066c9fbc5

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[linux-foundation-easycla[bot]]

• :x: The commit (5b9e1a6db4c2c0bd186b04de52359aa86eea190a, 76402817b5c96f5f4f194c7703ef14a1255bbf62, 75cd66dd19933b40cd2f7c8d58301c87a65a25da, 04914b4e39a83f18da90072743142064c41e8bb7, d661a0ed6443cbf9c17a66de3e15fe82de6a2f7e, ef8cb3a712679a29b2f8434290f9a6bd557ac63b, e98c0160bc1e9d23dd50a5cff8b66c6dcef0093f, 72669a0c3e8a32f97e3354acb4c07cac96927383, fd044cf7293f9b6fb870a864c0f7925af190552a, eb9d98ebb3b57b5b56bec9d5bcf685fc5fbc07c7, 16653b2027da084cacb1b0afc1b9b335bbb232de, 4e224c77bce93c334b480e2678acc47c9a2fc7d2, fff1446b82f205249f96b589dd79c3791e12ca28, 379f95dd02e8b52dfd08835165791065033e217f, 009370fa4c4c88462761248c5b5a2a16378875b7, dbb1fdb1984e12838b38b18af2bcdf83f03f0d80, a3ed4f225505571839949f88d0a7552066c9fbc5). This user is missing the User's ID, preventing the EasyCLA check. Consult GitHub Help to resolve.For further assistance with EasyCLA, please submit a support request ticket.

[acao]

thanks for this PR! it seems this plugin uses some non-public module sources currently. do you have an NPM version of these packages available?

10:26:42 PM: error An unexpected error occurred: "https://artylab.expedia.biz/api/npm/public-npm-virtual/react-checkbox-tree/-/react-checkbox-tree-1.8.0.tgz: Request failed "403 Forbidden"".

[samuelAndalon]

Hi @acao yes, sorry! forgot to switch the npm registry, will apply the changes, along with some fixes regarding building the payload for the HTTP request. Also if needed we could add an option to batch using aliases as an alternative as described here https://the-guild.dev/graphql/tools/docs/batch-execution

will push registry changes along with other fixes.

[samuelAndalon]

@acao i just make the changes, also update the README.md

[samuelAndalon]

Hi all, an update here!, just added an option to also batch using aliases, took the batching algorithm from

https://github.com/ardatan/graphql-tools/blob/master/packages/batch-execute/src/mergeRequests.ts

[samuelAndalon]

Hi everyone, just circling back here, would it still make sense to have this plugin ? we are already using it but publishing it internally. We believe that this is something that could benefit the GraphQL community

[thomasheyenbrock]

Hey @samuelAndalon 👋 this plugin looks nothing short of awesome 😍 props for putting that together 👏

I do believe that this plugin is meaningful and probably delivers value also for other folks. I'm just not sure if this repo is the right place for it. A main motivator for introducing plugins was to enable folks to build and maintain their own things without us needing to build all feature requests first-class into GraphiQL. We do have some plugins (the explorer and code exporter) which are fairly general purpose and should also give an example of what you can build with the plugin API.

However, I do not think that all plugins should live in this repository. In particular, plugins that are opinionated or that focus on supporting GraphQL features that are not (yet) part of the latest spec version should not be maintained in this repo. This plugin doesn't match with that as batched requests are an extension of GraphQL that is not part of the spec. This is my personal opinion and we haven't aligned on this yet as maintainers, so I encourage other opinions here (cc @acao and @jonathanawesome, we could also discuss that in future working group sessions if desired).

I can definitely encourage you to publish this publicly on your end and share it with the community for now ⭐ that way you can share this with a broader audience until we figured out our strategy on which plugins should be maintained by us and which shouldn't.

[acao]

I think this is awesome!

But I would rather see @graphiql/toolkit createGraphiQLFetcher() introduce a plugin API to support this behavior than to create an alternate query execution mechanism.