Skip to content

ninjaneers-team/graphiql-webcomponent

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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
                [config]="config"
        ></graphiql-webcomponent>
    </div>

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:

        <graphiql-webcomponent
                config={config}
        ></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.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published