GraphiQLExplorer integration incompatible after 1.9 release

[ggascoigne]

I've been using OneGraph/GraphiQLExplorer for several years now, honestly I find it to be a make or break feature when using Graphiql.

The refactoring that went into 1.9 completely breaks this. Now I'm not complaining about that, I'm pretty sure that the way it was hooked together was depending far too much on implementation details of graphiql, but, it does leave me wondering what the best way to integrate these two together might be.

Previously I used to do something like this:

  const _graphiql = useRef(null)
...
    <div className={cx(classes.box, 'graphiql-container')}>
      <GraphiQLExplorer
        schema={schema}
        query={query}
        onEdit={handleEditQuery}
        onRunOperation={(operationName: string) =>
          _graphiql.current.handleRunQuery(operationName)
        }
        explorerIsOpen={explorerIsOpen}
        onToggleExplorer={handleToggleExplorer}
      />
      <RealGraphiQL
        ref={_graphiql}
        fetcher={graphQLFetcher(jwtToken)}
        schema={schema}
        query={query}
        onEditQuery={handleEditQuery}
      >
        <RealGraphiQL.Toolbar>
          <RealGraphiQL.Button
            onClick={_graphiql.current.handlePrettifyQuery}
            label={t`Prettify`}
            title={t`Prettify Query (Shift-Ctrl-P)`}
          />
          <RealGraphiQL.Button
            onClick={_graphiql.current.handleMergeQuery}
            title={t`Merge Query (Shift-Ctrl-M)`}
            label={t`Merge`}
          />
...
        </RealGraphiQL.Toolbar>
      </RealGraphiQL>
    </div>

It looks like the internal GraphiQLWithContext still looks for a toolbar in its children, but with it being wrapped like it is, it's harder to get a ref to it to access its handlers.

Anyone got a suggestion as to the best way forward here?

[thomasheyenbrock]

Hey @ggascoigne 👋 we did indeed break attaching a ref to the GraphiQL class component with 1.9.0, but fixed it later with 1.9.5 and 1.9.6 (see #2454 and #2466). Customizing the toolbar should still work as before. Can you try if the latest version (1.9.6) fixes your issues?

[ggascoigne]

That did it. I had to change the handlers from _graphiql.current.handlePrettifyQuery to _graphiql.current.ref.props.prettify(). It works, though I'm not at all sure that that's the best way to handle it. Thanks for the help.

[mattkrick]

for those that got here from google, graphiql.current!.handleToggleHistory() is now graphiql.current!.ref?.props.historyContext?.toggle()

[thomasheyenbrock]

Both comments are correct! Both these class methods (and some others) have been removed in recent refactorings as they were not marked as being part of the "public" API. If you notice more of them, feel free to let me know here and I can help you find the appropriate replacements.

I also wanna note that this will change again with the upcoming major version. The GraphiQL component will no longer be a class component and won't expose any class methods or properties. But we'll write up a migration guide that will highlight all the breaking changes and how to upgrade.