refactor: standarize API Client

.changeset/thirty-socks-sleep.md

@@ -0,0 +1,17 @@
+---
+"@vue-storefront/magento-api": major
+---
+
+- **[CHANGED]** `Endpoints` interface. Previously, each endpoint contained `context` param, which is internal and shouldn't be exposed in the final interface. Now, `Endpoints` interface properties don't contain `context` param. If you need to use `context` param, you should use `ApiMethods` type.
+
+```diff
+- import { Endpoints } from '@vue-storefront/magento-api';
++ import { ApiMethods } from '@vue-storefront/magento-api';
+```
+
+- **[CHANGED]** Removed `ContextualizedEndpoints` type. Use `Endpoints` instead.
+
+```diff
+- import { ContextualizedEndpoints } from '@vue-storefront/magento-api';
++ import { Endpoints } from '@vue-storefront/magento-api';
+```

packages/api-client/__tests__/mockData/api/storeConfig.ts

@@ -12,7 +12,7 @@ const STORE_CONFIG_MOCK_RESP = {
     configurable_thumbnail_source: "parent",
     copyright: "Copyright © 2013-present Magento, Inc. All rights reserved.",
     default_description: null,
-    default_display_currency_code: "USD",
+    default_display_currency_code: "EUR",
     default_keywords: null,
     default_title: "Magento Commerce",
     grid_per_page: 12,
@@ -24,7 +24,7 @@ const STORE_CONFIG_MOCK_RESP = {
     list_mode: "grid-list",
     list_per_page: 10,
     list_per_page_values: "5,10,15,20,25",
-    locale: "en_US",
+    locale: "en_EN",
     logo_alt: null,
     logo_height: null,
     logo_width: null,

packages/api-client/package.json

@@ -24,8 +24,8 @@
   "dependencies": {
     "@apollo/client": "3.8.7",
     "@nuxtjs/composition-api": "0.31.0",
-    "@vue-storefront/middleware": "^3.5.0",
     "@vue-storefront/magento-types": "1.0.2",
+    "@vue-storefront/middleware": "^3.9.0",
     "agentkeepalive": "^4.2.1",
     "consola": "^3.1.0",
     "dotenv": "^16.0.1",

packages/api-client/src/api-extractor-data.ts

@@ -1,5 +1,5 @@
 /**
- * Api Client for Magento 2 integration for Vue Storefront 2.
+ * `api-client` of Magento 2 integration.
  *
  * @remarks
  * The `@vue-storefront/magento-api` library includes Apollo Client,
@@ -10,3 +10,4 @@
  */
 
 export * from "./api";
+export * from "./types";

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

@@ -7,19 +7,19 @@ import type {
   CustomHeaders,
 } from "@vue-storefront/magento-types";
 
-import addBundleProductsToCart from "./addBundleProductsToCart";
+import addBundleProductsToCartQuery from "./addBundleProductsToCart";
 import { Context } from "../../types/context";
 import getHeaders from "../getHeaders";
 
-export default async (
+export async function addBundleProductsToCart(
   context: Context,
   input: AddBundleProductsToCartInput,
   customQuery: CustomQuery = { addBundleProductsToCart: "addBundleProductsToCart" },
   customHeaders: CustomHeaders = {}
-): Promise<FetchResult<AddBundleProductsToCartMutation>> => {
+): Promise<FetchResult<AddBundleProductsToCartMutation>> {
   const { addBundleProductsToCart: addBundleProductsToCartGQL } = context.extendQuery(customQuery, {
     addBundleProductsToCart: {
-      query: addBundleProductsToCart,
+      query: addBundleProductsToCartQuery,
       variables: { input },
     },
   });
@@ -31,4 +31,4 @@ export default async (
       headers: getHeaders(context, customHeaders),
     },
   });
-};
+}

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

@@ -17,7 +17,7 @@ import getHeaders from "../getHeaders";
  * @param [customQuery] (optional) - custom GraphQL query that extends the default one
  * @param customHeaders (optional) - custom headers that extends the default headers
  */
-export default async function addConfigurableProductsToCart(
+export async function addConfigurableProductsToCart(
   context: Context,
   input: AddConfigurableProductsToCartInput,
   customQuery: CustomQuery = { addConfigurableProductsToCart: "addConfigurableProductsToCart" },

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

@@ -17,7 +17,7 @@ import getHeaders from "../getHeaders";
  * @param customQuery custom GraphQL query that extends the default one
  * @param customHeaders (optional) - custom headers that extends the default headers
  */
-export default async function addDownloadableProductsToCart(
+export async function addDownloadableProductsToCart(
   context: Context,
   input: AddDownloadableProductsToCartInput,
   customQuery: CustomQuery = { addDownloadableProductsToCart: "addDownloadableProductsToCart" },

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

@@ -1,19 +1,19 @@
 import { FetchResult, gql } from "@apollo/client/core";
 import { CustomQuery, AddProductsToWishlistMutation, AddProductsToWishlistMutationVariables } from "@vue-storefront/magento-types";
 import type { CustomHeaders } from "@vue-storefront/magento-types";
-import addProductsToWishlist from "./addProductsToWishlist";
+import addProductsToWishListQuery from "./addProductsToWishlist";
 import { Context } from "../../types/context";
 import getHeaders from "../getHeaders";
 
-export default async (
+export async function addProductToWishList(
   context: Context,
   input: AddProductsToWishlistMutationVariables,
   customQuery: CustomQuery = { addProductsToWishlist: "addProductsToWishlist" },
   customHeaders: CustomHeaders = {}
-): Promise<FetchResult<AddProductsToWishlistMutation>> => {
+): Promise<FetchResult<AddProductsToWishlistMutation>> {
   const { addProductsToWishlist: addProductsToWishlistGQL } = context.extendQuery(customQuery, {
     addProductsToWishlist: {
-      query: addProductsToWishlist,
+      query: addProductsToWishListQuery,
       variables: { ...input },
     },
   });
@@ -26,4 +26,4 @@ export default async (
       headers: getHeaders(context, customHeaders),
     },
   });
-};
+}

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

@@ -12,7 +12,7 @@ import getHeaders from "../getHeaders";
  * @param [customQuery] (optional) - custom GraphQL query that extends the default one
  * @param customHeaders (optional) - custom headers that extends the default headers
  */
-export default async function addProductsToCart(
+export async function addProductsToCart(
   context: Context,
   input: AddProductsToCartInput,
   customQuery: CustomQuery = { addProductsToCart: "addProductsToCart" },

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

@@ -6,19 +6,19 @@ import {
   AddSimpleProductsToCartMutationVariables,
 } from "@vue-storefront/magento-types";
 import type { CustomHeaders } from "@vue-storefront/magento-types";
-import addSimpleProductsToCart from "./addSimpleProductsToCart";
+import addSimpleProductsToCartQuery from "./addSimpleProductsToCart";
 import { Context } from "../../types/context";
 import getHeaders from "../getHeaders";
 
-export default async (
+export async function addSimpleProductsToCart(
   context: Context,
   input: AddSimpleProductsToCartInput,
   customQuery: CustomQuery = { addSimpleProductsToCart: "addSimpleProductsToCart" },
   customHeaders: CustomHeaders = {}
-): Promise<FetchResult<AddSimpleProductsToCartMutation>> => {
+): Promise<FetchResult<AddSimpleProductsToCartMutation>> {
   const { addSimpleProductsToCart: addSimpleProductsToCartGQL } = context.extendQuery(customQuery, {
     addSimpleProductsToCart: {
-      query: addSimpleProductsToCart,
+      query: addSimpleProductsToCartQuery,
       variables: { input },
     },
   });
@@ -29,4 +29,4 @@ export default async (
       headers: getHeaders(context, customHeaders),
     },
   });
-};
+}

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

@@ -17,7 +17,7 @@ import getHeaders from "../getHeaders";
  * @param customQuery custom GraphQL query that extends the default one
  * @param customHeaders (optional) - custom headers that extends the default headers
  */
-export default async function addVirtualProductsToCart(
+export async function addVirtualProductsToCart(
   context: Context,
   input: AddVirtualProductsToCartInput,
   customQuery: CustomQuery = { addVirtualProductsToCart: "addVirtualProductsToCart" },

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

@@ -13,7 +13,7 @@ import getHeaders from "../getHeaders";
  * @param customQuery custom GraphQL query that extends the default one
  * @param customHeaders (optional) - custom headers that extends the default headers
  */
-export default async function applyCouponToCart(
+export async function applyCouponToCart(
   context: Context,
   input: ApplyCouponToCartInput,
   customQuery: CustomQuery = { applyCouponToCart: "applyCouponToCart" },

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

@@ -2,21 +2,21 @@ import { ApolloQueryResult } from "@apollo/client/core";
 import type { CustomHeaders } from "@vue-storefront/magento-types";
 import { AvailableStoresQuery, CustomQuery } from "@vue-storefront/magento-types";
 import gql from "graphql-tag";
-import availableStores from "./availableStores";
+import availableStoresQuery from "./availableStores";
 import { Context } from "../../types/context";
 import getHeaders from "../getHeaders";
 
 /**
  * Returns list of available stores
  */
-export default async (
+export async function availableStores(
   context: Context,
   customQuery: CustomQuery = { availableStores: "availableStores" },
   customHeaders: CustomHeaders = {}
-): Promise<ApolloQueryResult<AvailableStoresQuery>> => {
+): Promise<ApolloQueryResult<AvailableStoresQuery>> {
   const { availableStores: availableStoresGQL } = context.extendQuery(customQuery, {
     availableStores: {
-      query: availableStores,
+      query: availableStoresQuery,
     },
   });
 
@@ -28,4 +28,4 @@ export default async (
       headers: getHeaders(context, customHeaders),
     },
   });
-};
+}

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

@@ -12,7 +12,7 @@ import getHeaders from "../getHeaders";
  * @param customQuery custom GraphQL query that extends the default one
  * @param customHeaders (optional) - custom headers that extends the default headers
  */
-export default async function cart(
+export async function cart(
   context: Context,
   cartId: string,
   customQuery: CustomQuery = { cart: "cart" },

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

@@ -6,8 +6,8 @@ import cartTotalQtyQuery from "./cartTotalQty";
 import { Context } from "../../types/context";
 import getHeaders from "../getHeaders";
 
-export default async (context: Context, cartId: string, customHeaders: CustomHeaders = {}): Promise<ApolloQueryResult<CartQuery>> =>
-  context.client.query<CartQuery, CartQueryVariables>({
+export async function cartTotalQty(context: Context, cartId: string, customHeaders: CustomHeaders = {}): Promise<ApolloQueryResult<CartQuery>> {
+  return context.client.query<CartQuery, CartQueryVariables>({
     query: gql`
       ${cartTotalQtyQuery}
     `,
@@ -16,3 +16,4 @@ export default async (context: Context, cartId: string, customHeaders: CustomHea
       headers: getHeaders(context, customHeaders),
     },
   });
+}

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

@@ -14,7 +14,7 @@ import getHeaders from "../getHeaders";
  * @param [customQuery] (optional) - custom GraphQL query that extends the default query
  * @param customHeaders (optional) - custom headers that extends the default headers
  */
-export default async function categoryList(
+export async function categoryList(
   context: Context,
   params: QueryCategoryListArgs,
   customQuery: CustomQuery = { categoryList: "categoryList" },

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

@@ -15,7 +15,7 @@ import getHeaders from "../getHeaders";
  * @param [customQuery] (optional) - custom GraphQL query that extends the default query
  * @param customHeaders (optional) - custom headers that extends the default headers
  */
-export default async function categorySearch(
+export async function categorySearch(
   context: Context,
   filters: CategorySearchQueryVariables,
   customQuery: CustomQuery = { categorySearch: "categorySearch" },

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

@@ -2,23 +2,23 @@ import { FetchResult } from "@apollo/client/core";
 import type { CustomHeaders } from "@vue-storefront/magento-types";
 import { ChangeCustomerPasswordMutation, ChangeCustomerPasswordMutationVariables, CustomQuery } from "@vue-storefront/magento-types";
 import gql from "graphql-tag";
-import changeCustomerPassword from "./changeCustomerPassword";
+import changeCustomerPasswordQuery from "./changeCustomerPassword";
 import { Context } from "../../types/context";
 import getHeaders from "../getHeaders";
 
 /**
  * Changes password of the current customer. To override the default query, use the `changeCustomerPassword` query key.
  */
-export default async (
+export async function changeCustomerPassword(
   context: Context,
   params: { currentPassword: string; newPassword: string },
   customQuery: CustomQuery = { changeCustomerPassword: "changeCustomerPassword" },
   customHeaders: CustomHeaders = {}
-): Promise<FetchResult<ChangeCustomerPasswordMutation>> => {
+): Promise<FetchResult<ChangeCustomerPasswordMutation>> {
   try {
     const { changeCustomerPassword: changeCustomerPasswordGQL } = context.extendQuery(customQuery, {
       changeCustomerPassword: {
-        query: changeCustomerPassword,
+        query: changeCustomerPasswordQuery,
         variables: { ...params },
       },
     });
@@ -41,4 +41,4 @@ export default async (
     }
     throw error.networkError?.result || error;
   }
-};
+}

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

@@ -2,7 +2,7 @@ import { ApolloQueryResult } from "@apollo/client/core";
 import type { CustomHeaders } from "@vue-storefront/magento-types";
 import { CmsBlockQuery, CmsBlockQueryVariables, CustomQuery } from "@vue-storefront/magento-types";
 import gql from "graphql-tag";
-import cmsBlocks from "./cmsBlocks";
+import cmsBlocksQuery from "./cmsBlocks";
 import { Context } from "../../types/context";
 import getHeaders from "../getHeaders";
 
@@ -14,15 +14,15 @@ import getHeaders from "../getHeaders";
  * @param [customQuery] - (optional) - custom GraphQL query that extends the default cmsBlocks query
  * @param customHeaders (optional) - custom headers that extends the default headers
  */
-export default async function getCmsBlocks(
+export async function cmsBlocks(
   context: Context,
   identifiers: string,
   customQuery: CustomQuery = { cmsBlocks: "cmsBlocks" },
   customHeaders: CustomHeaders = {}
 ): Promise<ApolloQueryResult<CmsBlockQuery>> {
   const { cmsBlocks: cmsBlocksGQL } = context.extendQuery(customQuery, {
     cmsBlocks: {
-      query: cmsBlocks,
+      query: cmsBlocksQuery,
       variables: { identifiers },
     },
   });

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

@@ -3,7 +3,7 @@ import consola from "consola";
 import type { CustomHeaders } from "@vue-storefront/magento-types";
 import { CmsPageQuery, CmsPageQueryVariables, CustomQuery } from "@vue-storefront/magento-types";
 import gql from "graphql-tag";
-import cmsPage from "./cmsPage";
+import cmsPageQuery from "./cmsPage";
 import { Context } from "../../types/context";
 import getHeaders from "../getHeaders";
 
@@ -14,7 +14,7 @@ import getHeaders from "../getHeaders";
  * @param customQuery - (optional) - custom query that extends default cmsPage GraphQL query
  * @param customHeaders (optional) - custom headers that extends the default headers
  */
-export default async function getCmsPage(
+export async function cmsPage(
   context: Context,
   identifier: string,
   customQuery: CustomQuery = { cmsPage: "cmsPage" },
@@ -23,7 +23,7 @@ export default async function getCmsPage(
   try {
     const { cmsPage: cmsPageGQL } = context.extendQuery(customQuery, {
       cmsPage: {
-        query: cmsPage,
+        query: cmsPageQuery,
         variables: { identifier },
       },
     });

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

@@ -12,7 +12,7 @@ import getHeaders from "../getHeaders";
  * @param [customQuery] (optional) - custom GraphQL query that extends the default one
  * @param customHeaders (optional) - custom headers that extends the default headers
  */
-export default async function countries(
+export async function countries(
   context: Context,
   customQuery: CustomQuery = { countries: "countries" },
   customHeaders: CustomHeaders = {}

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

@@ -12,7 +12,7 @@ import getHeaders from "../getHeaders";
  * @param [customQuery] (optional) - custom GraphQL query that extends the default one
  * @param customHeaders (optional) - custom headers that extends the default headers
  */
-export default async function country(
+export async function country(
   context: Context,
   id: string,
   customQuery: CustomQuery = { country: "country" },