graphiql 3.x Upgrade

[brettwilcox]

Hello Dadish!

I wanted to share graphiql 3 example code. You can copy + paste the example into your 'graphiql.php' teplate for a working example that also includes the explorer plugin. I merged your code as best I could with the examples provided.

• https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-2.0.0.md
• https://github.com/graphql/graphiql/blob/main/examples/graphiql-cdn/index.html

<?php
/*

// Add these to the header of _main.php
foreach($config->scripts as $url) echo "<script type='text/javascript' src='$url'></script>";
foreach($config->styles as $url) echo "<link rel='stylesheet' type='text/css' href='$url' />";

// Example for on-prem
$config->scripts->add($config->urls->templates . 'js/graphiql3/react.production.min.js');
$config->scripts->add($config->urls->templates . 'js/graphiql3/react-dom.production.min.js');
$config->scripts->add($config->urls->templates . 'js/graphiql3/graphiql.min.js');
$config->scripts->add($config->urls->templates . 'js/graphiql3/explorer.js');
$config->styles->add($config->urls->templates . 'css/graphiql3.css');
$config->styles->add($config->urls->templates . 'css/explorer.css');
*/

// Example for unpkg.com
$config->scripts->add('https://unpkg.com/react@18/umd/react.development.js');
$config->scripts->add('https://unpkg.com/react-dom@18/umd/react-dom.development.js');
$config->scripts->add('https://unpkg.com/graphiql/graphiql.min.js');
$config->scripts->add('https://unpkg.com/@graphiql/plugin-explorer/dist/index.umd.js');
$config->styles->add('https://unpkg.com/graphiql/graphiql.min.css');
$config->styles->add('https://unpkg.com/@graphiql/plugin-explorer/dist/style.css');

?>

<div id="content">

    <div id="graphiql">Loading...</div>
    <script>
        const root = ReactDOM.createRoot(document.getElementById("graphiql"));
        const fetcher = GraphiQL.createFetcher({
            url: "/graphql/",
            headers: {
                Accept: 'application/json',
                'Content-Type': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
            },
            credentials: 'include',
        });
        const explorerPlugin = GraphiQLPluginExplorer.explorerPlugin();
        root.render(
            React.createElement(GraphiQL, {
                fetcher,
                defaultEditorToolsVisibility: true,
                plugins: [explorerPlugin],
            })
        );
    </script>

    <style>
        #graphiql {
            height: 86vh;
            margin-top: 20px;
        }
    </style>

</div>