@graphql-ez/plugin-graphiql

Integration with GraphiQL IDE

Usage

import { ezGraphiQLIDE } from '@graphql-ez/plugin-graphiql';

const ezApp = CreateApp({
  ez: {
    plugins: [
      ezGraphiQLIDE({
        // Options
      }),
      // ...
    ],
  },
  // ...
});

Options

Most of these types come from graphql-helix Graphiql

type GraphiQLOptions =
  | {
      /**
       * By default it's the same as the main API path, normally `"/graphql"` or `"/api/graphql"`
       */
      path?: string;

      /**
       * An optional GraphQL string to use when no query is provided and no stored
       * query exists from a previous session.  If undefined is provided, GraphiQL
       * will use its own default query.
       */
      defaultQuery?: string;
      /**
       * Whether to open the variable editor by default. Defaults to `true`.
       */
      defaultVariableEditorOpen?: boolean;
      /**
       * The endpoint requests should be sent. Defaults to `"/graphql"`.
       */
      endpoint?: string;
      /**
       * The initial headers to render inside the header editor. Defaults to `"{}"`.
       */
      headers?: string;
      /**
       * Whether the header editor is enabled. Defaults to `true`.
       */
      headerEditorEnabled?: boolean;
      /**
       * A cryptographic nonce for use with Content-Security-Policy.
       */
      nonce?: string;
      /**
       * The endpoint subscription requests should be sent to. Defaults to the value of the `endpoint` parameter.
       *
       * If no `subscriptionsEndpoint` is specified and `subscriptionsProtocol` is set to **"WS"** or **"LEGACY_WS"**,
       * it automatically reuses the `endpoint` with the current browser window URL with the protocol "ws://" or "wss://"
       */
      subscriptionsEndpoint?: string;
      /**
       * The Subscriptions protocol used.
       *
       * If no protocol is specified, it fallbacks to Server-Sent Events aka **"SSE"**
       */
      subscriptionsProtocol?: 'WS' | 'LEGACY_WS' | 'SSE';

      /**
       * Enable selecting subscriptions protocol via dropdown in interface
       */
      hybridSubscriptionTransportConfig?: {
        default: 'sse' | 'legacyWS' | 'transportWS';
        config: {
          /* Enable SSE transport as an option, if set as "true", it re-uses `endpoint` */
          sse?: string | boolean;
          /* Enable Legacy graphql-ws protocol transport as an option, if set as "true", re-uses `endpoint` with "ws:" or "wss:" protocol */
          legacyWS?: string | boolean;
          /* Enable graphql-transport-ws protocol transport as an option, if set as "true" re-uses `endpoint` with "ws:" or "wss:" protocol */
          transportWS?: string | boolean;
        };
      };
    }
  | boolean;

Next.js Usage

For Next.js you can either use this plugin's handler explicitly in your API routes, for example, following the file structure: /pages/api/graphiql.ts, and using this snippet:

// /pages/api/graphiql.ts
import { GraphiQLHandler } from '@graphql-ez/plugin-graphiql';

export default GraphiQLHandler({
  endpoint: '/api/graphql',
});

Or simply add the plugin in your EZ App and it will be served in the same path of your GraphQL API

import { CreateApp } from '@graphql-ez/nextjs';
import { ezGraphiQLIDE } from '@graphql-ez/plugin-graphiql';

const ezApp = CreateApp({
  ez: {
    plugins: [
      ezGraphiQLIDE({
        // Options
      }),
      // ...
    ],
  },
  // ...
});

Unpkg vs "Manual" File serve

This plugin by default serves the GraphiQL bundles on https://unpkg.com/, but if you prefer serving the files directly from node_modules without needing access to internet, you can use a special version of this plugin, ezStaticGraphiQLIDE:

import { CreateApp } from '@graphql-ez/nextjs';
import { ezStaticGraphiQLIDE } from '@graphql-ez/plugin-graphiql/static';

const ezApp = CreateApp({
  ez: {
    plugins: [
      ezStaticGraphiQLIDE({
        // Options
      }),
      // ...
    ],
  },
  // ...
});