Merge pull request #5361 from vuestorefront/api-middleware-1

Api Middleware

packages/about-you/api-client/__tests__/index.spec.ts

@@ -81,14 +81,14 @@ describe('[about-you-api] index', () => {
   beforeEach(() => {
     jest.clearAllMocks();
   });
-  describe('onSetup', () => {
+  describe('onCreate', () => {
     it('has been called after passing to apiClientFactory', async () => {
-      const onSetup = jest.fn();
+      const onCreate = jest.fn();
 
-      const apiFactory = apiClientFactory({ defaultSettings, onSetup });
+      const apiFactory = apiClientFactory({ defaultSettings, onCreate });
       apiFactory.setup({});
 
-      expect(onSetup).toHaveBeenCalled();
+      expect(onCreate).toHaveBeenCalled();
     });
     describe('returns apiClient with methods', () => {
       beforeEach(() => {

packages/boilerplate/api-client/src/index.ts

@@ -4,7 +4,7 @@ import getCategory from './api/getCategory';
 
 const defaultSettings = {};
 
-const onSetup = (settings) => ({
+const onCreate = (settings) => ({
   config: {
     ...defaultSettings,
     ...settings
@@ -14,7 +14,7 @@ const onSetup = (settings) => ({
 
 const { createApiClient } = apiClientFactory<any, any>({
   tag: 'boilerplate',
-  onSetup,
+  onCreate,
   api: {
     getProduct,
     getCategory

packages/commercetools/api-client/.gitignore

@@ -1,3 +1,5 @@
 lib
 node_modules
 coverage
+client
+server

packages/commercetools/api-client/__tests__/helpers/setup.spec.ts

@@ -1,5 +1,5 @@
-/* eslint-disable camelcase, @typescript-eslint/camelcase */
-import { createApiClient } from './../../src/index';
+import { createApiClient } from './../../src/index.server';
+import { createApiProxy } from './../../src/index.client';
 
 jest.mock('apollo-client');
 jest.mock('@commercetools/sdk-auth');
@@ -9,7 +9,11 @@ describe('[commercetools-api-client] setup', () => {
     jest.clearAllMocks();
   });
 
-  it('creating link is being called when configuration is provided', () => {
+  it('creates instance for direct connection', () => {
     createApiClient({ api: 'api-config' } as any);
   });
+
+  it('creates instance for proxy connection', () => {
+    createApiProxy({ api: 'api-config' } as any);
+  });
 });

packages/commercetools/api-client/__tests__/setup.ts

@@ -1,4 +1,4 @@
-import { createApiClient } from './../src/index';
+import { createApiClient } from './../src/index.server';
 
 jest.mock('../src/helpers/createCommerceToolsLink');
 jest.mock('../src/api/updateCart', () => jest.fn((arg) => arg));

packages/commercetools/api-client/package.json

@@ -2,11 +2,16 @@
   "name": "@vue-storefront/commercetools-api",
   "version": "1.1.0",
   "sideEffects": false,
+  "client": "client/index.js",
+  "server": "server/index.js",
   "main": "lib/index.cjs.js",
   "module": "lib/index.es.js",
   "types": "lib/index.d.ts",
   "scripts": {
-    "build": "rimraf lib && rollup -c",
+    "build:client": "rimraf client && rollup -c rollup-client.config.js",
+    "build:server": "rimraf server && rollup -c rollup-server.config.js",
+    "build:universal": "rimraf lib && rollup -c rollup-main.config.js",
+    "build": "yarn build:universal && yarn build:client && yarn build:server",
     "dev": "rollup -c -w",
     "test": "cross-env APP_ENV=test jest --rootDir .",
     "prepublish": "yarn build"

packages/commercetools/api-client/rollup-client.config.js

@@ -0,0 +1,20 @@
+import pkg from './package.json';
+import typescript from 'rollup-plugin-typescript2';
+
+export default {
+  input: 'src/index.client.ts',
+  output: [
+    {
+      file: pkg.client,
+      format: 'cjs',
+      sourcemap: true
+    }
+  ],
+  external: [...Object.keys(pkg.dependencies || {})],
+  plugins: [
+    typescript({
+      // eslint-disable-next-line global-require
+      typescript: require('typescript')
+    })
+  ]
+};

packages/commercetools/api-client/rollup-server.config.js

@@ -0,0 +1,22 @@
+import pkg from './package.json';
+import typescript from 'rollup-plugin-typescript2';
+import graphql from 'rollup-plugin-graphql';
+
+export default {
+  input: 'src/index.server.ts',
+  output: [
+    {
+      file: pkg.server,
+      format: 'cjs',
+      sourcemap: true
+    }
+  ],
+  external: [...Object.keys(pkg.dependencies || {})],
+  plugins: [
+    typescript({
+      // eslint-disable-next-line global-require
+      typescript: require('typescript')
+    }),
+    graphql()
+  ]
+};

packages/commercetools/api-client/src/api/getCategory/index.ts

@@ -13,7 +13,7 @@ export interface CategoryData {
 const getCategory = async (context, params, customQueryFn?: CustomQueryFn) => {
   const { acceptLanguage } = context.config;
   const defaultVariables = params ? {
-    where: buildCategoryWhere(context, params),
+    where: buildCategoryWhere(context.config, params),
     limit: params.limit,
     offset: params.offset,
     acceptLanguage

packages/commercetools/api-client/src/api/getProduct/index.ts

@@ -13,7 +13,7 @@ export interface ProductData {
 const getProduct = async (context, params, customQueryFn?: CustomQueryFn) => {
   const { locale, acceptLanguage, currency, country } = context.config;
   const defaultVariables = {
-    where: buildProductWhere(context, params),
+    where: buildProductWhere(context.config, params),
     skus: params.skus,
     limit: params.limit,
     offset: params.offset,

packages/commercetools/api-client/src/api/isGuest/index.ts

@@ -1,4 +1,4 @@
-import { isAnonymousSession, isUserSession } from '../../helpers/commercetoolsLink';
+import { isAnonymousSession, isUserSession } from '../../helpers/utils';
 
 const isGuest = (context) => {
   const { client, config } = context;
@@ -7,7 +7,7 @@ const isGuest = (context) => {
     return config.handleIsGuest(context);
   }
 
-  if (client.tokenProvider) {
+  if (client.tokenProvider || context.isProxy) {
     const token = config.auth.onTokenRead();
     return !isAnonymousSession(token) && !isUserSession(token);
   }

packages/commercetools/api-client/src/helpers/apiClient/defaultSettings.ts

@@ -0,0 +1,14 @@
+export const defaultSettings = {
+  locale: 'en',
+  acceptLanguage: ['en'],
+  auth: {
+    onTokenChange: () => {},
+    onTokenRead: () => '',
+    onTokenRemove: () => {}
+  },
+  cookies: {
+    currencyCookieName: 'vsf-currency',
+    countryCookieName: 'vsf-country',
+    localeCookieName: 'vsf-locale'
+  }
+};

packages/commercetools/api-client/src/helpers/commercetoolsLink/index.ts

@@ -7,9 +7,9 @@ import SdkAuth, { TokenProvider } from '@commercetools/sdk-auth';
 import { asyncMap } from '@apollo/client/utilities';
 import { Logger } from '@vue-storefront/core';
 import { onError } from 'apollo-link-error';
-import { Config, ApiConfig } from './../../types/setup';
+import { Config, ApiConfig } from '../../types/setup';
 import { handleBeforeAuth, handleAfterAuth, handleRetry } from './linkHandlers';
-import { isAnonymousSession, isUserSession, getAccessToken } from './helpers';
+import { isAnonymousSession, isUserSession, getAccessToken } from '../utils';
 
 const createAuthClient = (config: ApiConfig): SdkAuth => {
   return new SdkAuth({

packages/commercetools/api-client/src/helpers/commercetoolsLink/linkHandlers.ts

@@ -1,5 +1,5 @@
 import { Logger } from '@vue-storefront/core';
-import { isAnonymousSession, isUserSession, getAccessToken } from './helpers';
+import { isAnonymousSession, isUserSession, getAccessToken } from '../utils';
 import { isAnonymousOperation, isUserOperation } from './restrictedOperations';
 
 export const handleBeforeAuth = async ({ sdkAuth, tokenProvider, apolloReq, currentToken }) => {

packages/commercetools/api-client/src/helpers/utils.ts

@@ -0,0 +1,3 @@
+export const isAnonymousSession = (token) => token?.scope?.includes('anonymous_id');
+export const isUserSession = (token) => token?.scope?.includes('customer_id');
+export const getAccessToken = (token) => token ? token.access_token : null;

packages/commercetools/api-client/src/index.client.ts

@@ -0,0 +1,30 @@
+import { apiProxyFactory } from '@vue-storefront/core';
+import { defaultSettings } from './helpers/apiClient/defaultSettings';
+import isGuest from './api/isGuest';
+
+const onCreate = (settings: any) => {
+  const languageMap = settings.languageMap || {};
+  const acceptLanguage = settings.acceptLanguage || defaultSettings.acceptLanguage;
+  const locale = settings.locale || defaultSettings.locale;
+
+  const config = {
+    ...defaultSettings,
+    ...settings,
+    languageMap,
+    acceptLanguage: languageMap[locale] || acceptLanguage,
+    auth: settings.auth || defaultSettings.auth
+  } as any;
+
+  return { config };
+};
+
+const { createApiProxy, integrationPlugin } = apiProxyFactory({
+  tag: 'ct',
+  onCreate,
+  api: { isGuest }
+});
+
+export {
+  createApiProxy,
+  integrationPlugin
+};