[Relay Modern] Custom Relay client-side directives

[alloy]

Relay adds a bunch of directives you can use in your fragments, but those directives are not defined in the server’s schema, which is why I assume this service complains about the directive being unknown.

See the @argumentDefinitions and @connection examples here:

Is there built-in support yet that would allow me to define these directives or do you have suggestions about where/how it should be fixed?

[Mayank1791989]

relay-modern support is already added in v3 (will be released soon). For now you can disable directive validation to suppress errors.

query: {
    files: [
      {
        match: 'path/to/files',
        parser: [ 'EmbeddedQueryParser', { startTag: 'graphql`' endTag: '`' } ],
        validate: {
          extends: 'gql-rules-query-relay',
          rules: {
            // disable directive validation
            KnownDirectives: 'off'
          },
        }
      },
    ]
  }

[alloy]

Nice, thanks for the tip 👍 Looking forward to v3!

[harleyguru]

what about for AWS AppSync service? Currently, its popping out the errors for @aws_subscribe directives.

[Mayank1791989]

@harleyguru You have to add @aws_subscribe directive type definition in schema file.

[harleyguru]

Hi @Mayank1791989 Thanks for your response. but its custom directive defined by AppSync itself internally.

Can you give me more detailed guide for fixing this issue pls?

[Mayank1791989]

@harleyguru share your .gqlconfig.

[harleyguru]

Here it is, hope your kindness help..

/* .gqlconfig */
 {
   schema: {
     files: '**/*.gql'
   },
   query: {
     files: [ /* define file paths which you'd like the gql parser to watch and give autocomplete suggestions for */
       {
         match: '**/*.js', // for js
         parser: ['EmbeddedQueryParser', { startTag: 'Relay\\.QL`', endTag: '`' }],
         isRelay: true,
       },
       {
         match: '**/*.feature', // for gherkin
         parser: ['EmbeddedQueryParser', { startTag: 'graphql request\\s+"""', endTag: '"""' }],
       },
       {
         "match": "**/*.rb", // sample config you might use for Ruby-aware highlighting (inside `<<-GRAPHQL` heredocs)
         "parser": ["EmbeddedQueryParser", { "startTag": "<<-GRAPHQL", "endTag": "GRAPHQL" }]
       },
       {
         match: '**/*.gql',
         parser: 'QueryParser',
         validate: {
            extends: 'gql-rules-query',
            rules: {
                KnownDirectives: 'off'
            }
        }
       },
     ],
   },
 }

[Mayank1791989]

@harleyguru which graphql client are you using?

[harleyguru]

I am using AWS AppSync service for GraphQL endpoint and it defines and uses @aws_subscribe directive internally in Schema.

I am not working on client yet, but the plan is to use Apollo react client and AWS JS SDK.

[harleyguru]

@Mayank1791989 As a note, just now I've suppressed by doing following: defined directive @aws_subscribe(mutations: [String]) on FIELD_DEFINITION in schema

This suppressed all errors but I think we shouldn't do this since AppSync schema doesn't require to do it. So I think this should be supported by your .gqlconfig.

Btw, AppSync will be best popular GraphQL service in the near future. I hope you will focus on the support for AppSync in the future. Thanks for your great extension

[Mayank1791989]

@harleyguru

As a note, just now I've suppressed by doing following: defined directive @aws_subscribe(mutations: [String]) on FIELD_DEFINITION in schema

Yes you have to define directive like this and any other aws specific schema.

we shouldn't do this since AppSync schema doesn't require to do it. So I think this should be supported by your .gqlconfig.

There are so many ways to implement server and client and its very hard to include all use cases in this project. To solve this I have added presets option in v3 and we can create new presets for different use cases externally.

Also there is no need to copy whole sample config file. This will work for you.

{
   schema: {
     files: '**/*.gql'
   },
   query: {
     files: [
     // config for apollo
       {
         match: '**/*.js', // for js
         parser: ['EmbeddedQueryParser', { startTag: 'gql`', endTag: '`' }],
       },
      ]
   },
 }

[harleyguru]

@Mayank1791989 Thanks for your digging into the problem with me. So I am not sure how I can use that preset for AppSync?

[Mayank1791989]

@harleyguru

{
   schema: {
     files: '**/*.gql',
    // aws-app-sync is a  npm package which defines all config specific to aws app sync.
    // This is same as how we create presets in babel or eslint.
     presets: ["aws-app-sync"] 
   },
   query: {
     files: [
     // config for apollo
       {
         match: '**/*.js', // for js
         presets: ["apollo"]
       },
      ]
   },
 }

[harleyguru]

oh thanks, so I need to install aws-appsync preset in order to make this working and switch to v3 branch?

then how can I install your v3 branch in VS Code? sorry with too many questions.. This is first time for using VS Code extensions.

[Mayank1791989]

@harleyguru It's not released yet and also someone has to create preset aws-appsync (may be you :) ). presets option is added so that community can easily add (share) support for different use cases rather than relying on this project to add support.

[harleyguru]

ahh I see, Thanks for your notice and help so far @Mayank1791989 Yeah, I'd love to contribute for this project regarding this feature since your extension is helping me a lot actually.

Just not sure how to contribute and approach as its first time for me.

[kumarharsh]

We'll figure something out for creating presets in the coming weeks. We can track that in a separate issue. Thanks for your patience 😊

[harleyguru]

Yeah, that will be great feature since there are a lot of kinds for GQL services these days. good job!