@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:

``bash
yarn add -D @wix/graphql-codegen-ts-builders
`

Configuration

Customize the behavior of the mock data builders with the following configuration options:

$3

$3

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:

`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:

Configuration

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;
`

Example Code

`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" } } }
`

More Code Examples

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
}
`

$3

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' } } ] }
`

$3

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' } } }
``

Next Features

- Field alias support