feat(nuxt-module): enrich API client config with timeout (#1119)

docs/guide/TROUBLESHOOTING.md

@@ -52,3 +52,13 @@ See: [Context-awareness](/landing/fundamentals/#context-awareness) section. It's
 You should check all your imports for @shopware-pwa/shopware-6-client and add apiInstance as the last parameter.
 
 See: [Context-awareness](/landing/fundamentals/#context-awareness) section. It's explained in details.
+
+### Issue: The API Client's timeout is too low. I'm getting HTTP 408 errors.
+
+- Edit _shopware-pwa.config.js_ file
+- Add entry:
+```js
+shopwareApiClient: {
+  timeout: 10000 // 10 seconds of axios timeout setting
+}
+```

docs/landing/getting-started/README.md

@@ -52,6 +52,9 @@ Instead of using the interactive CLI to configure your backend connection, you c
 module.exports = {
   shopwareEndpoint: "https://shopware6-demo.vuestorefront.io",
   shopwareAccessToken: "SWSCVJJET0RQAXFNBMTDZTV1OQ",
+  shopwareApiClient: { // optional, allow to override the default settings
+    timeout: 5000, // timeout limit in ms
+  }
 };
 ```
 

packages/cli/src/extensions/shopware-pwa-extension.ts

@@ -4,6 +4,9 @@ const defaultConfig = {
   shopwareEndpoint: "https://pwa-demo-api.shopware.com",
   shopwareAccessToken: "SWSC40-LJTNO6COUEN7CJMXKLA",
   theme: "@shopware-pwa/default-theme",
+  shopwareApiClient: {
+    timeout: 10000,
+  },
 };
 // add your CLI-specific functionality here, which will then be accessible
 // to your commands
@@ -30,7 +33,9 @@ module.exports = (toolbox: GluegunToolbox) => {
     const nodePackagePathExist = require("fs").existsSync(nodePackagePath);
     if (nodePackagePathExist) return nodePackagePath;
 
-    throw new Error(`No theme found for "${directPath}". Please make sure that path is correct or theme is installed from NPM.`);
+    throw new Error(
+      `No theme found for "${directPath}". Please make sure that path is correct or theme is installed from NPM.`
+    );
   };
 
   toolbox.checkThemePath = () => {

packages/nuxt-module/__tests__/module.spec.ts

@@ -186,6 +186,37 @@ describe("nuxt-module - ShopwarePWAModule runModule", () => {
     );
   });
 
+  it("should have extra API client related config", async () => {
+    mockedUtils.loadConfig.mockResolvedValueOnce({
+      shopwareEndpoint:
+        "https://shopware-pwa.storefrontcloud.io/sales-channel-api/v1",
+      shopwareAccessToken: "mockedToken",
+      theme: "@shopware-pwa/default-theme",
+      shopwareApiClient: {
+        timeout: 5,
+      },
+    });
+    const pathForApiClientPlugin = path.join(
+      __dirname,
+      "..",
+      "plugins",
+      "api-client.js"
+    );
+    await runModule(moduleObject, {});
+    expect(moduleObject.addPlugin).toBeCalledWith({
+      fileName: "api-client.js",
+      options: {
+        shopwareAccessToken: "mockedToken",
+        shopwareEndpoint:
+          "https://shopware-pwa.storefrontcloud.io/sales-channel-api/v1",
+        shopwareApiClient: {
+          timeout: 5,
+        },
+      },
+      src: pathForApiClientPlugin,
+    });
+  });
+
   it("should add cookies plugin", async () => {
     await runModule(moduleObject, {});
     expect(moduleObject.addPlugin).toBeCalled();

packages/nuxt-module/__tests__/utils.spec.ts

@@ -57,6 +57,9 @@ describe("nuxt-module - utils", () => {
         shopwareAccessToken: "qweqwe",
         shopwareEndpoint: "https://instance.com",
         theme: "@shopware-pwa/default-theme",
+        shopwareApiClient: {
+          timeout: 10000,
+        },
       });
     });
 
@@ -70,6 +73,9 @@ describe("nuxt-module - utils", () => {
         shopwareAccessToken: "SWSC40-LJTNO6COUEN7CJMXKLA",
         shopwareEndpoint: "https://pwa-demo-api.shopware.com",
         theme: "@shopware-pwa/default-theme",
+        shopwareApiClient: {
+          timeout: 10000,
+        },
       });
     });
   });

packages/nuxt-module/plugins/api-client.js

@@ -14,6 +14,7 @@ export default async ({ app }, inject) => {
   const instance = createInstance({
     endpoint: "<%= options.shopwareEndpoint %>",
     accessToken: "<%= options.shopwareAccessToken %>",
+    timeout: "<%= options.shopwareApiClient.timeout %>",
     contextToken,
     languageId,
   });

packages/nuxt-module/src/interfaces.ts

@@ -40,11 +40,16 @@ export interface WebpackContext {
   isLegacy: boolean;
 }
 
+export interface ShopwareApiClientConfig {
+  timeout?: number;
+}
+
 export interface ShopwarePwaConfigFile {
   shopwareEndpoint: string;
   shopwareAccessToken: string;
   theme: string;
   defaultLanguageCode?: string;
+  shopwareApiClient?: ShopwareApiClientConfig;
   apiDefaults?: {
     [composableName: string]: {
       includes?: Includes;

packages/nuxt-module/src/module.ts

@@ -123,6 +123,7 @@ export async function runModule(
     options: {
       shopwareEndpoint: shopwarePwaConfig.shopwareEndpoint,
       shopwareAccessToken: shopwarePwaConfig.shopwareAccessToken,
+      shopwareApiClient: shopwarePwaConfig.shopwareApiClient,
     },
   });
 

packages/nuxt-module/src/utils.ts

@@ -12,10 +12,13 @@ export function invokeRebuild(moduleObject: NuxtModuleOptions) {
 }
 
 // TODO move to commons with shopware-pwa-extension.ts
-const defaultConfig = {
+const defaultConfig: ShopwarePwaConfigFile = {
   shopwareEndpoint: "https://pwa-demo-api.shopware.com",
   shopwareAccessToken: "SWSC40-LJTNO6COUEN7CJMXKLA",
   theme: "@shopware-pwa/default-theme",
+  shopwareApiClient: {
+    timeout: 10000,
+  },
 };
 
 export async function loadConfig(