@newmo/graphql-codegen-plugin-type-guards

GraphQL Codegen Plugin to create TypeScript type guards for GraphQL types.

type RideHistory {
    "ID of the ride history."
    id: ID!

    "Destination of the ride history."
    destination: Destination!
}

enum DestinationType {
    "Airport"
    AIRPORT

    "Station"
    STATION

    "City"
    CITY
}

type Destination {
    "ID of the destination."
    id: ID!

    "Name of the destination."
    name: String! @exampleString(value: "Osaka")

    "Type of the destination."
    type: DestinationType!
}

"""
Error interface
"""
interface Error {
    "Error message."
    message: String!
    "Localized error message."
    localizedMessage: String!
}
type TextError implements Error {
    "Error message."
    message: String!

    "Localized error message."
    localizedMessage: String!
}
"""
Specified Error type for createRideHistory mutation.
"""
type CreateRideHistoryErrorDetails implements Error{
    code: Int!
    message: String!
    localizedMessage: String!
}
union ErrorUnion = TextError | CreateRideHistoryErrorDetails

->

// Type guard for each type
export const isDestination = (field: { __typename?: string; }): field is Destination => field.__typename === 'Destination';
export const isRideHistory = (field: { __typename?: string; }): field is RideHistory => field.__typename === 'RideHistory';
// Union type guard
export const isCreateRideHistoryErrorDetails = (field: { __typename?: string; }): field is CreateRideHistoryErrorDetails => field.__typename === 'CreateRideHistoryErrorDetails';
export const isTextError = (field: { __typename?: string; }): field is TextError => field.__typename === 'TextError';
export const isErrorUnion = (field: { __typename?: string; }): field is ErrorUnion => {
    if(field.__typename === undefined) return false;
    return ["CreateRideHistoryErrorDetails","TextError"].includes(field.__typename);
};

Install

Install with npm:

npm install @newmo/graphql-codegen-plugin-type-guards --save-dev
# This plugin depends on @graphql-codegen/client-preset
npm install @graphql-codegen/cli @graphql-codegen/client-preset @graphql-typed-document-node/core --save-dev

Usage

You need to it with Client preset.

Your graphql-codegen.ts should look like this:

import type { CodegenConfig } from '@graphql-codegen/cli';
const config: CodegenConfig = {
    overwrite: true,
    schema: "./api/graphql/api.graphqls",
    documents: "./api/graphql/query.graphql",
    generates: {
        // generates types to api/generated/*
        './api/generated/': {
            preset: 'client',
            config: {
                // Required: type guard function depends on non-optional `__typename` field
                nonOptionalTypename: true,
            },
            plugins: [
                '@newmo/graphql-codegen-plugin-typescript-type-guards',
            ],
        },
    }
};

export default config;

Run codegen:

$ graphql-codegen --config graphql-codegen.ts

Options

• namingConvention (optional): Naming convention for the generated types. Default is change-case#pascalCase.
  • Naming Convention
• typesPrefix (optional): Prefix for the generated types.
• typesSuffix (optional): Suffix for the generated types.

Example output

See test/snapshots/typescript/graphql.ts for example output.

Changelog

See Releases page.

Running tests

Install devDependencies and Run npm test:

npm test

Contributing

Pull requests and stars are always welcome.

For bugs and feature requests, please create an issue.

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

License

MIT © newmo, Inc.