[Bug?]: @redwoodjs/studio leverage @graphiql/plugin-explorer's new implementation pattern?

[virtuoushub]

What's not working?

This is not a bug, per-say - however an implicit dependency's ( @graphiql/plugin-explorer ) newer versions ( 0.3.0+ ) introduced a new implementation pattern, which if we take the latest version of that dependency, will result in a build failure.

For context, while working on #9081 (which makes implicit dependencies more explicit), I noticed there is a breaking change for @graphiql/plugin-explorer from graphql/graphiql#3330 (details below)

There is some work on our end to change over the implementation pattern, and not sure if it is worth it, so to be clear I am not advocating one way or the other. Just wanted to call it out in case we did want to move to the later versions of @graphiql/plugin-explorer.

( cc @Josh-Walker-GM, @dthyresson )

---

Redwood's usage

redwood/packages/studio/web/src/Components/RedwoodGraphiQL/RedwoodGraphiQL.tsx

Line 4 in e689299

import { useExplorerPlugin } from '@graphiql/plugin-explorer'

redwood/packages/studio/web/src/Components/RedwoodGraphiQL/RedwoodGraphiQL.tsx

Lines 140 to 144 in e689299

	const explorerPlugin = useExplorerPlugin({
	query,
	onEdit: setQuery,
	showAttribution: false,
	})

@graphiql/plugin-explorer's new implementation pattern

From the release notes:

0.3.0

Minor Changes

• #3330 bed5fc86 Thanks @acao! - BREAKING CHANGE: fix lifecycle issue in plugin-explorer, change implementation pattern

  value and setValue is no longer an implementation detail, and are handled internally by plugins. the plugin signature has changed slightly as well.

  now, instead of something like this:

  import { useExplorerPlugin } from '@graphiql/plugin-explorer';
  import { snippets } from './snippets';
  import { useExporterPlugin } from '@graphiql/plugin-code-exporter';
  
  const App = () => {
    const [query, setQuery] = React.useState('');
    const explorerPlugin = useExplorerPlugin({
      query,
      onEdit: setQuery,
    });
    const codeExporterPlugin = useExporterPlugin({
      query,
      snippets,
    });
  
    const plugins = React.useMemo(
      () => [explorerPlugin, codeExporterPlugin],
      [explorerPlugin, codeExporterPlugin],
    );
  
    return (
      <GraphiQL
        query={query}
        onEditQuery={setQuery}
        plugins={plugins}
        fetcher={fetcher}
      />
    );
  };

  you can just do this:

  import { explorerPlugin } from '@graphiql/plugin-explorer';
  import { snippets } from './snippets';
  import { codeExporterPlugin } from '@graphiql/plugin-code-exporter';
  import { createGraphiQLFetcher } from '@graphiql/toolkit';
  
  // only invoke these inside the component lifecycle
  // if there are dynamic values, and then use useMemo() (see below)
  const explorer = explorerPlugin();
  const exporter = codeExporterPlugin({ snippets });
  
  const fetcher = createGraphiQLFetcher({ url: '/graphql' });
  
  const App = () => {
    return <GraphiQL plugins={[explorer, exporter]} fetcher={fetcher} />;
  };

  or this, for more complex state-driven needs:

  import { useMemo } from 'react';
  import { explorerPlugin } from '@graphiql/plugin-explorer';
  import { snippets } from './snippets';
  import { codeExporterPlugin } from '@graphiql/plugin-code-exporter';
  
  const explorer = explorerPlugin();
  const fetcher = createGraphiQLFetcher({ url: '/graphql' });
  
  const App = () => {
    const { snippets } = useMyUserSuppliedState();
    const exporter = useMemo(
      () => codeExporterPlugin({ snippets }),
      [snippets],
    );
  
    return <GraphiQL plugins={[explorer, exporter]} fetcher={fetcher} />;
  };

see also: https://github.com/graphql/graphiql/blob/57b5fcd8749bd1c54f4a6a04a9ab07316fd05e71/packages/graphiql-plugin-code-exporter/CHANGELOG.md#030

---

How do we reproduce the bug?

# use latest of @graphiql/plugin-explorer

yarn workspace @redwoodjs/studio add -E @graphiql/plugin-explorer
yarn build

What's your environment? (If it applies)

No response

Are you interested in working on this?

• I'm interested in working on this

[Josh-Walker-GM]

Happy to take a look but I'll also loop in @dthyresson as he was the one to originally do the graphiql section of studio