Customization of GraphiQL interface in Spring-Boot project

Question

According to the GraphiQL README I can customize the interface by adding React children like this:

<GraphiQL.Logo>
    My Custom Logo
</GraphiQL.Logo>

That is great, but how do I actually set these children? I'm not a web developer and I've never used React before! I'm developing a Spring-Boot project with the following dependencies:

<dependency>
    <groupId>com.graphql-java-kickstart</groupId>
    <artifactId>graphql-spring-boot-starter</artifactId>
    <version>5.0.6</version>
</dependency>
<dependency>
    <groupId>com.graphql-java-kickstart</groupId>
    <artifactId>graphiql-spring-boot-starter</artifactId>
    <version>5.0.6</version>
</dependency>

I don't see any way to set the children via application.properties/yml, although I can set other things there like the pageTitle, defaultQuery and editorTheme.

I can override the graphiql.html page provided by the starter. I naively tried to set the children like this at the end of the page:

// Render <GraphiQL /> into the body.
ReactDOM.render(
    React.createElement(GraphiQL, props, [React.createElement('GraphiQL.Logo', {}, 'Custom LOGO')]),
    document.body
);

That didn't have any effect.

How should I approach this?

Answer 1

I believe you are passing an array instead of a variadic argument.

You code:

React.createElement(GraphiQL, props, [React.createElement('GraphiQL.Logo', {}, 'Custom LOGO')]), document.body

Code that should run:

React.createElement(GraphiQL, props, React.createElement('GraphiQL.Logo', {}, 'Custom LOGO')), document.body

A working example of mine follows:

const root = ReactDOM.createRoot(document.getElementById('graphiql'));
    const fetcher = GraphiQL.createFetcher({
      url: 'https://beta.pokeapi.co/graphql/v1beta',
      headers: { 'X-Method-Used': 'graphiql-pokeapi-console' },
    });
    const explorerPlugin = GraphiQLPluginExplorer.explorerPlugin();
    root.render(
      React.createElement(GraphiQL, {
        fetcher,
        defaultEditorToolsVisibility: true,
        plugins: [explorerPlugin],
        confirmCloseTab: function () { return true }
      },
        React.createElement(GraphiQL.Logo,
          {},
          React.createElement('img', {
            src: 'https://raw.githubusercontent.com/PokeAPI/media/refs/heads/master/logo/pokeapi_64_min.png',
            alt: 'pokeapi'
          }
          )
        )
      ),
    );

The reference says that children are ...children, which means you don't need an array. Check out their example