Format graphql files with prettier

.prettierignore

@@ -3,6 +3,7 @@
 /public/
 /vendor/
 /tmp/
+doc/api/graphql/reference/gitlab_schema.graphql
 
 # ignore stylesheets for now as this clashes with our linter
 *.css

app/assets/javascripts/alert_management/graphql/fragments/detail_item.fragment.graphql

@@ -16,5 +16,4 @@ fragment AlertDetailItem on AlertManagementAlert {
       ...AlertNote
     }
   }
-
 }

app/assets/javascripts/alert_management/graphql/mutations/update_alert_status.mutation.graphql

@@ -4,9 +4,9 @@ mutation updateAlertStatus($projectPath: ID!, $status: AlertManagementStatus!, $
   updateAlertStatus(input: { iid: $iid, status: $status, projectPath: $projectPath }) {
     errors
     alert {
-      iid,
-      status,
-      endedAt,
+      iid
+      status
+      endedAt
       notes {
         nodes {
           ...AlertNote

app/assets/javascripts/alert_management/graphql/queries/get_alerts.query.graphql

 #import "../fragments/list_item.fragment.graphql"
 
 query getAlerts(
-    $searchTerm: String,
-    $projectPath: ID!,
-    $statuses: [AlertManagementStatus!],
-    $sort: AlertManagementAlertSort,
-    $firstPageSize: Int,
-    $lastPageSize: Int,
+  $searchTerm: String
+  $projectPath: ID!
+  $statuses: [AlertManagementStatus!]
+  $sort: AlertManagementAlertSort
+  $firstPageSize: Int
+  $lastPageSize: Int
   $prevPageCursor: String = ""
   $nextPageCursor: String = ""
 ) {
-    project(fullPath: $projectPath, ) {
+  project(fullPath: $projectPath) {
     alertManagementAlerts(
-            search: $searchTerm,
-            statuses: $statuses,
-            sort: $sort,
+      search: $searchTerm
+      statuses: $statuses
+      sort: $sort
       first: $firstPageSize
-            last: $lastPageSize,
-            after: $nextPageCursor,
+      last: $lastPageSize
+      after: $nextPageCursor
       before: $prevPageCursor
     ) {
       nodes {
         ...AlertListItem
-            },
+      }
       pageInfo {
         hasNextPage
         endCursor

app/assets/javascripts/alert_management/graphql/queries/get_count_by_status.query.graphql

-query getAlertsCount(
-    $searchTerm: String,
-    $projectPath: ID!
-) {
+query getAlertsCount($searchTerm: String, $projectPath: ID!) {
   project(fullPath: $projectPath) {
-        alertManagementAlertStatusCounts(
-            search: $searchTerm
-        ) {
+    alertManagementAlertStatusCounts(search: $searchTerm) {
       all
       open
       acknowledged

app/assets/javascripts/boards/queries/board.fragment.graphql

 fragment BoardFragment on Board {
-  id,
+  id
   name
 }

app/assets/javascripts/boards/queries/board_list_shared.fragment.graphql

 fragment BoardListShared on BoardList {
-  id,
-  title,
-  position,
-  listType,
-  collapsed,
+  id
+  title
+  position
+  listType
+  collapsed
   label {
-    id,
-    title,
-    color,
-    textColor,
-    description,
+    id
+    title
+    color
+    textColor
+    description
     descriptionHtml
   }
 }

app/assets/javascripts/design_management/graphql/mutations/update_active_discussion.mutation.graphql

 mutation updateActiveDiscussion($id: String, $source: String) {
-  updateActiveDiscussion (id: $id, source: $source ) @client
+  updateActiveDiscussion(id: $id, source: $source) @client
 }

app/assets/javascripts/design_management/graphql/mutations/upload_design.mutation.graphql

@@ -11,7 +11,7 @@ mutation uploadDesign($files: [Upload!]!, $projectPath: ID!, $iid: ID!) {
             sha
           }
         }
-      },
+      }
     }
     skippedDesigns {
       filename

app/assets/javascripts/design_management_new/graphql/mutations/update_active_discussion.mutation.graphql

 mutation updateActiveDiscussion($id: String, $source: String) {
-  updateActiveDiscussion (id: $id, source: $source ) @client
+  updateActiveDiscussion(id: $id, source: $source) @client
 }

app/assets/javascripts/design_management_new/graphql/mutations/upload_design.mutation.graphql

@@ -11,7 +11,7 @@ mutation uploadDesign($files: [Upload!]!, $projectPath: ID!, $iid: ID!) {
             sha
           }
         }
-      },
+      }
     }
     skippedDesigns {
       filename

app/assets/javascripts/ide/queries/getUserPermissions.query.graphql

 query getUserPermissions($projectPath: ID!) {
   project(fullPath: $projectPath) {
     userPermissions {
-      createMergeRequestIn,
-      readMergeRequest,
+      createMergeRequestIn
+      readMergeRequest
       pushCode
     }
   }

app/assets/javascripts/sidebar/queries/sidebarDetails.query.graphql

-query ($fullPath: ID!, $iid: String!) {
-  project (fullPath: $fullPath) {
-    issue (iid: $iid) {
+query($fullPath: ID!, $iid: String!) {
+  project(fullPath: $fullPath) {
+    issue(iid: $iid) {
       iid
     }
   }

app/assets/javascripts/sidebar/queries/sidebarDetailsForHealthStatusFeatureFlag.query.graphql

-query ($fullPath: ID!, $iid: String!) {
-  project (fullPath: $fullPath) {
-    issue (iid: $iid) {
+query($fullPath: ID!, $iid: String!) {
+  project(fullPath: $fullPath) {
+    issue(iid: $iid) {
       iid
     }
   }

app/assets/javascripts/snippets/mutations/deleteSnippet.mutation.graphql

 mutation DeleteSnippet($id: ID!) {
-  destroySnippet(input: {id: $id}) {
+  destroySnippet(input: { id: $id }) {
     errors
   }
 }

app/assets/javascripts/static_site_editor/graphql/queries/app_data.query.graphql

@@ -3,7 +3,7 @@ query appData {
     isSupportedContent
     project
     sourcePath
-    username,
+    username
     returnUrl
   }
 }

app/assets/javascripts/static_site_editor/graphql/queries/source_content.query.graphql

 query sourceContent($project: ID!, $sourcePath: String!) {
   project(fullPath: $project) {
-    fullPath,
+    fullPath
     file(path: $sourcePath) @client {
       title
       content

changelogs/unreleased/tr-prettify-graphql-files.yml

+---
+title: Format graphql files with prettier
+merge_request: 36244
+author:
+type: other

doc/development/fe_guide/tooling.md

@@ -94,13 +94,15 @@ When declaring multiple globals, always use one `/* global [name] */` line per v
 
 ## Formatting with Prettier
 
-Our code is automatically formatted with [Prettier](https://prettier.io) to follow our style guides. Prettier is taking care of formatting `.js`, `.vue`, and `.scss` files based on the standard prettier rules. You can find all settings for Prettier in `.prettierrc`.
+> Support for `.graphql` [introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/227280) in GitLab 13.2.
+
+Our code is automatically formatted with [Prettier](https://prettier.io) to follow our style guides. Prettier is taking care of formatting `.js`, `.vue`, `.graphql`, and `.scss` files based on the standard prettier rules. You can find all settings for Prettier in `.prettierrc`.
 
 ### Editor
 
 The easiest way to include prettier in your workflow is by setting up your preferred editor (all major editors are supported) accordingly. We suggest setting up prettier to run automatically when each file is saved. Find [here](https://prettier.io/docs/en/editors.html) the best way to set it up in your preferred editor.
 
-Please take care that you only let Prettier format the same file types as the global Yarn script does (`.js`, `.vue`, and `.scss`). In VSCode by example you can easily exclude file formats in your settings file:
+Please take care that you only let Prettier format the same file types as the global Yarn script does (`.js`, `.vue`, `.graphql`, and `.scss`). In VSCode by example you can easily exclude file formats in your settings file:
 
 ```json
   "prettier.disableLanguages": [
@@ -169,6 +171,9 @@ To select Prettier as a formatter, add the following properties to your User or
   },
   "[vue]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[graphql]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
 }
 ```
@@ -188,5 +193,8 @@ To automatically format your files with Prettier, add the following properties t
   "[vue]": {
     "editor.formatOnSave": true
   },
+  "[graphql]": {
+    "editor.formatOnSave": true
+  },
 }
 ```

ee/app/assets/javascripts/boards/queries/board.fragment.graphql

 fragment BoardFragment on Board {
-  id,
-  name,
+  id
+  name
   weight
 }
-

ee/app/assets/javascripts/boards/queries/board_list.fragment.graphql

 #import "~/boards/queries/board_list_shared.fragment.graphql"
 
 fragment BoardListFragment on BoardList {
-  ...BoardListShared,
-  maxIssueCount,
+  ...BoardListShared
+  maxIssueCount
   assignee {
-    id,
-    name,
-    username,
-    avatarUrl,
+    id
+    name
+    username
+    avatarUrl
     webUrl
-  },
+  }
   milestone {
-    id,
-    title,
-    webPath,
+    id
+    title
+    webPath
     description
   }
 }

ee/app/assets/javascripts/boards/queries/group_epics.query.graphql

@@ -44,7 +44,6 @@ query groupEpicsEE($fullPath: ID!) {
             }
           }
         }
-
       }
     }
   }

ee/app/assets/javascripts/epic/queries/epicDetails.query.graphql

@@ -4,8 +4,8 @@ query epicDetails($fullPath: ID!, $iid: ID!) {
       participants {
         edges {
           node {
-            name,
-            avatarUrl,
+            name
+            avatarUrl
             webUrl
           }
         }

ee/app/assets/javascripts/iterations/queries/create_iteration.mutation.graphql

 mutation createIteration($input: CreateIterationInput!) {
   createIteration(input: $input) {
     iteration {
-      title,
-      description,
-      startDate,
-      dueDate,
+      title
+      description
+      startDate
+      dueDate
       webUrl
     }
     errors

ee/app/assets/javascripts/packages/list/coming_soon/queries/issues.graphql

-query getComingSoonIssues($projectPath:ID!, $labelNames:[String]) {
-  project(fullPath:$projectPath) {
-    issues(state:opened, labelName:$labelNames) {
+query getComingSoonIssues($projectPath: ID!, $labelNames: [String]) {
+  project(fullPath: $projectPath) {
+    issues(state: opened, labelName: $labelNames) {
       nodes {
-        iid,
-        title,
-        webUrl,
+        iid
+        title
+        webUrl
         labels {
           nodes {
-            title,
+            title
             color
           }
-        },
+        }
         milestone {
           title
         }

ee/app/assets/javascripts/roadmap/queries/groupEpics.query.graphql

@@ -25,7 +25,9 @@ query groupEpics(
       edges {
         node {
           ...BaseEpic
-          parent { id }
+          parent {
+            id
+          }
         }
       }
     }

ee/app/assets/javascripts/security_dashboard/graphql/delete_project_from_security_dashboard.mutation.graphql

 mutation deleteProjectFromSecurityDashboard($id: ID!) {
-  removeProjectFromSecurityDashboard(input: {id: $id}) {
+  removeProjectFromSecurityDashboard(input: { id: $id }) {
     errors
   }
 }

ee/app/assets/javascripts/security_dashboard/graphql/dismissVulnerability.graphql

-mutation ($id: ID!, $comment: String! ) {
-  dismissVulnerability(input: {id: $id, comment: $comment}) {
+mutation($id: ID!, $comment: String!) {
+  dismissVulnerability(input: { id: $id, comment: $comment }) {
     errors
     vulnerability {
       id

ee/app/assets/javascripts/security_dashboard/graphql/group_vulnerabilities.graphql

@@ -24,8 +24,8 @@ query group(
       reportType: $reportType
       state: $state
       projectId: $projectId
-    ){
-      nodes{
+    ) {
+      nodes {
         ...Vulnerability
       }
       pageInfo {

ee/app/assets/javascripts/security_dashboard/graphql/group_vulnerability_history.graphql

-query groupVulnerabilityHistory(
-  $fullPath: ID!
-  $startDate: ISO8601Date!
-  $endDate: ISO8601Date!
-) {
+query groupVulnerabilityHistory($fullPath: ID!, $startDate: ISO8601Date!, $endDate: ISO8601Date!) {
   group(fullPath: $fullPath) {
     vulnerabilitiesCountByDayAndSeverity(startDate: $startDate, endDate: $endDate) {
       nodes {

ee/app/assets/javascripts/security_dashboard/graphql/vulnerablity_severities_count.fragment.graphql

-fragment VulnerabilitySeveritiesCount on Project{
-  vulnerabilitySeveritiesCount{
+fragment VulnerabilitySeveritiesCount on Project {
+  vulnerabilitySeveritiesCount {
     critical
     high
     info

ee/app/assets/javascripts/sidebar/queries/group_iterations.query.graphql

 query groupIterations($fullPath: ID!, $title: String) {
   group(fullPath: $fullPath) {
-    iterations (title: $title) {
+    iterations(title: $title) {
       nodes {
         id
         title

ee/app/assets/javascripts/sidebar/queries/issue_iteration.query.graphql

 query issueSprint($fullPath: ID!, $iid: String!) {
   project(fullPath: $fullPath) {
-    issue (iid: $iid) {
+    issue(iid: $iid) {
       iteration {
         id
         title

ee/app/assets/javascripts/sidebar/queries/set_iteration_on_issue.mutation.graphql

-
 mutation updateIssueConfidential($projectPath: ID!, $iid: String!, $iterationId: ID) {
-  issueSetIteration(input: {projectPath: $projectPath, iid: $iid, iterationId: $iterationId}) {
+  issueSetIteration(input: { projectPath: $projectPath, iid: $iid, iterationId: $iterationId }) {
     errors
     issue {
       iteration {

ee/app/assets/javascripts/sidebar/queries/sidebarDetails.query.graphql

-query ($fullPath: ID!, $iid: String!) {
-  project (fullPath: $fullPath) {
-    issue (iid: $iid) {
+query($fullPath: ID!, $iid: String!) {
+  project(fullPath: $fullPath) {
+    issue(iid: $iid) {
       iid
     }
   }

ee/app/assets/javascripts/sidebar/queries/sidebarDetailsForHealthStatusFeatureFlag.query.graphql

-query ($fullPath: ID!, $iid: String!) {
-  project (fullPath: $fullPath) {
-    issue (iid: $iid) {
+query($fullPath: ID!, $iid: String!) {
+  project(fullPath: $fullPath) {
+    issue(iid: $iid) {
       healthStatus
     }
   }

ee/app/assets/javascripts/vulnerabilities/graphql/project_vulnerabilities.graphql

@@ -11,13 +11,13 @@ query project(
 ) {
   project(fullPath: $fullPath) {
     vulnerabilities(
-      after:$after
-      first:$first
+      after: $after
+      first: $first
       severity: $severity
       reportType: $reportType
       state: $state
-    ){
-      nodes{
+    ) {
+      nodes {
         ...Vulnerability
       }
       pageInfo {

scripts/frontend/prettier.js

@@ -3,7 +3,7 @@ const prettier = require('prettier');
 const fs = require('fs');
 const { getStagedFiles } = require('./frontend_script_utils');
 
-const matchExtensions = ['js', 'vue'];
+const matchExtensions = ['js', 'vue', 'graphql'];
 
 // This will improve glob performance by excluding certain directories.
 // The .prettierignore file will also be respected, but after the glob has executed.

spec/fixtures/api/graphql/introspection.graphql

 # pulled from GraphiQL query
 query IntrospectionQuery {
   __schema {
-    queryType { name }
-    mutationType { name }
-    subscriptionType { name }
+    queryType {
+      name
+    }
+    mutationType {
+      name
+    }
+    subscriptionType {
+      name
+    }
     types {
       ...FullType
     }
@@ -54,7 +60,9 @@ fragment FullType on __Type {
 fragment InputValue on __InputValue {
   name
   description
-  type { ...TypeRef }
+  type {
+    ...TypeRef
+  }
   defaultValue
 }