Enhance your [GraphQL Codegen](https://github.com/dotansimha/graphql-code-generator) workflow with this plugin that generates mock data builders based on your schema and user code operations. This plugin builds upon the capabilities of the existing [graph
npm install @wix/graphql-codegen-ts-buildersEnhance your GraphQL Codegen workflow with this plugin that generates mock data builders based on your schema and user code operations. This plugin builds upon the capabilities of the existing graphql-codegen-typescript-mock-data library.
Install the plugin using:
``bash`
yarn add -D @wix/graphql-codegen-ts-builders
Customize the behavior of the mock data builders with the following configuration options:
Specify the number of elements to generate for lists.
For more configuration options, refer to the graphql-codegen-typescript-mock-data
Install required packages:
`bash`
yarn add -D graphql typescript @graphql-codegen/cli @graphql-codegen/client-preset @wix/graphql-codegen-ts-builders
Then, add the codegen script to your package.json:
`json`
{
"scripts": {
"codegen": "graphql-codegen --config ${your-config-file}"
}
}
Now, let's create a configuration file:
Create the following `codegen.ts` configuration file:
`typescript
import type { CodegenConfig } from '@graphql-codegen/cli';
const config: CodegenConfig = {
overwrite: true,
schema: 'https://www.wix.com/graphql-server/graphql',
documents: ['src/*/.ts'],
ignoreNoDocuments: true,
generates: {
'./src/gql/': {
preset: 'client',
plugins: ['@wix/graphql-codegen-ts-builders']
},
},
};
export default config;
`
`typescript
import { graphql } from './gql';
import { aGetProductOperationResponse } from './gql/graphql';
const getProductQuery = graphql(
query getProduct($id: ID!) {
metroinspectorV1ProductsProduct(id: $id) {
id
title
}
});
const response1 = aGetProductOperationResponse();
const response2 = aGetProductOperationResponse({ getProduct: { metroinspectorV1ProductsProduct: { id: "12345"} } });
console.log(response1);
// => { getProduct: { metroinspectorV1ProductsProduct: { id: "000", title: "abc" } } }
console.log(response2);
// => { getProduct: { metroinspectorV1ProductsProduct: { id: "12345", title: "abc" } } }
`
schema.graphql
`graphql
type Address {
street: String
city: String
postalCode: Int
}
type PersonalInfo {
id: ID
name: String
age: Int
address: Address
}
type Query {
getPersonalInfo(id: ID): PersonalInfo
queryPersonalInfo: [PersonalInfo]
}
type Mutation {
updatePersonalInfo: PersonalInfo
}
`
Using the same builder for different operations and getting the relevant result
index.ts
`typescript
import { graphql } from './gql';
import { aPersonalInfo, aGetPersonalInfoOperationResponse, aQueryPersonalInfoOperationResponse } from './gql/graphql';
const getPersonalInfo = graphql(
query getPersonalInfo($id: ID!) {
getPersonalInfo(id: $id) {
id
name
}
});
const queryPersonalInfo = graphql(
query queryPersonalInfo {
queryPersonalInfo {
id
name
address {
street
city
}
}
});
const personalInfo = aPersonalInfo({ name: 'joe' });
const response1 = aGetPersonalInfoOperationResponse({ getPersonalInfo: personalInfo });
const response2 = aQueryPersonalInfoOperationResponse({ queryPersonalInfo: [ personalInfo ] });
console.log(personalInfo);
// => { id: '123', name: 'joe', age: 23, address: { street: 'a', city: 'b', postalCode: '555' } }
console.log(response1);
// => { getPersonalInfo: { id: '123', name: 'joe' } }
console.log(response2);
// => { queryPersonalInfo: [ { id: '123', name: 'joe', address: { street: 'a', city: 'b' } } ] }
`
index.ts
`typescript
import { graphql } from './gql';
import { anAddress, aGetPersonalInfoOperationResponse, aQueryPersonalInfoOperationResponse } from './gql/graphql';
const addressFragment = graphql(
fragment AddressFragment on Address {
city
street
});
const getPersonalInfo = graphql(
query getPersonalInfo($id: ID!) {
getPersonalInfo(id: $id) {
id
name
address {
...AddressFragment
}
}
});
const address = anAddress({ city: 'Tel Aviv-Yafo' });
const response = aGetPersonalInfoOperationResponse({ getPersonalInfo: { id: '777', address } });
console.log(address);
// => { street: 'a', city: 'Tel Aviv-Yafo', postalCode: '555' }
console.log(response);
// => { getPersonalInfo: { id: '777', name: 'joe', address: { street: 'a', city: 'Tel Aviv-Yafo' } } }
``
- Field alias support