API Mesh – Adobe Commerce App Builder

API Mesh is a core feature of Adobe Commerce App Builder that aggregates multiple APIs into a unified GraphQL interface.

It allows developers to connect Adobe Commerce’s native REST and GraphQL APIs with external systems, such as third-party shipping, CRM, ERP, and inventory management systems.

These systems are then exposed through a single, unified endpoint.

By consolidating multiple APIs into one, API Mesh helps simplify the complexity of integrating with multiple systems, reduces latency, and enhances overall performance.

Developers no longer need to handle individual API calls separately for each system.

Key Benefits of Adobe Commerce API Mesh

Unified API Access

API Mesh allows developers to access multiple APIs through a single GraphQL endpoint, providing a consolidated and simplified way to interact with Adobe Commerce and other third-party APIs.

GraphQL Interface

Even if the underlying APIs are REST-based (such as Magento 2 REST APIs or third-party APIs), API Mesh exposes everything via GraphQL.

This makes it easier for developers to query data from different sources and fetch exactly what they need in a single query.

Data Aggregation and Transformation

You can aggregate data from Adobe Commerce and external systems like ERPs, PIMs (Product Information Management), or shipping services, transforming it into a single GraphQL schema.

This enables seamless integration and better consistency in how data is consumed by applications.

Improved Performance

API Mesh supports caching and data batching, which can significantly reduce the number of API calls and improve overall performance, especially for front-end applications like eCommerce storefronts.

Security and Centralized Management

All API calls are centralized within API Mesh, allowing you to manage authentication, authorization, and rate limiting in a single place.

API Mesh can handle different authentication mechanisms (OAuth, API keys, Bearer tokens) for different data sources.

How API Mesh Works with Adobe Commerce ?

Here’s a breakdown of how API Mesh works in the context of Adobe Commerce:

Step 1: Set Up Adobe Developer Console Project

• Log into the Adobe Developer Console (https://developer.adobe.com/console/).
• Then click Create Project From Template.
• Select App Builder.
• Change the Project title to “Webkul Test”.
• Click Save. You now have a project named “Webkul Test” with workspaces named “Production” and “Stage”.

Step 2: Install the API Mesh plugin

Install the API Mesh plugin with the following command:

npm install -g @adobe/aio-cli-plugin-api-mesh

Step 3: Create a local directory

Create a local directory named “adobe-app-builder-new”. Then navigate to that directory in your CLI by using a command similar to:

cd my_path/adobe-app-builder-new

This directory will contain your mesh.json file, the configuration file for your mesh.

Step 4: Create a mesh

Run the following command to log into Adobe IO:

aio login

Create a file named mesh.json with the following contents:

  {
"meshConfig": {
    "sources": [
      {
        "name": "GraphQl",
        "handler": {
          "graphql": {
            "endpoint": "magento-instance-url/graphql"
          }
        }
      },
      {
        "name": "REST",
        "handler": {
          "openapi": {
            "source": "magento-instance-url/rest/all/schema?services=all"
          }
        }
      }
    ]
  }
}

This mesh configuration file defines the sources for retrieving data and the transforms to manipulate it.

In this example, we use magento2user.webkul.com/abdev247/pub/, an Adobe Commerce sample storefront, as the data source.

Run the following command for create mesh:

aio api-mesh:create mesh.json

Press Y and hit Enter to confirm the creation of the mesh. The configuration and related details will be displayed upon completion.

API mesh may take a few minutes to fully propagate. To monitor the build progress, use the aio api-mesh:status command. Once the mesh is successfully built, you can move on to the next step.

Step 5: Access the Mesh

• Execute the aio api-mesh:describe command and copy the Edge Mesh Endpoint URL provided.
• Open this url in browser. You will get both Rest and GraphQL endpoints in explore section

Step 6: Define the GraphQL Schema

API Mesh uses GraphQL to expose data from Adobe Commerce and other connected APIs. You can either auto-generate a GraphQL schema or manually define one that maps to the APIs you are integrating.

Once the APIs are set up and the schema is defined, you can start querying the API Mesh using GraphQL.

API Mesh handles the complexity of fetching data from multiple sources and returning it in a single response.

Example GraphQL Query:

query MyQuery {
  products(search: "") {
    items {
      name
      thumbnail{
        url
      }
    }
  }

  storeConfig {
    store_code
    store_name
    base_currency_code
  }
  GetV1DirectoryCountries {
    ... on directory_data_country_information_interface {
      id
      two_letter_abbreviation
  }
 }
}

These queries demonstrate how you can return data from multiple sources within your mesh with a single request.

The products and storeConfig  query returns information from the GraphQL handler, while the GetV1DirectoryCountries query returns information from the REST handler.

Common Use Cases for Adobe Commerce API Mesh

Unified Product Data

Easily aggregate product data from Adobe Commerce and external systems like PIMs or ERPs, ensuring consistent and enriched product information across your eCommerce store.

Use Case: A store that uses a PIM system to manage advanced product attributes can integrate both systems via API Mesh, exposing a single GraphQL endpoint that serves unified product information.

Real-Time Order and Inventory Management

Integrate Adobe Commerce with an external ERP or order management system to retrieve real-time order status and inventory levels.

Use Case: If Adobe Commerce is managing the order data but inventory is managed in a separate ERP system.

API Mesh allows you to create a unified query that pulls order and inventory information in one call.

Omnichannel Commerce Integration

Use API Mesh to integrate Adobe Commerce with external systems like CRM, marketing automation, and customer service tools, creating a unified customer profile across channels.

Use Case: A company that uses Salesforce for CRM and Adobe Commerce for transactions can use API Mesh to unify customer data.

Allowing customer service teams to see both CRM and order history in one view.

Shipping and Fulfillment Integration

Connect Adobe Commerce with third-party logistics and shipping services, streamlining the process of fetching shipment tracking details and updating order statuses.

Use Case: Retrieve order data from Adobe Commerce and shipping details from a third-party logistics provider (e.g., FedEx or UPS) in a single API request.

This enhances the customer’s ability to track their shipments seamlessly.

Advanced Features of API Mesh

Schema Stitching

API Mesh can merge the GraphQL schemas from multiple APIs into a single, cohesive schema.

This allows you to easily query multiple data sources (both Adobe Commerce and third-party APIs) through a unified API endpoint.

Field Resolvers

API Mesh allows you to define field resolvers, which map specific fields in the GraphQL schema to different APIs or data sources.

This makes it possible to fine-tune how data is fetched and merged between Adobe Commerce and external systems.

Error Handling

API Mesh provides built-in mechanisms for handling errors and managing failover situations. If one API fails, it doesn’t disrupt the entire query, and partial data can still be returned.

Caching and Optimization

API Mesh supports caching at the query level, allowing you to cache the results of expensive API calls and reduce the number of external requests.

This greatly improves performance, especially for common queries.

Comparison: Adobe Commerce API Mesh vs Traditional API Integration

Feature	Adobe Commerce API Mesh	Traditional API Integration
API Management	Unified GraphQL endpoint for multiple APIs	Individual API calls for each service
Query Language	GraphQL	REST or GraphQL per API
Aggregation	Combines multiple APIs into a single query	Separate API calls
Performance	Optimized with caching and batching	May require manual optimization
Security	Centralized security and rate limiting	Managed separately for each API

If you need any technical support, please contact us at support@webkul.com.

Additionally, explore various solutions to improve your Magento 2 store’s functionality by visiting the Magento 2 plugins page.

For expert consultation or to create custom features, hire Magento 2 Developers for your project.