fix(useProvider): compatibility with string of cachekey

Refs NEXT_BUILDER-2059

Author: WHChen-Alex

packages/brick-kit/src/hooks/useProvider/fetch.spec.ts

@@ -9,12 +9,13 @@ customGlobal.fetch = require("jest-fetch-mock");
 customGlobal.fetchMock = customGlobal.fetch;
 
 const fakeFetch = global.fetch as FetchMock;
-
+const fakeRevolve = jest.fn();
 // Mock a custom element of `any-provider`.
 customElements.define(
   "any-provider",
   class Tmp extends HTMLElement {
     resolve(): string {
+      fakeRevolve();
       return "resolved";
     }
   }
@@ -59,18 +60,20 @@ describe("fetch", () => {
 
   afterEach((): void => {
     fakeFetch.resetMocks();
+    fakeRevolve.mockClear();
   });
 
   it("should resolve normal  provider", async () => {
-    const result = await fetch("any-provider", true, ["abc"]);
+    const result = await fetch("any-provider", true, ...["abc"]);
 
     expect(result).toBe("resolved");
+    expect(fakeRevolve).toHaveBeenCalledTimes(1);
   });
 
   it("should throw error ", async () => {
     expect.assertions(1);
     try {
-      await fetch("error-provider", true, ["abc"]);
+      await fetch("error-provider", true, ...["abc"]);
     } catch (e) {
       expect(e.message).toBe("oops");
     }
@@ -79,32 +82,36 @@ describe("fetch", () => {
   it("should throw error when not defined provider", async () => {
     expect.assertions(1);
     try {
-      await fetch("undefined-provider", true, ["abc"]);
+      await fetch("undefined-provider", true, "abc");
     } catch (e) {
       expect(e.message).toContain('Provider not defined: "undefined-provider"');
     }
   });
 
   it("should resolve flow api provider", async () => {
-    const result = await fetch("easyops.custom_api@test", false, [
-      "abc",
-      { a: "a", c: "c", b: "b" },
-    ]);
+    const result = await fetch("easyops.custom_api@test", false, "abc", {
+      a: "a",
+      c: "c",
+      b: "b",
+    });
 
     expect(result).toEqual(expected);
     expect(fakeFetch).toHaveBeenCalledTimes(1);
 
-    const result2 = await fetch("easyops.custom_api@test", false, [
-      "abc",
-      { a: "a", c: "c", b: "b" },
-    ]);
+    const result2 = await fetch("easyops.custom_api@test", false, "abc", {
+      a: "a",
+      c: "c",
+      b: "b",
+    });
 
     expect(result2).toEqual(expected);
     expect(fakeFetch).toHaveBeenCalledTimes(2);
   });
 
   it("should resolve flow api provider by cache", async () => {
-    const result = await fetch("easyops.custom_api@test", true, [
+    const result = await fetch(
+      "easyops.custom_api@test",
+      true,
       {
         url: "api/gateway/easyops.api.cmdb.cmdb_object.ListObjectBasic@1.1.0/object_basic",
         originalUri: "/object_basic",
@@ -116,13 +123,15 @@ describe("fetch", () => {
         a: "a",
         c: "c",
         b: "b",
-      },
-    ]);
+      }
+    );
 
     expect(result).toEqual(expected);
     expect(fakeFetch).toHaveBeenCalledTimes(1);
 
-    const result2 = await fetch("easyops.custom_api@test", true, [
+    const result2 = await fetch(
+      "easyops.custom_api@test",
+      true,
       {
         isFileType: false,
         responseWrapper: true,
@@ -134,8 +143,8 @@ describe("fetch", () => {
         c: "c",
         b: "b",
         a: "a",
-      },
-    ]);
+      }
+    );
 
     // use cached response data
     expect(result2).toEqual(expected);
@@ -160,4 +169,79 @@ describe("fetch", () => {
     expect(result3).toEqual(expected);
     expect(fakeFetch).toHaveBeenCalledTimes(2);
   });
+
+  it("should resolve normal provider by cache", async () => {
+    const result = await fetch(
+      "providers-of-cmbd.a",
+      true,
+      ...[
+        "_DASHBOARD_PROVIDER",
+        {
+          fields: {
+            provider: 1,
+            args: 1,
+            name: 1,
+            instanceId: 1,
+            transform: 1,
+          },
+          query: {
+            $or: [
+              {
+                name: {
+                  $like: "%alexabcdes%",
+                },
+              },
+              {
+                provider: {
+                  $like: "%alexabcdes%",
+                },
+              },
+            ],
+          },
+          page: 1,
+          page_size: 30,
+        },
+        {},
+      ]
+    );
+
+    expect(result).toEqual("resolved");
+    expect(fakeRevolve).toHaveBeenCalledTimes(1);
+
+    const result2 = await fetch(
+      "providers-of-cmbd.a",
+      true,
+      "_DASHBOARD_PROVIDER",
+      {
+        fields: {
+          provider: 1,
+          args: 1,
+          name: 1,
+          instanceId: 1,
+          transform: 1,
+        },
+        query: {
+          $or: [
+            {
+              name: {
+                $like: "%alexabcdes%",
+              },
+            },
+            {
+              provider: {
+                $like: "%alexabcdes%",
+              },
+            },
+          ],
+        },
+        page: 1,
+        page_size: 30,
+      },
+      {}
+    );
+
+    // cached response data
+    expect(result2).toEqual("resolved");
+    expect(fakeRevolve).toHaveBeenCalledTimes(1);
+  });
 });

packages/brick-kit/src/hooks/useProvider/fetch.ts

@@ -10,15 +10,20 @@ function isObj(v: any): boolean {
   return typeof v === "object" && v !== null && !Array.isArray(v);
 }
 
-function buildSortedCacheKey(provider: string, args: any): string {
+function isString(v: any): v is string {
+  return typeof v === "string";
+}
+function buildSortedCacheKey(provider: string, ...args: any): string {
   const sortObj = (obj: Record<string, any>) =>
     Object.keys(obj)
       .sort()
       .map((k) => ({ [k]: (obj as any)[k] }));
   try {
     const sortedArgs = isObj(args)
       ? sortObj(args)
-      : (args as Record<string, any>[]).map((arg) => sortObj(arg));
+      : (args as Record<string, any>[]).map((arg) =>
+          isString(arg) ? arg : sortObj(arg)
+        );
 
     return JSON.stringify({
       provider,