feat: create VueQueryPlugin

Author: aantipov

src/vue/__tests__/vueQueryPlugin.test.ts

@@ -0,0 +1,66 @@
+// import { successMutator, simpleFetcher } from "./test-utils";
+import { QueryClient } from "react-query/types/core";
+import { VueQueryPlugin } from "../vueQueryPlugin";
+import { VUE_QUERY_CLIENT } from "../useQueryClient";
+
+const vue3AppMock = {
+  provide: jest.fn(),
+};
+
+describe("VueQueryPlugin", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe("when called without additional options", () => {
+    test("should instantiate a client with default clientKey", () => {
+      VueQueryPlugin(vue3AppMock);
+
+      expect(vue3AppMock.provide).toHaveBeenCalledWith(
+        VUE_QUERY_CLIENT,
+        expect.objectContaining({ defaultOptions: {} })
+      );
+    });
+  });
+
+  describe("when called with custom clientKey", () => {
+    test("should instantiate a client with customized clientKey", () => {
+      VueQueryPlugin(vue3AppMock, { queryClientKey: "CUSTOM" });
+
+      expect(vue3AppMock.provide).toHaveBeenCalledWith(
+        VUE_QUERY_CLIENT + "CUSTOM",
+        expect.objectContaining({ defaultOptions: {} })
+      );
+    });
+  });
+
+  describe("when called with custom client", () => {
+    test("should instantiate that custom client", () => {
+      const customClient = { mount: jest.fn() } as unknown as QueryClient;
+      VueQueryPlugin(vue3AppMock, { queryClient: customClient });
+
+      expect(customClient.mount).toHaveBeenCalled();
+      expect(vue3AppMock.provide).toHaveBeenCalledWith(
+        VUE_QUERY_CLIENT,
+        customClient
+      );
+    });
+  });
+
+  describe("when called with custom client condig", () => {
+    test("should instantiate a client with the provided config", () => {
+      VueQueryPlugin(vue3AppMock, {
+        queryClientConfig: {
+          defaultOptions: { queries: { enabled: true } },
+        },
+      });
+
+      expect(vue3AppMock.provide).toHaveBeenCalledWith(
+        VUE_QUERY_CLIENT,
+        expect.objectContaining({
+          defaultOptions: { queries: { enabled: true } },
+        })
+      );
+    });
+  });
+});

src/vue/index.ts

@@ -2,6 +2,7 @@
 
 export { useQueryClient, VUE_QUERY_CLIENT } from "./useQueryClient";
 export { useQueryProvider } from "./useQueryProvider";
+export { VueQueryPlugin } from "./vueQueryPlugin";
 
 export { useQuery } from "./useQuery";
 export { useQueries } from "./useQueries";

src/vue/vueQueryPlugin.ts

@@ -0,0 +1,39 @@
+import { InjectionKey } from "vue-demi";
+import { QueryClient } from "react-query/core";
+import { VUE_QUERY_CLIENT } from "./useQueryClient";
+import { QueryClientConfig } from "./useQueryProvider";
+
+type QueryClientPluginOptions =
+  | {
+      queryClientConfig?: QueryClientConfig;
+      queryClientKey?: string;
+    }
+  | {
+      queryClient?: QueryClient;
+      queryClientKey?: string;
+    };
+
+// Vue 3 only
+interface Vue3App {
+  provide<T>(key: InjectionKey<T> | symbol | string, value: T): this;
+}
+
+export function VueQueryPlugin(
+  app: Vue3App,
+  options: QueryClientPluginOptions = {}
+): void {
+  const clientKeySuffix = options.queryClientKey || "";
+  let client: QueryClient;
+
+  if ("queryClient" in options && options.queryClient) {
+    client = options.queryClient;
+  } else {
+    const clientConfig =
+      "queryClientConfig" in options ? options.queryClientConfig : undefined;
+    client = new QueryClient(clientConfig);
+  }
+
+  client.mount();
+
+  app.provide(VUE_QUERY_CLIENT + clientKeySuffix, client);
+}