GraphQL queries written on the client-side are currently not validated in our build process. This can lead to bugs e.g.: - querying for something that doesn't exist - duplicate query definitions We should be able to leverage [`eslint-plugin-graphql`](https://github.com/apollographql/eslint-plugin-graphql) to lint our `.graphql` files against our schema. ## Why? The addition of such a set of tooling would: - boost productivity of anyone writing GraphQL queries in `gitlab-org/gitlab` - reduce code review duration when `.graphql` files are involved - reduce occurrence of bugs ## How? @tomquirk briefly explored this in https://gitlab.com/gitlab-org/gitlab/-/merge_requests/33242, however came across some issues listed in the section below ### Issues that need to be resolved - [ ] Some of our queries contain a [`@client` directive](https://www.apollographql.com/docs/tutorial/local-state/#query-local-data) (e.g. https://gitlab.com/gitlab-org/gitlab/blob/c97c456dfa878acdc755f97326d40f77d5f4bee4/app/assets/javascripts/design_management/graphql/queries/active_discussion.query.graphql#L4), and `eslint-plugin-graphql` can't seem to handle this case out of the box. - [ ] `eslint-plugin-graphql` doesn't seem to catch duplicate query definitions, whereas the [Apollo extension for VS Code does](https://github.com/apollographql/apollo-tooling/tree/master/packages/vscode-apollo)