feat(ssr): forward vuex instance to findResultsState clone (algolia/v…

…ue-instantsearch#864) Regardless of whether you _need_ to access it, it's commonly done for otherwise prerendered state. Since Vuex is a core plugin, we must support it like this
algolia · Sep 24, 2020 · 93ed4d7 · 93ed4d7
1 parent a35800f
commit 93ed4d7
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 1 deletion.
diff --git a/packages/vue-instantsearch/package.json b/packages/vue-instantsearch/package.json
@@ -107,7 +107,8 @@
     "vue-server-renderer": "^2.6.11",
     "vue-slider-component": "3.0.15",
     "vue-template-compiler": "2.5.18",
-    "vuetify": "1.5.3"
+    "vuetify": "1.5.3",
+    "vuex": "3.5.1"
   },
   "bundlesize": [
     {

diff --git a/packages/vue-instantsearch/src/util/__tests__/createServerRootMixin.test.js b/packages/vue-instantsearch/src/util/__tests__/createServerRootMixin.test.js
@@ -2,6 +2,7 @@ import Vue from 'vue';
 import { mount } from '@vue/test-utils';
 import _renderToString from 'vue-server-renderer/basic';
 import Router from 'vue-router';
+import Vuex from 'vuex';
 import { createServerRootMixin } from '../createServerRootMixin';
 import InstantSearchSsr from '../../components/InstantSearchSsr';
 import Configure from '../../components/Configure';
@@ -262,6 +263,54 @@ Array [
 
       await renderToString(wrapper);
     });
+
+    it('forwards vuex', async () => {
+      const searchClient = createFakeClient();
+
+      Vue.use(Vuex);
+
+      const store = new Vuex.Store();
+
+      // there are two renders of App, each with an assertion
+      expect.assertions(2);
+
+      const App = Vue.component('App', {
+        mixins: [
+          forceIsServerMixin,
+          createServerRootMixin({
+            searchClient,
+            indexName: 'hello',
+          }),
+        ],
+        data() {
+          expect(this.$store).toBe(store);
+          return {};
+        },
+        render(h) {
+          return h(InstantSearchSsr, {}, [
+            h(Configure, {
+              attrs: {
+                hitsPerPage: 100,
+              },
+            }),
+            h(SearchBox),
+          ]);
+        },
+        serverPrefetch() {
+          return this.instantsearch.findResultsState(this);
+        },
+      });
+
+      const wrapper = new Vue({
+        mixins: [forceIsServerMixin],
+        store,
+        render(h) {
+          return h(App);
+        },
+      });
+
+      await renderToString(wrapper);
+    });
   });
 
   describe('hydrate', () => {

diff --git a/packages/vue-instantsearch/src/util/createServerRootMixin.js b/packages/vue-instantsearch/src/util/createServerRootMixin.js
@@ -75,6 +75,7 @@ function augmentInstantSearch(instantSearchOptions, searchClient, indexName) {
           name: 'ais-ssr-root-component',
           // copy over global Vue APIs
           router: componentInstance.$router,
+          store: componentInstance.$store,
         };
 
         const extended = componentInstance.$vnode