refactor: split into @vue/apollo-ssr

.circleci/config.yml

@@ -20,9 +20,9 @@ jobs:
       # Download and cache dependencies
       - restore_cache:
           keys:
-          - v6-dependencies-{{ checksum "yarn.lock" }}
+          - v7-dependencies-{{ checksum "yarn.lock" }}
           # fallback to using the latest cache if no exact match is found
-          - v6-dependencies-
+          - v7-dependencies-
 
       - run: yarn install
 
@@ -36,9 +36,10 @@ jobs:
             - packages/vue-apollo-components/node_modules
             - packages/vue-apollo-composable/node_modules
             - packages/vue-apollo-option/node_modules
+            - packages/vue-apollo-ssr/node_modules
             - packages/vue-apollo-util/node_modules
             - ~/.cache
-          key: v6-dependencies-{{ checksum "yarn.lock" }}
+          key: v7-dependencies-{{ checksum "yarn.lock" }}
         
       # run tests!
       - run: yarn build

packages/test-ssr/src/entry-server.js

@@ -1,5 +1,5 @@
 import 'isomorphic-fetch'
-import ApolloSSR from 'vue-apollo/ssr'
+import * as ApolloSSR from '@vue/apollo-ssr'
 import { createApp } from './main'
 
 const prepareUrlForRouting = url => {
@@ -22,7 +22,7 @@ export default context => {
     router.onReady(() => {
       context.rendered = () => {
         // Same for Apollo client cache
-        context.apolloState = ApolloSSR.getStates(apolloProvider)
+        context.apolloState = ApolloSSR.getStates(apolloProvider.clients)
       }
       resolve(app)
     }, reject)

packages/vue-apollo-option/ssr/index.d.ts

@@ -1,21 +0,0 @@
-import {ApolloProvider} from "vue-apollo";
-
-interface GetStatesOptions {
-    exportNamespace?: string;
-}
-
-interface ExportStatesOptions {
-    globalName?: string;
-    attachTo?: string;
-    useUnsafeSerializer?: boolean;
-}
-
-interface ApolloSsr {
-    serializeStates(provider: ApolloProvider, options?: GetStatesOptions): string
-    getStates(provider: ApolloProvider, options?: GetStatesOptions): {[key: string]: {}}
-    exportStates(provider: ApolloProvider, options: ExportStatesOptions): string
-}
-
-declare const ssr: ApolloSsr
-
-export default ssr;

packages/vue-apollo-option/ssr/index.js

@@ -1,32 +0,0 @@
-const serializeJs = require('serialize-javascript')
-
-exports.serializeStates = function (apolloProvider, options = {}) {
-  const state = exports.getStates(apolloProvider, options)
-
-  return options.useUnsafeSerializer
-    ? JSON.stringify(state)
-    : serializeJs(state)
-}
-
-exports.getStates = function (apolloProvider, options = {}) {
-  const finalOptions = Object.assign({}, {
-    exportNamespace: '',
-  }, options)
-  const states = {}
-  for (const key in apolloProvider.clients) {
-    const client = apolloProvider.clients[key]
-    const state = client.cache.extract()
-    states[`${finalOptions.exportNamespace}${key}`] = state
-  }
-  return states
-}
-
-exports.exportStates = function (apolloProvider, options) {
-  const finalOptions = Object.assign({}, {
-    globalName: '__APOLLO_STATE__',
-    attachTo: 'window',
-    useUnsafeSerializer: false,
-  }, options)
-
-  return `${finalOptions.attachTo}.${finalOptions.globalName} = ${exports.serializeStates(apolloProvider, options)};`
-}

packages/vue-apollo-ssr/README.md

@@ -0,0 +1,3 @@
+# @vue/apollo-ssr
+
+Server-Side Rendering Utilities for Vue Apollo

packages/vue-apollo-ssr/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@vue/apollo-ssr",
+  "version": "4.0.0-alpha.1",
+  "description": "Apollo GraphQL for Vue - Server Side Rendering utilities",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Akryum/vue-apollo.git"
+  },
+  "keywords": [
+    "vue",
+    "apollo",
+    "graphql",
+    "ssr"
+  ],
+  "author": "Guillaume Chau <guillaume.b.chau@gmail.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/Akryum/vue-apollo/issues"
+  },
+  "homepage": "https://github.com/Akryum/vue-apollo#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "yarn build --watch",
+    "build": "tsc --outDir dist -d",
+    "prepublishOnly": "yarn build"
+  },
+  "devDependencies": {
+    "typescript": "^3.7.2"
+  }
+}

packages/vue-apollo-ssr/src/index.ts

@@ -0,0 +1,48 @@
+import serializeJs from 'serialize-javascript'
+import ApolloClient from 'apollo-client'
+
+export type ApolloClients = { [key: string]: ApolloClient<any> }
+
+export interface SerializeStatesOptions {
+  useUnsafeSerializer?: boolean
+}
+
+export function serializeStates (apolloClients: ApolloClients, options: SerializeStatesOptions & GetStatesOptions = {}) {
+  const state = getStates(apolloClients, options)
+
+  return options.useUnsafeSerializer
+    ? JSON.stringify(state)
+    : serializeJs(state)
+}
+
+export interface GetStatesOptions {
+  exportNamespace?: string
+}
+
+export function getStates (apolloClients: ApolloClients, options: GetStatesOptions = {}) {
+  const finalOptions = Object.assign({}, {
+    exportNamespace: '',
+  }, options)
+  const states = {}
+  for (const key in apolloClients) {
+    const client = apolloClients[key]
+    const state = client.cache.extract()
+    states[`${finalOptions.exportNamespace}${key}`] = state
+  }
+  return states
+}
+
+export interface ExportStatesOptions extends SerializeStatesOptions, GetStatesOptions {
+  globalName?: string
+  attachTo?: string
+}
+
+export function exportStates (apolloClients: ApolloClients, options: ExportStatesOptions = {}) {
+  const finalOptions = Object.assign({}, {
+    globalName: '__APOLLO_STATE__',
+    attachTo: 'window',
+    useUnsafeSerializer: false,
+  }, options)
+
+  return `${finalOptions.attachTo}.${finalOptions.globalName} = ${serializeStates(apolloClients, options)};`
+}

packages/vue-apollo-ssr/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "sourceMap": true,
+  },
+  "include": [
+    "src/**/*",
+  ],
+}