feat: add AsyncIterable support to fetcher function

[n1ru4l]

No description provided.

[codecov]

Codecov Report

Merging #1724 (2156060) into main (0c5785c) will decrease coverage by 0.30%.
The diff coverage is 32.50%.

@@            Coverage Diff             @@
##             main    #1724      +/-   ##
==========================================
- Coverage   67.07%   66.77%   -0.31%     
==========================================
  Files          87       87              
  Lines        4839     4873      +34     
  Branches     1330     1343      +13     
==========================================
+ Hits         3246     3254       +8     
- Misses       1359     1383      +24     
- Partials      234      236       +2     

Impacted Files	Coverage Δ
packages/graphiql/src/components/GraphiQL.tsx	57.84% <32.50%> (-2.02%)	⬇️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 0c5785c...2156060. Read the comment docs.

[n1ru4l]

https://caniuse.com/mdn-javascript_statements_for_await_of

[n1ru4l]

Should be all fine given that we don't support IE11 :)

[acao]

all of this will be passed through browserslist and babel anyways

also to note re: for await of: afaik this will gaurantee serial execution, this is desired?

[acao]

this looks great! im just wondering how we can best demonstrate this feature at this point? maybe just a quick entry in the readme showing the two alternatives to fetcher?

or a docs/fetcher.md for some more in depth examples? been thinking of this as a way to break down the super long readme and to prepare for a docsite

eventually, i’d like to have a docsite where we could show many graphiql props permutations. we could use storybook or play room or use some other strategy.

[n1ru4l]

For starters, we could just add another example to the readme directly calls graphql/subscribe imported from the graphql package. I can take care of that. I also wish there was like an export from graphql that handles both execute/subscribe, so we don't have to write wrapper logic 👀

[n1ru4l]

Right now I tested the implementation by starting the GraphiQL dev server and pasting the following into packages\graphiql\resources\index.html.ejs :D

<script>
      // graphql-js relies on the global process object without feature detection :(
      window.process = globalThis.process = {
        env: {
          NODE_ENV: "development"
        }
      }
    </script>
    <script type="module">
      import * as graphql from "https://unpkg.com/[email protected]/index.mjs?module"

      const schema = new graphql.GraphQLSchema({
        mutation: new graphql.GraphQLObjectType({
          name: "Mutation",
          fields: {
            ping: {
              type: graphql.GraphQLBoolean,
              resolve: () => true
            }
          }
        }),
        query: new graphql.GraphQLObjectType({
          name: "Query",
          fields: {
            ping: {
              type: graphql.GraphQLBoolean,
              resolve: () => true
            }
          }
        }),
        subscription: new graphql.GraphQLObjectType({
          name: "Subscription",
          fields: {
            count: {
              type: graphql.GraphQLInt,
              subscribe: async function * () {
                for (let counter = 0; counter < 10; counter++) {
                  yield { count: counter };
                  await new Promise(res => setTimeout(res, 1000))
                }
              }
            }
          }
        }),
      });

      const fetcher = (graphQLParams) => {
        const document = graphql.parse(graphQLParams.query);
        const operation = graphql.getOperationAST(document, graphQLParams.operationName);
        if (operation.operation === "subscription") {
          // AsyncIterable
          return graphql.subscribe(
            schema,
            document,
            {},
            {},
            graphQLParams.variables,
            graphQLParams.operationName
          )
        }

        // Promise or AsyncIterable
        return graphql.execute(
          schema,
          document,
          {},
          {},
          graphQLParams.variables,
            graphQLParams.operationName
        )
      }

      window.schemaFetcherContext = {
        schema,
        fetcher
      }

    </script>

You will also have to adjust packages\graphiql\resources\renderExample.js to use window.schemaFetcherContext.fetcher

[acao]

thats nice to see it working, but we will need to keep that example as is for now.

lets just keep it to that readme entry for now, and we will come up with a way to show more detailed examples soon!

[n1ru4l]

Yeah, I just want some way for you to properly test before shipping a broken GraphiQL :D I am currently working on the readme section. In the meantime, I also fixed some issues that I could identify with the custom fetcher.

[acao]

@n1ru4l perhaps for now let's implement it in one of the examples, and then we can cross-reference to that from the readme?

[acao]

so in summary, the two last steps:

1. just one unit test
2. implement an example here, and then link to it from the packages/graphiql/Readme

[acao]

now available in [email protected]!