Today I learned: appsync and description fields.

·

2 min read

TLDR:

Install eslint =>

npm install -D eslint eslint-plugin-graphql

Add to your eslint settings =>

"overrides": [
    {
      "files": ["schema.graphql"],
      "extends": "plugin:@graphql-eslint/schema-recommended",
      "rules": {
        "@graphql-eslint/description-style": [1,{"style": "inline"}],
        "@graphql-eslint/no-hashtag-description": 0
      }
    }
  ]

Add to parser options

 "parserOptions": {
    "schema": ["./schema.graphql"]//  <= ADD THIS LINE
  },

Appsync and description fields

Appsync does not recognize modern field descriptions in GraphQL schema. For example, it does not recognize triple quotes.

  """
  This is usename description! BUT APPSYNC does not catch this description
  """
  name: String!

But Appsync support descriptions with #.


  # This is usename description! Appsync can handle it
  name: String!

Coming to the rescue, I installed the ESLint plugin, which can check descriptions.

npm install -D eslint eslint-plugin-graphql

Create file .eslintrc.json with eslint settings in root directory. With this content

{
  "env": {
    "browser": false,
    "es6": true,
    "node": true
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": "tsconfig.json",
    "sourceType": "module",
    "schema": ["./schema.graphql"],
    "ecmaVersion": 2022
  },
  "plugins": ["@typescript-eslint", "jest", "prettier","unicorn","json-format"],
  "extends": [
    "eslint:recommended"
  ],
  "overrides": [
    {
      "files": ["schema.graphql"],
      "extends": "plugin:@graphql-eslint/schema-recommended",
      "rules": {
        "@graphql-eslint/description-style": [1,{"style": "inline"}],
        "@graphql-eslint/no-hashtag-description": 0,
        "@graphql-eslint/require-description": 0
      }
    }
  ]
}

The most important part of overriding this row

"@graphql-eslint/description-style": [1,{"style": "inline"}],

And this

"@graphql-eslint/no-hashtag-description": 0,
"overrides": [
    {
      "files": ["schema.graphql"],
      "extends": "plugin:@graphql-eslint/schema-recommended",
      "rules": {
        "@graphql-eslint/description-style": [1,{"style": "inline"}],
        "@graphql-eslint/no-hashtag-description": 0,
        "@graphql-eslint/no-unreachable-types": 0,
        "@graphql-eslint/strict-id-in-types": 0,
        "@graphql-eslint/no-typename-prefix": 0,
        "@graphql-eslint/naming-convention": 0,
        "@graphql-eslint/require-description": 0
      }
    }
  ]