The most successful dev work smart, not hard.
A cli to generate graphql react hooks using graphql-codegen with support for multiples schemas.
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
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.
},
],
};
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
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
...