graphiql-extension-demo.js

const { hooks, useAppContext } = wpGraphiQL
const { useState } = wp.element

const DemoButton = props => {

    const { GraphiQL, graphiql } = props;

    const [ count, setCount ] = useState( 0 )

    return (
        <GraphiQL.Button
            label={`Demo Button ${count}`}
            onClick={() => {
                setCount( count + 1 )
                console.log( props )
            }}
        />
    )

}

hooks.addFilter( 'graphiql_after_graphiql', 'graphiql-extension-demo', (res, props) => {

    const appContext = useAppContext()
    const { graphiql, GraphiQL } = props

    res.push(
        <div style={{ maxWidth: '300px', overflow: "scroll" }}>
            <h2>Demo Panel!</h2>
            <pre>{JSON.stringify(props, null, 2 )}</pre>
            <pre>{JSON.stringify(appContext, null, 2 )}</pre>
        </div>
    )

    return res

})

hooks.addFilter( 'graphiql_toolbar_after_buttons', 'graphiql-extension-demo', (res, props) => {

    res.push(
        <DemoButton {...props} />
    )

    return res

})