feat: context sharing (#188)

DamianOsipiuk · May 19, 2022 · 7228a72 · 7228a72 · vercel · May 19, 2022
1 parent 33acbf6
commit 7228a72
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 8 deletions.
diff --git a/examples/multi-page/index.html b/examples/multi-page/index.html
@@ -5,8 +5,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vue-query example</title>
   </head>
-  <body>
+  <body style="display:flex;">
     <div id="app"></div>
+    <br />
+    <div id="app2"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/examples/multi-page/src/Page.vue b/examples/multi-page/src/Page.vue
@@ -30,8 +30,6 @@ export default defineComponent({
         cacheTime: 4000,
       }
     );
-    useQuery("todos2", todoFetcher);
-    useQuery("todos3", todoFetcher);
 
     return { isLoading, isError, isFetching, data, error, refetch };
   },

diff --git a/examples/multi-page/src/main.ts b/examples/multi-page/src/main.ts
@@ -1,6 +1,12 @@
 import { createApp } from "vue";
-import { VueQueryPlugin } from "vue-query";
+import { VueQueryPlugin, VueQueryPluginOptions } from "vue-query";
 
 import App from "./App.vue";
 
-createApp(App).use(VueQueryPlugin).mount("#app");
+createApp(App)
+  .use(VueQueryPlugin, { contextSharing: true } as VueQueryPluginOptions)
+  .mount("#app");
+// Second app mounted here will share vue-query context with the first app - click refresh to refresh both apps state
+createApp(App)
+  .use(VueQueryPlugin, { contextSharing: true } as VueQueryPluginOptions)
+  .mount("#app2");
diff --git a/jest.config.ts b/jest.config.ts
@@ -9,6 +9,7 @@ const config: Config.InitialOptions = {
   moduleNameMapper: {
     "^vue-query": "<rootDir>/src/index.ts",
   },
+  testEnvironment: "jsdom",
   testPathIgnorePatterns: ["test-utils.ts"],
   collectCoverage: true,
   collectCoverageFrom: [

diff --git a/src/vue/__tests__/vueQueryPlugin.test.ts b/src/vue/__tests__/vueQueryPlugin.test.ts
@@ -37,6 +37,7 @@ function getAppMock(withUnmountHook = false): TestApp {
 describe("VueQueryPlugin", () => {
   beforeEach(() => {
     jest.clearAllMocks();
+    window.__VUE_QUERY_CONTEXT__ = undefined;
   });
 
   describe("devtools", () => {
@@ -307,4 +308,34 @@ describe("VueQueryPlugin", () => {
       }
     );
   });
+
+  describe("when context sharing is enabled", () => {
+    test("should create context if it does not exist", () => {
+      const appMock = getAppMock();
+      VueQueryPlugin.install?.(appMock, { contextSharing: true });
+
+      expect(window.__VUE_QUERY_CONTEXT__).toBeTruthy();
+    });
+
+    test("should create context with options if it does not exist", () => {
+      const appMock = getAppMock();
+      VueQueryPlugin.install?.(appMock, {
+        contextSharing: true,
+        queryClientConfig: { defaultOptions: { queries: { staleTime: 5000 } } },
+      });
+
+      expect(
+        window.__VUE_QUERY_CONTEXT__?.getDefaultOptions().queries?.staleTime
+      ).toEqual(5000);
+    });
+
+    test("should use existing context", () => {
+      const customClient = { mount: jest.fn() } as unknown as QueryClient;
+      window.__VUE_QUERY_CONTEXT__ = customClient;
+      const appMock = getAppMock();
+      VueQueryPlugin.install?.(appMock, { contextSharing: true });
+
+      expect(customClient.mount).toHaveBeenCalledTimes(1);
+    });
+  });
 });
diff --git a/src/vue/vueQueryPlugin.ts b/src/vue/vueQueryPlugin.ts
@@ -6,6 +6,12 @@ import { getClientKey } from "./utils";
 import { setupDevtools } from "./devtools/devtools";
 import { MaybeRefDeep } from "./types";
 
+declare global {
+  interface Window {
+    __VUE_QUERY_CONTEXT__?: QueryClient;
+  }
+}
+
 export interface AdditionalClient {
   queryClient: QueryClient;
   queryClientKey: string;
@@ -15,12 +21,14 @@ interface ConfigOptions {
   queryClientConfig?: MaybeRefDeep<QueryClientConfig>;
   queryClientKey?: string;
   additionalClients?: AdditionalClient[];
+  contextSharing?: boolean;
 }
 
 interface ClientOptions {
   queryClient?: QueryClient;
   queryClientKey?: string;
   additionalClients?: AdditionalClient[];
+  contextSharing?: boolean;
 }
 
 export type VueQueryPluginOptions = ConfigOptions | ClientOptions;
@@ -33,9 +41,24 @@ export const VueQueryPlugin = {
     if ("queryClient" in options && options.queryClient) {
       client = options.queryClient;
     } else {
-      const clientConfig =
-        "queryClientConfig" in options ? options.queryClientConfig : undefined;
-      client = new QueryClient(clientConfig);
+      if (options.contextSharing && typeof window !== "undefined") {
+        if (!window.__VUE_QUERY_CONTEXT__) {
+          const clientConfig =
+            "queryClientConfig" in options
+              ? options.queryClientConfig
+              : undefined;
+          client = new QueryClient(clientConfig);
+          window.__VUE_QUERY_CONTEXT__ = client;
+        } else {
+          client = window.__VUE_QUERY_CONTEXT__;
+        }
+      } else {
+        const clientConfig =
+          "queryClientConfig" in options
+            ? options.queryClientConfig
+            : undefined;
+        client = new QueryClient(clientConfig);
+      }
     }
 
     client.mount();