GraphQL Hive Edge Client

Note: Currently only supports usage reporting

GraphQL Hive is a GraphQL schemas registry where you can host, manage and collaborate on all your GraphQL schemas and operations, compatible with all architecture: schema stitching, federation, or just a good old monolith.

GraphQL Hive is currently available as a hosted service to be used by all. We take care of the heavy lifting behind the scenes be managing the registry, scaling it for your needs, to free your time to focus on the most important things at hand.

Installation

npm install graphql-hive-edge-client

Usage Reporting configuration

Client Info

The schema usage operation information can be enriched with meta information that will be displayed on the Hive dashboard in order to get a better understanding of the origin of an executed GraphQL operation.

Cloudflare Worker

import { createUsageCollector, createHiveSendFn, UsageCollector } from 'graphql-hive-edge-client';

export interface Env {
  HIVE_TOKEN: string;
}

let collector: UsageCollector | null = null;

export default {
  async fetch(_request: Request, env: Env, ctx: ExecutionContext): Promise<Response> {
    // singleton, we need the env.HIVE_TOKEN thus defining it inside fetch
    if (!collector) {
      const sendFn = createHiveSendFn(env.HIVE_TOKEN, {
        clientName: 'cloudflare-worker-example',
      });
      collector = createUsageCollector({
        send: (r) => {
          console.info({ report: JSON.stringify(r, null, 2) });
          return sendFn(r);
        },
        sampleRate: 1.0,
        sendInterval: 2000,
      });
    }

    // for test purposes use static definition, this definitions can be generated by codegen or be calculated runtime (worse performance)
    const finish = collector.collect(
      {
        key: 'c844b925f03d2195287f817e0a67accb',
        operationName: 'getProjects',
        operation: 'query getProjects($limit:Int!){projects(filter:{pagination:{limit:$limit}type:FEDERATION}){id}}',
        fields: [
          'Query.projects',
          'Query.projects.filter',
          'Project.id',
          'Int',
          'FilterInput.pagination',
          'FilterInput.type',
          'PaginationInput.limit',
          'ProjectType.FEDERATION',
        ],
      },
      {
        name: 'hive-example-worker',
        version: '0.0.0',
      }
    );

    // dummy fetch, this should be a fetch to some graphql server
    await fetch('https://google.com');

    ctx.waitUntil(finish({ ok: true }).catch((e) => console.error(e)));

    return new Response('Collected!');
  },
};

Usage with codegen

codegen.ts:

import type { CodegenConfig } from '@graphql-codegen/cli';
import { GenerateFn } from 'graphql-codegen-on-operations';
import { createCollector } from 'graphql-hive-edge-client';

const genFn: GenerateFn = (schema, { documents }) => {
  const collect = createCollector(schema);
  const result = documents.map((d) => collect(d.node, null));

  return JSON.stringify(result, null, 2);
};

const config: CodegenConfig = {
  schema: './schema.graphql',
  documents: ['src/**/*.{ts,tsx,graphql}'],
  ignoreNoDocuments: true,
  generates: {
    './src/__generated__/hive-ops.json': {
      plugins: ['graphql-codegen-on-operations'],
      config: {
        gen: genFn,
      },
    },
  },
};
export default config;

worker.ts:

import OperationHiveList from '@/__generated__/hive-ops.json';
import { createUsageCollector, createHiveSendFn, UsageCollector } from 'graphql-hive-edge-client';

export interface Env {
  HIVE_TOKEN: string;
}

let collector: UsageCollector | null = null;

export default {
  async fetch(_request: Request, env: Env, ctx: ExecutionContext): Promise<Response> {
    // singleton, we need the env.HIVE_TOKEN thus defining it inside fetch
    if (!collector) {
      collector = createUsageCollector({
        send: createHiveSendFn(env.HIVE_TOKEN, {
          clientName: 'cloudflare-worker-example',
        }),
        sampleRate: 1.0,
        sendInterval: 2000,
      });
    }

    const hiveOp = OperationHiveList.find((i) => i.operationName === 'getProjects');

    const finish = hiveOp
      ? collector.collect(hiveOp, {
          name: 'hive-example-worker',
          version: '0.0.0',
        })
      : undefined;

    // dummy fetch, this should be a fetch to some graphql server
    await fetch('https://google.com');

    finish && ctx.waitUntil(finish({ ok: true }).catch((e) => console.error(e)));

    return new Response('Collected!');
  },
};