feat: CDN support in middlewareModule

* chore: update sdk * chore: versioning * feat: default config for next * docs: changelog update * fix: default http client was not handling get requests * feat: reverse contamination from another branch * feat: add query parameters support * refactor: removed contamination from another branch * refactor and finalize cdnCacheBustingId feature * fix GET issue * remove docs * remove unused param --------- Co-authored-by: Wojciech Sikora <[email protected]>
vuestorefront · May 13, 2024 · a815fd3 · a815fd3
1 parent df2aa92
commit a815fd3
Show file tree

Hide file tree

Showing 6 changed files with 94 additions and 20 deletions.
diff --git a/.changeset/flat-hotels-study.md b/.changeset/flat-hotels-study.md
@@ -0,0 +1,5 @@
+---
+"@vue-storefront/sdk": patch
+---
+
+[FIXED] support for `GET` requests in default HTTP client, which was throwing an error "SDKError: Request with GET/HEAD method cannot have body". Now, the client can handle `GET` requests properly.
diff --git a/.changeset/nasty-guests-run.md b/.changeset/nasty-guests-run.md
@@ -0,0 +1,23 @@
+---
+"@vue-storefront/sdk": major
+---
+
+[ADDED] CDN support for the `middlewareModule`.
+Now, the module's configuration includes `cdnCacheBustingId` property, which allows you to set a unique identifier for the CDN cache busting.
+**The property is obligatory and must be a string.**
+
+```diff [sdk.config.ts]
+
+export const { getSdk } = createSdk(
+  options,
+  ({ buildModule, middlewareModule, middlewareUrl, getRequestHeaders }) => ({
+    example: buildModule(middlewareModule<Endpoints>, {
+      apiUrl: `${middlewareUrl}/test_integration`,
++      cdnCacheBustingId: process.env.CDN_CACHE_BUSTING_ID,
+      defaultRequestConfig: {
+        headers: getRequestHeaders(),
+      },
+    }),
+  })
+);
+```
diff --git a/docs/content/4.sdk/2.getting-started/2.middleware-module.md b/docs/content/4.sdk/2.getting-started/2.middleware-module.md
@@ -69,8 +69,7 @@ export const sdk = initSDK({
 
 ### Type definition
 
-As the `middlewareModule` is used to communicate with the Alokai Middleware and it's not limited to a specific backend, it requires a type definition of the endpoints.  
-
+As the `middlewareModule` is used to communicate with the Alokai Middleware and it's not limited to a specific backend, it requires a type definition of the endpoints.
 
 The type definition should be provided as a generic type to the `middlewareModule` function.
 
@@ -90,7 +89,7 @@ const sdk = initSDK({
 const product = await sdk.commerce.getProduct({ id: "123" });
 ```
 
-In Alokai Storefront, you can find the `UnifiedEndpoints` type in `storefront-middleware/types.ts` file. It's a type definition for the endpoints used in the middleware.  
+In Alokai Storefront, you can find the `UnifiedEndpoints` type in `storefront-middleware/types.ts` file. It's a type definition for the endpoints used in the middleware.
 
 ::: tip Nuxt and Next examples
 We're using `initSDK` approach in this examples to make it more universal. However, you can use `createSdk` and `defineSdkConfig` functions in Next and Nuxt as well.
@@ -154,8 +153,8 @@ export const sdk = initSDK({
   }),
 });
 ```
-Once you have added the `middlewareModule` to your SDK, you can use it to make requests to the Alokai Middleware.  
 
+Once you have added the `middlewareModule` to your SDK, you can use it to make requests to the Alokai Middleware.
 
 ## Usage
 

diff --git a/packages/sdk/src/__tests__/integration/modules/middlewareModule.spec.ts b/packages/sdk/src/__tests__/integration/modules/middlewareModule.spec.ts
@@ -19,6 +19,7 @@ describe("middlewareModule", () => {
     const sdkConfig = {
       commerce: buildModule(middlewareModule, {
         apiUrl: "http://localhost:8181/commerce",
+        cdnCacheBustingId: "commit-hash",
       }),
     };
 
@@ -31,6 +32,7 @@ describe("middlewareModule", () => {
     const sdkConfig = {
       commerce: buildModule(middlewareModule<Endpoints>, {
         apiUrl: "http://localhost:8181/commerce",
+        cdnCacheBustingId: "commit-hash",
       }),
     };
 
@@ -45,6 +47,7 @@ describe("middlewareModule", () => {
     const sdkConfig = {
       commerce: buildModule(middlewareModule<Endpoints>, {
         apiUrl: "http://localhost:8181/commerce",
+        cdnCacheBustingId: "commit-hash",
         httpClient: customHttpClient,
       }),
     };
@@ -60,6 +63,7 @@ describe("middlewareModule", () => {
     const sdkConfig = {
       commerce: buildModule(middlewareModule<Endpoints>, {
         apiUrl: "http://localhost:8181/commerce",
+        cdnCacheBustingId: "commit-hash",
         httpClient: customHttpClient,
       }),
     };
@@ -79,6 +83,7 @@ describe("middlewareModule", () => {
   it("should use default HTTP Client if it's not provided", async () => {
     const sdkConfig = {
       commerce: buildModule(middlewareModule<Endpoints>, {
+        cdnCacheBustingId: "commit-hash",
         apiUrl: "http://localhost:8181/commerce",
       }),
     };
@@ -90,10 +95,29 @@ describe("middlewareModule", () => {
     expect(response).toEqual({ id: 1, name: "Test Product" });
   });
 
+  it("should support GETs in default HTTP Client", async () => {
+    const sdkConfig = {
+      commerce: buildModule(middlewareModule<Endpoints>, {
+        cdnCacheBustingId: "commit-hash",
+        apiUrl: "http://localhost:8181/commerce",
+      }),
+    };
+    const sdk = initSDK(sdkConfig);
+
+    const response = await sdk.commerce.getProduct(
+      { id: 1 },
+      prepareConfig({ method: "GET" })
+    );
+
+    // To avoid mocking fetch, we're calling the real middleware and verifying the response.
+    expect(response).toEqual({ id: 1, name: "Test Product" });
+  });
+
   it("should allow to use GET request with query parameters", async () => {
     const customHttpClient = jest.fn();
     const sdkConfig = {
       commerce: buildModule(middlewareModule<Endpoints>, {
+        cdnCacheBustingId: "commit-hash",
         apiUrl: "http://localhost:8181/commerce",
         httpClient: customHttpClient,
       }),
@@ -108,7 +132,7 @@ describe("middlewareModule", () => {
     expect(customHttpClient).toHaveBeenCalledWith(
       `http://localhost:8181/commerce/getProducts?body=${encodeURIComponent(
         JSON.stringify([{ limit: 1 }])
-      )}`,
+      )}&cdnCacheBustingId=${encodeURIComponent("commit-hash")}`,
       [],
       expect.objectContaining({
         method: "GET",
@@ -120,6 +144,7 @@ describe("middlewareModule", () => {
     const customHttpClient = jest.fn();
     const sdkConfig = {
       commerce: buildModule(middlewareModule<Endpoints>, {
+        cdnCacheBustingId: "commit-hash",
         apiUrl: "/api/commerce",
         httpClient: customHttpClient,
       }),
@@ -134,7 +159,7 @@ describe("middlewareModule", () => {
     expect(customHttpClient).toHaveBeenCalledWith(
       `/api/commerce/getProducts?body=${encodeURIComponent(
         JSON.stringify([{ limit: 1 }])
-      )}`,
+      )}&cdnCacheBustingId=${encodeURIComponent("commit-hash")}`,
       [],
       expect.objectContaining({
         method: "GET",
@@ -147,6 +172,7 @@ describe("middlewareModule", () => {
     const sdkConfig = {
       commerce: buildModule(middlewareModule<Endpoints>, {
         apiUrl: "http://localhost:8181/commerce///", // Extra slashes
+        cdnCacheBustingId: "commit-hash",
         httpClient: customHttpClient,
       }),
     };
@@ -165,6 +191,7 @@ describe("middlewareModule", () => {
     const customHttpClient = jest.fn();
     const sdkConfig = {
       commerce: buildModule(middlewareModule<Endpoints>, {
+        cdnCacheBustingId: "commit-hash",
         apiUrl: "http://localhost:8181/commerce",
         httpClient: customHttpClient,
       }),
@@ -199,6 +226,7 @@ describe("middlewareModule", () => {
     const sdkConfig = {
       commerce: buildModule(middlewareModule<Endpoints>, {
         apiUrl: "http://localhost:8181/commerce",
+        cdnCacheBustingId: "commit-hash",
         httpClient: customHttpClient,
         defaultRequestConfig: {
           headers: {
@@ -229,6 +257,7 @@ describe("middlewareModule", () => {
     const sdkConfig = {
       commerce: buildModule(middlewareModule<Endpoints>, {
         apiUrl: "/api/commerce",
+        cdnCacheBustingId: "commit-hash",
         ssrApiUrl: "http://localhost:8181/commerce",
         httpClient: customHttpClient,
       }),
@@ -250,6 +279,7 @@ describe("middlewareModule", () => {
     const sdkConfig = {
       commerce: buildModule(middlewareModule<Endpoints>, {
         apiUrl: "http://localhost:8181/commerce",
+        cdnCacheBustingId: "commit-hash",
         httpClient: async (url, params, config) => {
           const { data } = await axios(url, {
             ...config,
@@ -276,6 +306,7 @@ describe("middlewareModule", () => {
     const sdkConfig = {
       commerce: buildModule(middlewareModule<Endpoints>, {
         apiUrl: "http://localhost:8181/commerce",
+        cdnCacheBustingId: "commit-hash",
         httpClient: customHttpClient,
         defaultRequestConfig: {
           headers: {
@@ -318,6 +349,7 @@ describe("middlewareModule", () => {
     const sdkConfig = {
       commerce: buildModule(middlewareModule<Endpoints>, {
         apiUrl: "http://localhost:8181/commerce",
+        cdnCacheBustingId: "commit-hash",
         httpClient: customHttpClient,
       }),
     };
@@ -339,6 +371,7 @@ describe("middlewareModule", () => {
     const sdkConfig = {
       commerce: buildModule(middlewareModule<Endpoints>, {
         apiUrl: "http://localhost:8181/commerce",
+        cdnCacheBustingId: "commit-hash",
         httpClient: customHttpClient,
         errorHandler: customErrorHandler,
       }),
@@ -367,6 +400,7 @@ describe("middlewareModule", () => {
     const sdkConfig = {
       commerce: buildModule(middlewareModule<Endpoints>, {
         apiUrl: "http://localhost:8181/commerce",
+        cdnCacheBustingId: "commit-hash",
       }),
     };
     const sdk = initSDK(sdkConfig);
@@ -382,6 +416,7 @@ describe("middlewareModule", () => {
         middlewareModule<Endpoints>,
         {
           apiUrl: "http://localhost:8181/commerce",
+          cdnCacheBustingId: "commit-hash",
         },
         {
           extend: {
@@ -407,6 +442,7 @@ describe("middlewareModule", () => {
         middlewareModule<Endpoints>,
         {
           apiUrl: "http://localhost:8181/commerce",
+          cdnCacheBustingId: "commit-hash",
           httpClient: customHttpClient,
         },
         (_, module) => ({
@@ -441,6 +477,7 @@ describe("middlewareModule", () => {
         middlewareModule<Endpoints>,
         {
           apiUrl: "http://localhost:8181/commerce",
+          cdnCacheBustingId: "commit-hash",
           httpClient: customHttpClient,
           errorHandler: customErrorHandler,
         },
@@ -476,6 +513,7 @@ describe("middlewareModule", () => {
         middlewareModule<Endpoints>,
         {
           apiUrl: "http://localhost:8181/commerce",
+          cdnCacheBustingId: "commit-hash",
         },
         {
           override: {
@@ -501,6 +539,7 @@ describe("middlewareModule", () => {
     const sdk = initSDK({
       commerce: buildModule(middlewareModule<Endpoints>, {
         apiUrl: "http://localhost:8181/commerce",
+        cdnCacheBustingId: "commit-hash",
       }),
     });
 
@@ -527,6 +566,7 @@ describe("middlewareModule", () => {
     const sdk = initSDK({
       commerce: buildModule(middlewareModule<Endpoints>, {
         apiUrl: "http://localhost:8181/commerce",
+        cdnCacheBustingId: "commit-hash",
         httpClient: async (url, params, config) => {
           try {
             const { data } = await axios(url, {
@@ -568,6 +608,7 @@ describe("middlewareModule", () => {
     const sdk = initSDK({
       commerce: buildModule(middlewareModule<Endpoints>, {
         apiUrl: "http://localhost:8181/commerce",
+        cdnCacheBustingId: "commit-hash",
       }),
     });
 
@@ -582,6 +623,7 @@ describe("middlewareModule", () => {
     const sdk = initSDK({
       commerce: buildModule(middlewareModule<Endpoints>, {
         apiUrl: "http://localhost:8181/commerce",
+        cdnCacheBustingId: "commit-hash",
         httpClient: customHttpClient,
         defaultRequestConfig: {
           headers: {
@@ -605,7 +647,7 @@ describe("middlewareModule", () => {
     expect(customHttpClient).toHaveBeenCalledWith(
       `http://localhost:8181/commerce/getProduct?body=${encodeURIComponent(
         JSON.stringify([{ id: 1 }])
-      )}`,
+      )}&cdnCacheBustingId=${encodeURIComponent("commit-hash")}`,
       [],
       expect.objectContaining({
         method: "GET",
@@ -656,6 +698,7 @@ describe("middlewareModule", () => {
     const sdk = initSDK({
       commerce: buildModule(middlewareModule<Endpoints>, {
         apiUrl: "http://localhost:8181/commerce",
+        cdnCacheBustingId: "commit-hash",
         httpClient: customHttpClient,
         defaultRequestConfig: {
           method: "GET",
@@ -668,7 +711,7 @@ describe("middlewareModule", () => {
     expect(customHttpClient).toHaveBeenCalledWith(
       `http://localhost:8181/commerce/getProduct?body=${encodeURIComponent(
         JSON.stringify([{ id: 1 }])
-      )}`,
+      )}&cdnCacheBustingId=${encodeURIComponent("commit-hash")}`,
       [],
       expect.objectContaining({
         method: "GET",
@@ -680,7 +723,7 @@ describe("middlewareModule", () => {
     expect(customHttpClient).toHaveBeenCalledWith(
       `http://localhost:8181/commerce/getProducts?body=${encodeURIComponent(
         JSON.stringify([{ limit: 1 }])
-      )}`,
+      )}&cdnCacheBustingId=${encodeURIComponent("commit-hash")}`,
       [],
       expect.objectContaining({
         method: "GET",

diff --git a/packages/sdk/src/modules/middlewareModule/types.ts b/packages/sdk/src/modules/middlewareModule/types.ts
@@ -259,6 +259,11 @@ export type Options<
    * ```
    */
   errorHandler?: ErrorHandler;
+
+  /**
+   * Unique identifier for CDN cache busting.
+   */
+  cdnCacheBustingId: string;
 };
 
 /**