0.22.0 and 0.22.1 seems to have undocumented breaking changes, how should the community proceed with the upgrade?

[klippx]

Ever since 0.22.0 I cannot boot the app, something has changed that breaks my app. Either I am doing something wrong and was just lucky this always worked? Or something bad happened.

My usage:

  return (
    <GraphiQL
      fetcher={fetcher}
      query={query}
      variables={variables}
      headers={headers}
      schema={schema}
      plugins={[explorer, collectionPlugin]}
      defaultHeaders={DEFAULT_HEADERS}
      defaultQuery={defaultQuery}
    >
      <GraphiQL.Toolbar>
        <PrettierButton /> // <-- throws since 0.22.0+
        <MergeFragmentsButton /> // <-- throws since 0.22.0+
        <ShareButton /> // <-- throws since 0.22.0+
        <AddToCollectionButton /> // <-- etc.
        <AuthButton />
        <DisplayMetaButton />
        <SkipCacheButton />
      </GraphiQL.Toolbar>

      <GraphiQL.Logo />
    </GraphiQL>
  )

Since 0.22.0 this usage is no longer allowed, for some reason. Each component in the list within GraphiQL.Toolbar no longer has the required context provider; each and every one of them throws:

• Error: Tried to use <ComponentName> without the necessary context. Make sure to render the EditorContextProvider component higher up the tree.

The only packages from your mono repo I am using are these:

    "@graphiql/plugin-explorer": "3.0.1",
    "@graphiql/react": "0.22.1",
    "@graphiql/toolkit": "0.9.1",

Any idea what is wrong here? Pinging @thomasheyenbrock since he is the one that authored 0.22.0 and 0.22.1 and @acao for merging.

[acao]

thanks for this @klippx ! I'm sorry you're having this issue. you tagged the right people, we will check it out! currently our example implementations of this API are static and don't include stateful hooks, which we should fix! I can confirm this was working when I fixed the Saleor GraphiQL instance last fall

[thomasheyenbrock]

Hey @klippx 👋 thanks for raising this!

The only change in 0.22.0 was this one, which did not in any way change the way how state or context is managed.

Some questions:

• Is the GraphiQL component from your code snippet the one from the graphiql package? If so, which version are you using?
• Am I assuming correctly that the toolbar components (PrettierButton etc.) are custom ones you created?
• Can you create a reproduction on CodeSandbox or the likes that we can use for debugging?

[thomasheyenbrock]

A common source for this might be mismatching versions of @graphiql/react. So if you're also using the graphiql package it might be worth checking which version of @graphiql/react it uses as sub-dependency.

[klippx]

Hello, yes there seem to be some trouble here:

$ graphql-federation-graphiql % pnpm why @graphiql/react
Legend: production dependency, optional only, dev only

[email protected] /Users/MKLIPPIN/repos/graphql-federation-graphiql

dependencies:
@graphiql/plugin-explorer 2.0.0
└── @graphiql/react 0.21.0 peer
@graphiql/react 0.21.0
graphiql 3.2.0
└── @graphiql/react 0.21.0

Note: I have a patch commit for #3552 that I have been waiting 3 months to get merged. Unfortunately this is creating some overhead for me in that every time a new version of @graphiql/react is released I have to update the pnpm patch in my userland repo 😬💦

I will take a look and see if it works when I align all @graphiql/react versions and get back!

[klippx]

Yes, that fixed it.

dependencies:
@graphiql/plugin-explorer 3.0.2
└── @graphiql/react 0.22.2 peer
@graphiql/react 0.22.2
graphiql 3.2.3
└── @graphiql/react 0.22.2