Set up basic Vue app + GraphQL + Apollo

The basic Vue application with support for GraphQL and Apollo

app/assets/javascripts/pages/snippets/show/index.js

@@ -3,6 +3,7 @@ import BlobViewer from '~/blob/viewer';
 import ZenMode from '~/zen_mode';
 import initNotes from '~/init_notes';
 import snippetEmbed from '~/snippet/snippet_embed';
+import initSnippetsApp from '~/snippets';
 
 document.addEventListener('DOMContentLoaded', () => {
   if (!gon.features.snippetsVue) {
@@ -11,5 +12,7 @@ document.addEventListener('DOMContentLoaded', () => {
     initNotes();
     new ZenMode(); // eslint-disable-line no-new
     snippetEmbed();
+  } else {
+    initSnippetsApp();
   }
 });

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

+<script>
+import getSnippet from '../queries/getSnippet.query.graphql';
+
+export default {
+  apollo: {
+    snippetData: {
+      query: getSnippet,
+      variables() {
+        return {
+          ids: this.snippetGid,
+        };
+      },
+      update: data => data.snippets.edges[0].node,
+    },
+  },
+  props: {
+    snippetGid: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      snippetData: {},
+    };
+  },
+};
+</script>
+<template>
+  <div class="js-snippet-view"></div>
+</template>

app/assets/javascripts/snippets/index.js

+import Vue from 'vue';
+import Translate from '~/vue_shared/translate';
+import VueApollo from 'vue-apollo';
+import createDefaultClient from '~/lib/graphql';
+
+import SnippetsApp from './components/app.vue';
+
+Vue.use(VueApollo);
+Vue.use(Translate);
+
+export default () => {
+  const el = document.getElementById('js-snippet-view');
+
+  if (!el) {
+    return false;
+  }
+
+  const { snippetGid } = el.dataset;
+  const apolloProvider = new VueApollo({
+    defaultClient: createDefaultClient(),
+  });
+
+  return new Vue({
+    el,
+    apolloProvider,
+    render(createElement) {
+      return createElement(SnippetsApp, {
+        props: {
+          snippetGid,
+        },
+      });
+    },
+  });
+};

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

+query getSnippet($ids: [ID!]) {
+  snippets(ids: $ids) {
+    edges {
+      node {
+        title
+        description
+        createdAt
+        updatedAt
+        visibility
+      }
+    }
+  }
+}

app/views/snippets/show.html.haml

@@ -5,7 +5,7 @@
 - page_title "#{@snippet.title} (#{@snippet.to_reference})", _("Snippets")
 
 - if Feature.enabled?(:snippets_vue)
-  #js-snippet-view{ 'data-qa-selector': 'snippet_view' }
+  #js-snippet-view{ data: {'qa-selector': 'snippet_view', 'snippet-gid': @snippet.to_global_id} }
 - else
   = render 'shared/snippets/header'
 

spec/frontend/snippets/components/app_spec.js

+import SnippetApp from '~/snippets/components/app.vue';
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+
+describe('Snippet view app', () => {
+  let wrapper;
+  let snippetDataMock;
+  const localVue = createLocalVue();
+  const defaultProps = {
+    snippetGid: 'gid://gitlab/PersonalSnippet/35',
+  };
+
+  function createComponent({ props = defaultProps, snippetData = {} } = {}) {
+    snippetDataMock = jest.fn();
+    const $apollo = {
+      queries: {
+        snippetData: snippetDataMock,
+      },
+    };
+
+    wrapper = shallowMount(SnippetApp, {
+      sync: false,
+      mocks: { $apollo },
+      localVue,
+      propsData: {
+        ...props,
+      },
+    });
+
+    wrapper.setData({
+      snippetData,
+    });
+  }
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders itself', () => {
+    createComponent();
+    expect(wrapper.find('.js-snippet-view').exists()).toBe(true);
+  });
+});