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

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 https://github.com/graphql/graphiql/pull/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

https://github.com/redwoodjs/redwood/blob/e689299084ae3cf375d1fd05d800491823f8cd5b/packages/studio/web/src/Components/RedwoodGraphiQL/RedwoodGraphiQL.tsx#L4

https://github.com/redwoodjs/redwood/blob/e689299084ae3cf375d1fd05d800491823f8cd5b/packages/studio/web/src/Components/RedwoodGraphiQL/RedwoodGraphiQL.tsx#L140-L144

`@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} />;
};

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

redwoodjs / redwood