Set up graphql in Static Site Editor

Create a new instance of the apollo client
and inject a VueApollo provider to the
Static Site Editor app

app/assets/javascripts/lib/graphql.js

@@ -33,6 +33,7 @@ export default (resolvers = {}, config = {}) => {
   };
 
   return new ApolloClient({
+    typeDefs: config.typeDefs,
     link: ApolloLink.split(
       operation => operation.getContext().hasUpload || operation.getContext().isSingleRequest,
       createUploadLink(httpOptions),

app/assets/javascripts/static_site_editor/graphql/index.js

+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import createDefaultClient from '~/lib/graphql';
+import typeDefs from './typedefs.graphql';
+
+Vue.use(VueApollo);
+
+const createApolloProvider = data => {
+  const defaultClient = createDefaultClient(
+    {},
+    {
+      typeDefs,
+    },
+  );
+
+  defaultClient.cache.writeData({
+    data,
+  });
+
+  return new VueApollo({
+    defaultClient,
+  });
+};
+
+export default createApolloProvider;

app/assets/javascripts/static_site_editor/graphql/typedefs.graphql

+extend type Query {
+  isSupportedContent: Boolean!
+  projectId: String!
+  returnUrl: String
+  sourcePath: String!
+  username: String!
+}

app/assets/javascripts/static_site_editor/index.js

@@ -3,9 +3,12 @@ import { parseBoolean } from '~/lib/utils/common_utils';
 import App from './components/app.vue';
 import createStore from './store';
 import createRouter from './router';
+import createApolloProvider from './graphql';
 
 const initStaticSiteEditor = el => {
-  const { isSupportedContent, projectId, path: sourcePath, returnUrl, baseUrl } = el.dataset;
+  const { isSupportedContent, projectId, path: sourcePath, baseUrl } = el.dataset;
+  const { current_username: username } = window.gon;
+  const returnUrl = el.dataset.returnUrl || null;
 
   const store = createStore({
     initialState: {
@@ -13,15 +16,23 @@ const initStaticSiteEditor = el => {
       projectId,
       returnUrl,
       sourcePath,
-      username: window.gon.current_username,
+      username,
     },
   });
   const router = createRouter(baseUrl);
+  const apolloProvider = createApolloProvider({
+    isSupportedContent: parseBoolean(isSupportedContent),
+    projectId,
+    returnUrl,
+    sourcePath,
+    username,
+  });
 
   return new Vue({
     el,
     store,
     router,
+    apolloProvider,
     components: {
       App,
     },