Getting started#

Installation#

Go to the root of your project, and run:

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

pnpm add gqty graphql @gqty/react
pnpm add -D @gqty/cli

npm install gqty graphql @gqty/react
npm install -D @gqty/cli

Next, add a script field to your package.json: { "scripts": { "generate": "gqty generate" } }
Then run the script once, to create a gqty.config.cjs file:

yarn generate

pnpm generate

npm run generate

Configuring Codegen#

The default config should look something like this:

Can also be specified in package.json via gqty key

/**
 * @type {import("@gqty/cli").GQtyConfig}
 */
const config = {
  react: true,
  scalarTypes: { DateTime: 'string' },
  introspection: {
    endpoint: 'SPECIFY_ENDPOINT_OR_SCHEMA_FILE_PATH_HERE',
    headers: {},
  },
  destination: './src/gqty/index.ts',
  subscriptions: false,
};

module.exports = config;

Point introspection.endpoint to your GraphQL API, adding headers for authorization if necessary. Then run the generate command again, to fetch your schema and output to the destination file:

yarn generate

pnpm generate

npm run generate

The output should look like this:

src/gqty
├── schema.generated.ts # Will be overwritten when you codegen again
└── index.ts # GQty client is exported from here, safe to modify options

Getting started#

Configure the fetch() call to your GraphQL server, located inside the queryFetcher() method within src/gqty/index.ts. You might for instance want to dynamically generate the URL depending on environment, or connect it up to your apps authorization.

Usage#

See one of the following for more: