The Guild LogoThe Guild Monogram

Search docs

Search icon

Products by The Guild

Products

Hive logoHive blurred logo

Hive

Schema Registry for your GraphQL Workflows

Docs

Get Started

Codegen#

Given it's configuration, creates a typed gqty client from a graphql endpoint/schema.

Installation#

Install the following dependencies to your project:

yarn add gqty graphql yarn add -D @gqty/cli

Command#

After @gless/cli is installed in your package, you should add a script in your package.json.

{ "scripts": { "generate": "gqty generate" } }

Then, you can execute:

yarn generate

Format output code#

The CLI code generator comes with built in support for formatting code using Prettier. The config search will start at the output directory and will continue up the directories tree.

Default client generated code#

By default with react & subscriptions turned on, the generated client files should look like this:

import { createReactClient } from '@gqty/react'; import { createSubscriptionsClient } from '@gqty/subscriptions'; import { createClient, QueryFetcher } from 'gqty'; import { GeneratedSchema, generatedSchema, scalarsEnumsHash, SchemaObjectTypes, SchemaObjectTypesNames, } from './schema.generated'; const queryFetcher: QueryFetcher = async function (query, variables) { // Modify "/api/graphql" if needed const response = await fetch('/api/graphql', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ query, variables, }), mode: 'cors', }); const json = await response.json(); return json; }; const subscriptionsClient = typeof window !== 'undefined' ? createSubscriptionsClient({ wsEndpoint: () => { // Modify if needed const url = new URL('/api/graphql', window.location.href); url.protocol = url.protocol.replace('http', 'ws'); return url.href; }, }) : undefined; export const client = createClient< GeneratedSchema, SchemaObjectTypesNames, SchemaObjectTypes >({ schema: generatedSchema, scalarsEnumsHash, queryFetcher, subscriptionsClient, }); export const { query, mutation, mutate, subscription, resolved, refetch, track, } = client; export const { graphql, useQuery, useTransactionQuery, useLazyQuery, useMutation, useRefetch, useMetaState, prepareReactRender, useHydrateCache, prepareQuery, useSubscription, } = createReactClient<GeneratedSchema>(client, { defaults: { // Set this flag as "true" if your usage involves React Suspense // Keep in mind that you can overwrite it in a per-hook basis suspense: false, // Set this flag based on your needs staleWhileRevalidate: false, }, }); export * from './schema.generated';

You can modify this file safely, and each client has configurations you can set.