Getting started

Installation#

Install the following dependencies to your project:

pnpm
npm
yarn

npm install gqless 
npm install -D @gqless/cli graphql

Command#

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

{
  "scripts": {
    "generate": "gqless generate"
  }
}

Then, you can execute:

pnpm
npm
yarn

npm run generate

Codegen#

gqless requires information about your schema, which is generated using the CLI.

After executing gqless generate for the first time, it will create a new configuration file named gqless.config.cjs at the root of your project, it will look like this:

You can also use the gqless key in your package.json, or use the name gqless.config.js

/**
 * @type {import("@gqless/cli").GqlessConfig}
 */
const config = {
  endpoint: '/api/graphql',
  enumsAsStrings: false,
  react: true,
  scalars: { DateTime: 'string' },
  preImport: '',
  introspection: {
    endpoint: 'SPECIFY_ENDPOINT_OR_SCHEMA_FILE_PATH_HERE',
    headers: {},
  },
  destination: './src/gqless/index.ts',
  subscriptions: false,
};

module.exports = config;

You can then modify the configuration based on your needs, at least changing introspection.endpoint.

If you leave enabled "react" and/or "subscriptions", you will also need to install these libraries:
pnpm
npm
yarn
npm install @gqless/react @gqless/subscriptions

And then run the script to generate your schema:

pnpm
npm
yarn

npm run generate

The gqless client will be created in your specified destination, which by default is src/gqless/index.ts, following the structure:

src/gqless
├── schema.generated.ts # Generated schema, you shouldn't modify it manually
└── index.ts # gqless client is exported from here, you can safely modify it based on your needs

Usage#

Ensure that the queryFetcher in src/gqless/index.ts is correct.

You should then be able to use the client ✨

import { query } from './gqless';

// for example
query.me.name;

Related#

See Usage with React
See Usage outside of React