GraphiQL Webcomponent

A Webcomponent wrapper around GraphiQL and GraphiQL-Explorer.

Usage

Angular2

Add import @ninjaneers/graphiql-webcomponent; to your app.module.ts to register the Webcomponent in the browser.

Add schemas: [CUSTOM_ELEMENTS_SCHEMA] to the modules where the Webcomponent will be used.

Now you can use the Webcomponent in your Angular templates like this:

    <div *ngIf="config$ | async as config">
        <graphiql-webcomponent #graphiql
          [config]="config"
           [query]="''"
           [variables]="{}"
        ></graphiql-webcomponent>
    </div>

  export class ParentComponent implements AfterViewInit {
    
  public config$ = new BehaviorSubject({
    api: {
      url: 'http://localhost:8080/graphql',
    },
  })
  @ViewChild('graphiql')
  public graphiql: ElementRef;

  public ngAfterViewInit(): void {
    this.graphiql.nativeElement.addEventListener('QueryChange', (event) => console.dir(event));
    this.graphiql.nativeElement.addEventListener('VariablesChange', (event) => console.dir(event));  
  }
}

React

Add import @ninjaneers/graphiql-webcomponent; to your index.(js/ts) to register the webcomponent in the browser.

Now you can use the Webcomponent in your (j/t)sx like this:

const Parent = () => {
  const ref = useRef(null);
  useEffect(() => {
    ref.current.addEventListener('QueryChange', (event) => console.dir(event));
    ref.current.addEventListener('VariablesChange', (event) => console.dir(event));
  }, [ref]);
  return <graphiql-webcomponent ref={ref}
    config={config}
    query={""}
    variables={{}}
  ></graphiql-webcomponent>
}

Config

    type GraphiqlWebcomponentConfig = {
      api: {
        url: string;
        headers?: Record<string, string>;
        subscriptionUrl?: string;
        wsConnectionParams?: Record<string, string | Record<string, string>>;
      };
      defaultQuery?: string;
      disableExplorer?: boolean;
      editorTheme?: string;
      excludeMutations?: boolean;
      excludeSubscriptions?: boolean;
    };

• api; required; contains the configuration for your connection to your GraphQL server.
  • url; required; URL of the HTTP(S) endpoint of your GraphQL server. e.g. http://localhost:3000/v1/graphql.
  • headers; headers that might be required to make a connection to your server. e.g. {"Authorization": "Bearer ..."}.
  • subscriptionUrl; required by default (see excludeSubscriptions); URL of the WS(S) endpoint of your GraphQL server. e.g. ws://localhost:3000/v1/graphql.
  • wsConnectionParams; websocket connection params. e.g. {headers: {Authorization": "Bearer ...}}.
• defaultQuery; the default query/message that will be shown in GraphiQL.
• disableExplorer; whether you want to use the GraphiQL-Explorer ot not. Defaults to false.
• editorTheme; the Theme for GraphiQL. Defaults to "dracula".
• excludeMutations; will exclude mutations from GraphiQL. Defaults to false.
• excludeSubscriptions; will exclude mutations from GraphiQL. If false api.subscriptionUrl is required. Defaults to false.