@tmikeschu/graphql-typescript-response-factories

graphql-typescript-response-factories

This graphql-code-generator plugin generates factory methods for the react-apollo MockedResponses that are used for testing client-side GraphQL code.

I.e. for a given query like:

query GetAuthorSummaries {
  authorSummaries {
    author {
      name
    }
  }
}

This plugin will generate a newGetAuthorSummariesResponse factory function:

export function newGetAuthorSummariesResponse(
  data: GetAuthorSummariesQuery | Error,
): MockedResponse<GetAuthorSummariesQueryVariables, GetAuthorSummariesQuery> {
  return {
    request: { query: GetAuthorSummariesDocument },
    result: { data: data instanceof Error ? undefined : data },
    error: data instanceof Error ? data : undefined,
  };
}

That you can use in a test like:

const response = newGetAuthorSummariesResponse({
  // Use newAuthorSummary from the graphql-typescript-factories project
  authorSummaries: [newAuthorSummary()],
});

// Something react-testing-library's render
const component = render(
  <MockedProvider mocks={[response]}>
    <YourComponent />
  </MockedProvider>,
);

Or you can simulate an error with:

const response = newGetAuthorSummariesResponse(new Error("bad"));

For non-react-apollo-specific factories for the rest of your GraphQL schema's types, see the graphql-typescript-factories sister project.

Install

npm -i @tmikeschu/graphql-typescript-response-factories

Add the plugin to your graphql-codegen.yml, i.e.:

overwrite: true
schema: ./schema.json
documents: src/**/*.graphql
generates:
  src/generated/graphql-types.tsx:
    plugins:
      - typescript
      - typescript-operations
      - typescript-react-apollo
      - "@tmikeschu/graphql-typescript-factories"
      - "@tmikeschu/graphql-typescript-response-factories"

License

MIT