graphiql-debug-tool-example.js

const { hooks } = wpGraphiQL;
import LZString from 'lz-string'

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

  const encoded = LZString.compressToEncodedURIComponent(props.query)
  const decoded = LZString.decompressFromEncodedURIComponent(encoded)
  
  res.push(
      <div style={{maxWidth: `200px`}}>
          <h2>Encoded</h2>
          <pre>{encoded}</pre>
          <br/>
          <h2>Decoded</h2>
          <pre>{decoded}</pre>
      </div>
  )

  return res
})

This shows how to filter in a panel to GraphiQL to debug the query encoding/decoding