A webcomponent wrapper around GraphiQL and GraphiQL-Explorer.
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>
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>
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 ...}}
.
- url; required; URL of the HTTP(S) endpoint of your GraphQL server. e.g.
- 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
.