GitLab Next

I've noticed some churn on graphql file changes recently, mostly for trailing commas and indentation.

Prettier is capable of linting graphql query files. If we enable this option in our prettier script and editors, we'll have consistent formatting across our files. This will reduce file churn and improve readability.

It's worth noting that there may be some extra setup steps required for each developer due to .graphql not being a supported file type by VSCode. More detail at https://github.com/prettier/prettier-vscode/issues/989. This doesn't seem to be an issue any more, confirmed by testing it locally.

Instructions for this should be added to the frontend tooling guide: https://docs.gitlab.com/ee/development/fe_guide/tooling.html.

Roll-out phases

• Announce on internal development channels - #f_graphql and #frontend.
• Merge !36244 (merged).
• Add to frontend weekly agenda.
• Announce again on internal development channels.

:sparkles: **Note** GraphQL files are now formatted with prettier.

To avoid conflicts and build failures, please incorporate the latest changes from master.

_*What does this mean for me?*_
Regardless of whether you're modifying graphql files or not, you should ensure your editor is up-to-date with the latest formatting rules. There are some details here: https://docs.gitlab.com/ee/development/fe_guide/tooling.html#formatting-with-prettier.

For example, if you're using VSCode you may want to add the following to your workspace preferences:
\```
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true"
  }
\```

Related to: #219337