Skip to main content

Command Palette

Search for a command to run...

Today I learned: appsync and description fields.

Published
2 min read
A

developer

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
      }
    }
  ]

More from this blog

Yet another blog

9 posts

Blog about AWS, Cloud, and JavaScript.