Schema Definition with custom scalars from AWS Amplify

[ChrisSargent]

I'm trying to generate Typescript typings from some schema files used with AWS Amplify. An example type is like this:

type Record {
  id: ID
  createdBy: ID
  created: AWSTimestamp
  modified: AWSTimestamp
}

I have tried setting my config.yml as follows:

overwrite: true
schema: "amplify/backend/api/blockgraph/schema/*.graphql"
generates:
  src/generated/graphql.ts:
    config:
      scalars:
         AWSTimestamp: string
    plugins:
      - "typescript"

Trying to run the codegen, I get the error, Error: Unknown type: "AWSTimestamp".

If I add scalar AWSTimestamp to the graphql file, it does compile correctly. But I'm wondering if I can avoid having to add the scalar to the graphql file and instead import some file from Amplify (I'm quite new to Graphql so not sure if this can even be done)?

[ChrisSargent]

I see Amplify has this file, https://github.com/aws-amplify/amplify-cli/blob/master/packages/amplify-codegen/awsAppSyncDirectives.graphql, so I guess if I 'imported' that, it would include those definitions. Seems like this should be done in the 'documents' part of the config. However, this is a globally installed node_module so not certain how to reference it.

Edit - seems to work by including the file as an extra schema file

[amaingot]

I think the content of that file has been moved to this file: https://github.com/aws-amplify/amplify-cli/blob/master/packages/amplify-codegen-appsync-model-plugin/src/scalars/supported-directives.ts

So it should be now:

schema:
  - my-schema.graphql
  - github:aws-amplify/amplify-cli#master:packages/amplify-codegen-appsync-model-plugin/src/scalars/supported-directives.ts

I found that including the scheme that way caused me issues. I saved this file locally and included it in my codegen.yaml like so:

schema:
  - "amplify/backend/api/{API_NAME}/build/schema.graphql"
  - "awsAppsyncDirectives.graphql"

[tombuckley91]

Before this file gets moved again!

scalar AWSTime
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

[cjjenkinson]

Create a file aws.gql co-locate it with your generated schema or typed schema schema.gql with the following:

scalar AWSTime
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

Codegen config

schema: 
  - ./path-to-your-schema-files/schema.gql
  - ./path-to-your-schema-files/aws.gql
generates:
  ./src/types/schema.ts:
    config:
      scalars:
        AWSDateTime: Date
        AWSEmail: string
        AWSJSON: string
        AWSURL: string
        AWSTimestamp: string
    plugins:
      - typescript
      - typescript-operations
      - typescript-resolvers

[jjatzkowski]

I separated scalars and directives into two files: aws-scalars.gql and aws-directives.gql. The content for directives I took from Amplify Codegen source. This helped me to make Android Studio and the GraphQL plugin happy.

[hasan-aa]

The file didn't move but the content has changed. I had to get the file from the repo to make it work.

[SiddHyper]

How to achieve same with codegen.ts

[japfohl]

@SiddHyper, this is what I did specifically for a react app.

import { CodegenConfig } from "@graphql-codegen/cli";

const config: CodegenConfig = {
  schema: [
    "path-to-your-schema-files/schema.graphql",
    "path-to-your-aws-schema-files/aws.gql",
  ],
  documents: ["src/**/*.tsx"],
  ignoreNoDocuments: true
  generates: {
    "./src/gql/": {
      preset: "client",
      config: {
        scalars: {
          AWSDateTime: "Date",
          AWSEmail: "string",
          AWSJSON: "string",
          AWSURL: "string",
          AWSTimestamp: "string",
        },
      },
    },
  },
};

export default config;

[lzygmanski]

npm install -D @aws-amplify/amplify-appsync-simulator

import type { CodegenConfig } from "@graphql-codegen/cli";
import { wrapSchema } from "@aws-amplify/amplify-appsync-simulator/lib/schema/appsync-scalars";

const scalarStrings = wrapSchema("");

const config: CodegenConfig = {
  overwrite: true,
  schema: [scalarStrings, "./**/schemas/**/*.graphql"],
  generates: {
     ...
  },
};

export default config;

[misha-erm]

this approach results in any for all aws directives. Did you manage to overcome this?

[deeja]

I had similar issues generating the Amplify C# code. I've added a gist here for anyone generating those https://gist.github.com/deeja/50ff900a0780ba8c5afa0785e008be0f