"Unknown directive model" when setting up AWS Amplify GraphQL API in WebStorm

Question

I'm using the following AWS Amplify tutorial for Angular:

https://docs.amplify.aws/start/getting-started/data-model/q/integration/angular#model-the-data-with-graphql-transform

When I generate the GraphQL API I get red warning messages for the @model directive:

I'm using WebStorm. How can I get my editor to not throw these red warning errors? Do I need to install some @types package or install some plugin?

Answer 1

First, create .graphqlconfig file with the following content:

{
  "schemaPath": "schema.graphql",
  "includes": ["*"],
  "extensions": {
    "endpoints": {}
  }
}

Then, create graphql-directives.js file with the following content:

import gql from 'graphql-tag';

const clientSchemaExtensions = gql`
  directive @model on OBJECT
  scalar AWSDateTime
`;

After that, there are no syntax errors anymore!

This answer was adapted from this repo.