Unknown directive "client"

[pitops]

Using Apollo Client with gql

Consider the following query

mutation SET_FILTERS_MUTATION($fromDate: String!, $toDate: String!) {
    setFilters(fromDate: $fromDate, toDate: $toDate) @client
  }

The @client is not recognised by the plugin. Am I doing something wrong here?

eslint settings

rules: {
    'graphql/template-strings': [
      'error',
      {
        env: 'apollo',
        tagName: 'gql',
        projectName: 'app'
      }
    ]
  }

[JayKan]

I'm also having the similar issue, I believe the PR is currently being reviewed here 👍

[sampsonjoliver]

https://github.com/apollographql/eslint-plugin-graphql/pull/117 hasn't had any movement for almost a year. This is a pretty significant issue to using the lint plugin within the apollo ecosystem.

[Nnoerregaard]

I experienced this problem as well and fixed it by upgrading the apollo CLI tooling to the latest version (currently 2.22.0). I had a project on 2.18.x for which the problem did not occur and one with an identical eslint setup on 2.16.x where it did occur. It seems that somewhere between 2.16.x and 2.18.x apollo client:download-schema must have been fixed to correctly include the directives that the backend accepts in the schema.json file it generates)

[sampsonjoliver]

I can confirm after updating graphql and apollo that the schema file generated after running apollo client:download-schema does include the client directive.

But the linter still fails on annotated fields that don't exist in the schema. So while the directive is recognised, the field still throws an error.

[sirugh]

But the linter still fails on annotated fields that don't exist in the schema. So while the directive is recognised, the field still throws an error.

I am seeing the same issue. Here's the query:

const GET_CHECKOUT_STEP = gql`
    query getCheckoutStep {
        # The current checkout step, stored locally for persistence.
        checkoutStep @client
    }
`;

and here's the lint error:

25:9 error Cannot query field "checkoutStep" on type "Query". Did you mean "checkoutAgreements"? graphql/template-strings

[mikeyrt16]

It's super annoying to not have full linter support for something so seemingly popular.

A workaround is to add something like this to your local schema definitions (https://graphql-code-generator.com/docs/integrations/apollo-local-state)

type User {
  isLoggedIn: Boolean!
}

directive @client on FIELD <---- This

I prevents the linting error, but obviously doesn't give us complete confidence that it's being used appropriately. Putting @client on a server field or missing it from a locally field both pass, but at least it still allows your linter to pass... For the love of God, someone point me to a library/plugin I've overlooked!

[penx]

A bit hacky but something like this in .eslintrc.js may help those using a local json file:

const schema = require('./schema.json');

schema.__schema.directives.push({
	name: 'client',
	locations: ['FIELD'],
	args: [],
});

module.exports = {
	rules: {
		'graphql/template-strings': [
			'warn',
			{
				env: 'apollo',
				schemaJson: schema,
			},
		],
	},
	plugins: ['graphql'],
};