Version: next

Legacy feature flags

Some modules in Front-Commerce use feature flags to enable or disable its features.

Feature flags are resolved by the FeatureFlagLoader which is typically overridden in the contextEnhancer of each module supporting a feature flag.

Creating a Feature Flag Module

To implement a feature flag in your module, you'll need to create and configure several files. In this guide, we will implement a feature flag that disable the wishlist feature, which is enabled by default by Front-Commerce's backend extensions (Magento2, Magento1 and Gezy).

Create the GraphQL Module Definition

First, create a module definition file that defines your feature's namespace and dependencies. You will need to add the dependencies of other modules that control the feature flag you want to disable:

my-extension/index.ts
import { createGraphQLModule } from "@front-commerce/core/graphql";

export default createGraphQLModule({
  namespace: "MyExtension/Wishlist",
  dependencies: ["Front-Commerce/Core", "Magento2/Wishlist"], // or "Magento1/Wishlist" or "Gezy/Wishlist"
  loadRuntime: () => import("./runtime"),
});

Implement the Runtime Configuration

Next, create a runtime file that sets up the feature flag loader and any necessary services:

my-extension/runtime.ts
import { createGraphQLRuntime } from "@front-commerce/core/graphql";
import WishlistFeatureFlagLoader from "./featureFlagLoader";

export default createGraphQLRuntime({
  contextEnhancer: ({ loaders }) => {
    return {
      FeatureFlag: WishlistFeatureFlagLoader(loaders.FeatureFlag),
    };
  },
});

Create the Feature Flag Loader

Then, implement the feature flag loader that determines whether your feature is enabled:

my-extension/featureFlagLoader.ts
const WishlistFeatureFlagLoader = (loader) => {
  return {
    ...loader,
    isActive: (name) => {
      if (name === "wishlist") {
        // Control whether the wishlist feature is enabled
        return Promise.resolve(false);
      } else {
        // Check other modules
        return loader.isActive(name);
      }
    },
  };
};

export default WishlistFeatureFlagLoader;

The if (name === "wishlist") above is needed as the feature flag query is queried by module name. The return loader.isActive(name); is needed to propagate the query to other modules.

tip

If a feature is not explicitly configured in the feature flags, it will be enabled by default.

Creating a Feature Flag Module​

Creating a Feature Flag Module