Pre-fetch GraphQL requests with startupJS

app/assets/javascripts/snippets/components/snippet_blob_view.vue

 <script>
+import GetBlobContent from 'shared_queries/snippet/snippet_blob_content.query.graphql';
+
 import BlobHeader from '~/blob/components/blob_header.vue';
 import BlobContent from '~/blob/components/blob_content.vue';
 
-import GetBlobContent from '../queries/snippet.blob.content.query.graphql';
-
 import {
   SIMPLE_BLOB_VIEWER,
   RICH_BLOB_VIEWER,
@@ -21,7 +21,7 @@ export default {
       query: GetBlobContent,
       variables() {
         return {
-          ids: this.snippet.id,
+          ids: [this.snippet.id],
           rich: this.activeViewerType === RICH_BLOB_VIEWER,
           paths: [this.blob.path],
         };

app/assets/javascripts/snippets/components/snippet_header.vue

@@ -11,12 +11,12 @@ import {
   GlButton,
   GlTooltipDirective,
 } from '@gitlab/ui';
+import CanCreatePersonalSnippet from 'shared_queries/snippet/user_permissions.query.graphql';
+import CanCreateProjectSnippet from 'shared_queries/snippet/project_permissions.query.graphql';
 import { __ } from '~/locale';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 
 import DeleteSnippetMutation from '../mutations/deleteSnippet.mutation.graphql';
-import CanCreatePersonalSnippet from '../queries/userPermissions.query.graphql';
-import CanCreateProjectSnippet from '../queries/projectPermissions.query.graphql';
 import { joinPaths } from '~/lib/utils/url_utility';
 import { fetchPolicies } from '~/lib/graphql';
 

app/assets/javascripts/snippets/mixins/snippets.js

-import GetSnippetQuery from '../queries/snippet.query.graphql';
+import GetSnippetQuery from 'shared_queries/snippet/snippet.query.graphql';
 
 const blobsDefault = [];
 
@@ -8,7 +8,7 @@ export const getSnippetMixin = {
       query: GetSnippetQuery,
       variables() {
         return {
-          ids: this.snippetGid,
+          ids: [this.snippetGid],
         };
       },
       update: data => {

app/assets/javascripts/snippets/queries/snippet.query.graphql

-#import '../fragments/snippetBase.fragment.graphql'
-#import '../fragments/project.fragment.graphql'
-#import "~/graphql_shared/fragments/author.fragment.graphql"
-
-query GetSnippetQuery($ids: [ID!]) {
-  snippets(ids: $ids) {
-    nodes {
-      ...SnippetBase
-      ...SnippetProject
-      author {
-        ...Author
-      }
-    }
-  }
-}

app/assets/javascripts/snippets/queries/projectPermissions.query.graphql → app/graphql/queries/snippet/project_permissions.query.graphql

 query CanCreateProjectSnippet($fullPath: ID!) {
   project(fullPath: $fullPath) {
+    __typename
     userPermissions {
+      __typename
       createSnippet
     }
   }

app/graphql/queries/snippet/snippet.query.graphql

+query GetSnippetQuery($ids: [ID!]) {
+  snippets(ids: $ids) {
+    __typename
+    nodes {
+      __typename
+      id
+      title
+      description
+      descriptionHtml
+      createdAt
+      updatedAt
+      visibilityLevel
+      webUrl
+      httpUrlToRepo
+      sshUrlToRepo
+      blobs {
+        __typename
+        nodes {
+          __typename
+          binary
+          name
+          path
+          rawPath
+          size
+          externalStorage
+          renderedAsText
+          simpleViewer {
+            __typename
+            collapsed
+            renderError
+            tooLarge
+            type
+            fileType
+          }
+          richViewer {
+            __typename
+            collapsed
+            renderError
+            tooLarge
+            type
+            fileType
+          }
+        }
+      }
+      userPermissions {
+        __typename
+        adminSnippet
+        updateSnippet
+      }
+      project {
+        __typename
+        fullPath
+        webUrl
+      }
+      author {
+        __typename
+        id
+        avatarUrl
+        name
+        username
+        webUrl
+      }
+    }
+  }
+}

app/assets/javascripts/snippets/queries/snippet.blob.content.query.graphql → app/graphql/queries/snippet/snippet_blob_content.query.graphql

 query SnippetBlobContent($ids: [ID!], $rich: Boolean!, $paths: [String!]) {
   snippets(ids: $ids) {
+    __typename
     nodes {
+      __typename
       id
       blobs(paths: $paths) {
+        __typename
         nodes {
+          __typename
           path
           richData @include(if: $rich)
           plainData @skip(if: $rich)

app/assets/javascripts/snippets/queries/userPermissions.query.graphql → app/graphql/queries/snippet/user_permissions.query.graphql

 query CanCreatePersonalSnippet {
   currentUser {
+    __typename
     userPermissions {
+      __typename
       createSnippet
     }
   }

app/views/snippets/show.html.haml

+- add_page_startup_graphql_call('snippet/snippet', { ids: [@snippet.to_global_id.uri] })
+- add_page_startup_graphql_call('snippet/snippet_blob_content', { ids: [@snippet.to_global_id.uri], rich: false, paths: [@snippet.file_name] })
+- if @snippet.project_id?
+  - add_page_startup_graphql_call('snippet/project_permissions', { fullPath: @snippet.project_id })
+- else
+  - add_page_startup_graphql_call('snippet/user_permissions')
 - @hide_top_links = true
 - @content_class = "limit-container-width limited-inner-width-container" unless fluid_layout
 - add_to_breadcrumbs _("Snippets"), dashboard_snippets_path

changelogs/unreleased/271542-prefetch-requests-link.yml

+---
+title: Pre-fetched GraphQL queries for snippet view
+merge_request: 46130
+author:
+type: changed