Get Started

Getting started#


  1. Go to the root of your project, and run:
yarn add gqty graphql @gqty/react yarn add -D @gqty/cli
  1. Next, add a script field to your package.json: { "scripts": { "generate": "gqty generate" } }
  2. Then run the script once, to create a gqty.config.cjs file:
yarn 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

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.


See one of the following for more: