react apollo generator 🔧

The most successful dev work smart, not hard.

A cli to generate graphql react hooks using graphql-codegen with support for multiples schemas.

Usage

Install

npm install -g react-apollo-generator

Then, create a rag.config.js in the folder where you have your .graphql files:

my-awesome-project
├── node_modules
└── src
    ├── index.tsx
    └── graphql
        ├── rag.config.js <=
        ├── me.graphql
        ├── login.graphql

Configure your graphql endpoint:

// rag.config.js - single schema with simple config
module.exports = {
  schema: 'https://my-graphql-endpoint.com/graphql/',
};

And finally, run the rag command with the path where the ``rag.config.js` was created.

npx rag ./src/graphql/

It's recommended to run the rag command over specific graphql files. In that way you can control how your react-hooks are being generated.

At the end you will have something like:

my-awesome-project
├── node_modules
└── src
    ├── index.tsx
    └── graphql
        ├── rag.config.js
        ├── me.graphql
        ├── me.generated.tsx <= generated by rag command
        ├── login.graphql
        ├── login.generated.tsx <= generated by rag command
        ├── types.graphql <= generated by rag command. File with all types from the graphql schema

rag.config.js configuration (single and multiple graphql schemas)

The rag.config.js should exports a object config. The schema key can be a string or an array. Each item of the schema array will be treat like a graphql schema inside the react-apollo-generator cli.

// rag.config.js - single schema with simple config
module.exports = {
  schema: 'https://my-graphql-endpoint.com/graphql/',
};

IF you want to pass extra options, you can use an array instead of a string:

// rag.config.js - single schema
module.exports = {
  schema: [
    {
      url: 'https://some-schema.co/', // the url of your graphql endpoint
      tag: '', //if you specify the tag it will search for all tagged (*.<tag>.graphql) files
      schemaTypesPath: '../../', // the place where the file with types for the graphql schema should be created.
    },
  ],
};

Multiples schemas

With the following folder structure

the-name-of-your-project
├── node_modules
└── src
    ├── index.tsx
    └── graphql
        ├── rag.config.js <=
        ├── some.graphql
        ├── me.auth.graphql // a graphql for the auth schema
        ├── item.product.graphql // a graphql for the product schema

// rag.config.js - multiples schemas
module.exports = {
  schema: [
    {
      url: 'https://some-graphql.com/graphql/',
      tag: '', // It will generate hooks for all *.graphql files (for example, some.graphql)
      includes: ['../../c/some-fragment.graphql'], // add the location of fragments used in your graphql queries.
      schemaTypesPath: '../../graphql-schemas/',
    },
    {
      url: 'https://auth.com/graphql/',
      tag: 'auth', // It will generate hooks for all *.auth.graphql files (for example, me.auth.graphql)
      includes: ['../../c/user.graphql'],
      schemaTypesPath: '../../graphql-schemas/',
    },
    {
      url: 'https://product-schema.co/graphql/',
      tag: 'product', // It will generate hooks for all *.product.graphql files (for example, item.product.graphql)
      schemaTypesPath: '../../graphql-schemas/',
    },
  ],
};

The schemaTypesPath is important if you has multiple schemas. It is the place where all types, for each graphql schema, will be created/storaged.

For the above config you will have this:

the-name-of-your-project
├── node_modules
└── graphql-schemas <= generated by rag
    types.ts
    └── product
        └── types.ts
    └── auth
        └── types.ts
└── src
    ├── index.tsx
    └── graphql
        ├── rag.config.js
        ├── some.graphql
        ├── some.generated.tsx <= generated by rag
        ├── me.auth.graphql
        ├── me.auth.generated.tsx <= generated by rag
        ├── item.product.graphql
        ├── item.product.generated.tsx <= generated by rag

Multiple rag.config.js files

If you like, you can have multiples files in multiples places

my-awesome-project
├── node_modules
└── src
    ├── Pages/
        ├── Login
            ├── rag.config.js // here you can configure your custom schema/options
            └── graphql
              ├── login.graphql
        ├── Products
            ├── rag.config.js // here you can configure your custom schema/options
            └── graphql
              ├── products.graphql
...

Then you can run

npx rag ./src/Pages/Login/

npx rag ./src/Pages/Products/

rag will take the first configuration file found in the path passed to the command.

After run the command you will have:

my-awesome-project
├── node_modules
└── src
    ├── Pages/
        ├── Login
            ├── rag.config.js // here you can configure your custom schema/options
            └── graphql
              ├── login.graphql
              ├── login.generated.tsx <= generated by rag
        ├── Products
            ├── rag.config.js // here you can configure your custom schema/options
            └── graphql
              ├── products.graphql
              ├── products.generated.tsx <= generated by rag
...