Node Pizza Maker

    @graphql-ez/plugin-graphiql
    TypeScript icon, indicating that this package has built-in type declarations

    0.12.0 • Public • Published

    @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
          }),
          // ...
        ],
      },
      // ...
    });

    Keywords

    none

    Install

    npm i @graphql-ez/plugin-graphiql

    DownloadsWeekly Downloads

    640

    Version

    0.12.0

    License

    MIT

    Unpacked Size

    38.1 kB

    Total Files

    45

    Last publish

    Collaborators

    • pablosz