@wix/graphql-codegen-ts-builders
Description
Enhance 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.
Installation
Install the plugin using:
yarn add -D @wix/graphql-codegen-ts-buildersConfiguration
Customize the behavior of the mock data builders with the following configuration options:
terminateCircularRelationships (boolean, defaultValue: false)
listElementCount (number, defaultValue: 1)
Specify the number of elements to generate for lists.
For more configuration options, refer to the graphql-codegen-typescript-mock-data
Usage
Install required packages:
yarn add -D graphql typescript @graphql-codegen/cli @graphql-codegen/client-preset @wix/graphql-codegen-ts-buildersThen, add the codegen script to your package.json:
{
"scripts": {
"codegen": "graphql-codegen --config ${your-config-file}"
}
}Now, let's create a configuration file:
Configuration
Create the following codegen.ts configuration file:
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;Example Code
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" } } }More Code Examples
schema.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
}Builders Reuse
Using the same builder for different operations and getting the relevant result
index.ts
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' } } ] }Using Fragments
index.ts
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' } } }Next Features
- Field alias support