feat!: make loading property readonly in the useConfig composable (#846)

* refactor!: rename UseConfig to UseConfigInterface

* refactor: make UseConfigInterface a typescript interface

* feat!: make loading `useConfig#loading` readonly

* docs: add useConfig composable JSDoc

* docs: add storeConfig API JSDoc

Co-authored-by: Marcin Kwiatkowski <[email protected]>

Author: roziscoding

docs/.vuepress/config.js

@@ -97,6 +97,7 @@ module.exports = {
           ['/api-reference/magento-theme.usecontent', 'useContent()'],
           ['/api-reference/magento-theme.usecart', 'useCart()'],
           ['/api-reference/magento-theme.usecategory', 'useCategory()'],
+          ['/api-reference/magento-theme.useconfig', 'useConfig()'],
           ['/api-reference/magento-theme.usecategorysearch', 'useCategorySearch()'],
           ['/api-reference/magento-theme.useuserorder', 'useUserOrder()'],
           ['/api-reference/magento-theme.usewishlist', 'useWishlist()'],
@@ -113,6 +114,7 @@ module.exports = {
           ['/api-reference/magento-api.deletecustomeraddress', 'deleteCustomerAddress'],
           ['/api-reference/magento-api.getcustomeraddresses', 'getCustomerAddresses'],
           ['/api-reference/magento-api.updatecustomeraddress', 'updateCustomerAddress'],
+          ['/api-reference/magento-api.storeconfig', 'storeConfig'],
           ['/api-reference/magento-api.addproductstocart', 'addProductsToCart'],
           ['/api-reference/magento-api.addconfigurableproductstocart', 'addConfigurableProductsToCart'],
           ['/api-reference/magento-api.adddownloadableproductstocart', 'addDownloadableProductsToCart'],

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

@@ -1,23 +1,28 @@
 import { ApolloQueryResult } from '@apollo/client/core';
 import { CustomQuery } from '@vue-storefront/core';
 import { StoreConfigQuery } from '../../types/GraphQL';
-import storeConfig from './storeConfig';
+import storeConfigMutation from './storeConfig';
 import { Context } from '../../types/context';
 
-export default async (
+/**
+ * Fetches the store configuration from the API
+ * @param context VSF Context
+ * @param [customQuery] (optional) - custom GraphQL query that extends the default one
+ */
+export default async function storeConfig(
   context: Context,
   customQuery: CustomQuery = { storeConfig: 'storeConfig' },
-): Promise<ApolloQueryResult<StoreConfigQuery>> => {
+): Promise<ApolloQueryResult<StoreConfigQuery>> {
   const { storeConfig: storeConfigGQL } = context.extendQuery(
     customQuery,
     {
       storeConfig: {
-        query: storeConfig,
+        query: storeConfigMutation,
       },
     },
   );
 
   return context.client.query<StoreConfigQuery>({
     query: storeConfigGQL.query,
   });
-};
+}

packages/api-client/src/api/storeConfig/storeConfig.ts

@@ -1,5 +1,6 @@
 import gql from 'graphql-tag';
 
+/** GraphQL Query that fetches store configuration from the API */
 export default gql`
   query storeConfig {
     storeConfig {

packages/theme/composables/index.ts

@@ -10,7 +10,7 @@ export { default as useUiHelpers } from './useUiHelpers';
 export { default as useUiNotification } from './useUiNotification';
 export { default as useUiState } from './useUiState';
 export { default as useImage } from './useImage';
-export { default as useConfig } from './useConfig';
+export * from './useConfig';
 export { default as useStore } from './useStore';
 export { default as useCurrency } from './useCurrency';
 export { default as useExternalCheckout } from './useExternalCheckout';

packages/theme/composables/useConfig/index.ts

@@ -1,11 +1,16 @@
 import {
-  computed, ref, useContext,
+  computed, readonly, ref, useContext,
 } from '@nuxtjs/composition-api';
 import { Logger } from '~/helpers/logger';
 import { useConfigStore } from '~/stores/config';
-import { UseConfig, UseConfigErrors } from '~/composables/useConfig/useConfig';
+import { UseConfigErrors, UseConfigInterface } from './useConfig';
 
-const useConfig = (): UseConfig => {
+/**
+ * The `useConfig` composable is responsible for interactions with the configuration in your eCommerce.
+ *
+ * See the {@link UseConfigInterface} page for more information.
+ */
+export function useConfig(): UseConfigInterface {
   const { app } = useContext();
   const loading = ref(false);
   const error = ref<UseConfigErrors>({ load: null });
@@ -33,9 +38,10 @@ const useConfig = (): UseConfig => {
 
   return {
     config,
-    loading,
+    loading: readonly(loading),
     load,
   };
-};
+}
 
+export * from './useConfig';
 export default useConfig;

packages/theme/composables/useConfig/useConfig.ts

@@ -1,12 +1,20 @@
-import { ComputedRef, Ref } from '@nuxtjs/composition-api';
+import { ComputedRef, DeepReadonly, Ref } from '@nuxtjs/composition-api';
 import { StoreConfig } from '~/modules/GraphQL/types';
 
+/** Errors returned by the {@link useConfig} composable */
 export interface UseConfigErrors {
+  /** Error when loading configuration fails, otherwise is `null` */
   load: Error | null;
 }
 
-export type UseConfig = {
+/**
+ * Represents the data and methods returned by the {@link useConfig} composable
+ */
+export interface UseConfigInterface {
+  /** Returns the loaded config as computed property */
   config: ComputedRef<StoreConfig>,
-  loading: Ref<boolean>,
+  /** Return state of loadConfig Function as computed property */
+  loading: DeepReadonly<Ref<boolean>>,
+  /** Function to load the config */
   load (): Promise<void>
-};
+}