Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ilijanl/graphql-hive-edge-client
Client for graphql-hive for the edge
https://github.com/ilijanl/graphql-hive-edge-client
analytics cloudflare edge graphql graphql-api graphql-hive workers
Last synced: about 1 month ago
JSON representation
Client for graphql-hive for the edge
- Host: GitHub
- URL: https://github.com/ilijanl/graphql-hive-edge-client
- Owner: ilijaNL
- License: mit
- Created: 2023-06-22T08:29:15.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-06-27T05:58:08.000Z (over 1 year ago)
- Last Synced: 2024-11-12T11:02:51.384Z (about 1 month ago)
- Topics: analytics, cloudflare, edge, graphql, graphql-api, graphql-hive, workers
- Language: TypeScript
- Homepage: https://github.com/ilijaNL/graphql-hive-edge-client
- Size: 207 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# GraphQL Hive Edge Client
**Note: Currently only supports usage reporting**
[GraphQL Hive](https://graphql-hive.com) 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
```ts
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 {
// 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`:
```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`:
```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 {
// 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!');
},
};
```