GraphQL Code Generator setup for AppSync

README.md

Codegen

Configure AWS console

aws configure sso

# Role: PowerUser
# Profile name: Enter 'default' to make this the default profile used for all AWS commands 

Re-authenticate to AWS, if needed:

aws sso login

Download the latest schema and generate api.ts code from schema + queries + mutations:

yarn get-schema
yarn codegen

Writing queries / mutations

Write queries/mutations/fragments in separate .graphql files. (Not gql within JS files) Reference the generated SomeQueryNameDocument objects with useQuery for strong typing.

appsync.graphql

scalar AWSTime
scalar AWSDate
scalar AWSDateTime
scalar AWSTimestamp
scalar AWSEmail
scalar AWSJSON
scalar AWSURL
scalar AWSPhone
scalar AWSIPAddress
scalar BigInt
scalar Double

directive @aws_subscribe(mutations: [String!]!) on FIELD_DEFINITION

# Allows transformer libraries to deprecate directive arguments.
directive @deprecated(reason: String!) on INPUT_FIELD_DEFINITION | ENUM

directive @aws_auth(cognito_groups: [String!]!) on FIELD_DEFINITION
directive @aws_api_key on FIELD_DEFINITION | OBJECT
directive @aws_iam on FIELD_DEFINITION | OBJECT
directive @aws_oidc on FIELD_DEFINITION | OBJECT
directive @aws_cognito_user_pools(
    cognito_groups: [String!]
) on FIELD_DEFINITION | OBJECT
directive @aws_lambda(
    cognito_groups: [String!]
) on FIELD_DEFINITION | OBJECT

codegen.yml

# Config for GraqhQL Code Generator https://www.graphql-code-generator.com/docs/plugins/typescript
# Example: https://github.com/aws-amplify/amplify-codegen/issues/34#issuecomment-768268382
overwrite: true
schema:
  - "src/graphql/appsync.graphql"
  - "src/graphql/schema.graphql"
documents:
  - "src/graphql/(queries|mutations|subscriptions).ts"
  - "src/graphql/operations/*.graphql"
generates:
  src/graphql/api.ts:
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typed-document-node"
  src/graphql/introspection-schema.json:
    plugins:
      - "introspection"
config:
  scalars:
    AWSJSON: string
    AWSDate: string
    AWSTime: string
    AWSDateTime: string
    AWSTimestamp: number
    AWSEmail: string
    AWSURL: string
    AWSPhone: string
    AWSIPAddress: string
    Queue: string

package.json

{
  "scripts": {
    "get-schema": "aws appsync get-introspection-schema --api-id abcdef12345 --format SDL ./src/graphql/schema.graphql",
    "codegen": "DEBUG=1 graphql-codegen --config codegen.yml",
  }
}