What is API Mesh?

API Mesh is a core feature of Adobe App Builder which provides an orchestration layer to aggregate all third part Api’s or adobe services (Adobe Commerce Cloud, Commerce Catalog service, etc…) with single end point. It combines multiple API sources and provide response for your application to consume. Mesh provides single GraphQL endpoint.

                By serving multiple sources through a single gateway and providing customise response, API Mesh create better end user experience for accessing your backend services. API Mesh uses a Reverse Proxy which accepts most of the API’s.

Reverse Proxy: A Reverse Proxy is a server that acts as an intermediary between a user and a web server. It’s placed in front of web servers to intercept and forward user requests.

Benefit of Reverse Proxy:

1. Conceals the identity of the web server, protecting it from direct attacks.
2. Caches content, which can lead to faster loading times. 
3. Distributes incoming traffic across multiple web servers. 
4. Can distribute incoming traffic during a DDoS attack. 

Read More

Why GraphQL:

GraphQL is a query language for your API that lets you query exactly the information you need and only the information you need. API Mesh allows you to use GraphQL to query multiple data sources simultaneously. It reduces over fetching and under fetching of data.

What are the use cases of API Mesh?

There are multiple use cases that we can think of, I have listed some of them below.

1. Your e-commerce store wants to connect with your ERP system to check real-time inventory along with multiple warehouses.
2. When your store front wants to connect with different Adobe services like Commerce Catalog service or Product recommendation
3. Your store wants to sync up data with different system after processing an order.

API Mesh works with different API like REST, SOAP, GraphQL, JSON schema and custom API (Until they are built on open API standards)

API Mesh Architecture Design

API Mesh Installation

Prerequisites

1. Node.js
2. NVM 18.~
3. Adobe IO Account
4. API Endpoint (Or use any open API which support swagger)
5. Adobe Commerce API (Magento API end point GraphQL/REST)

Install AIO CLI

npm install -g @adobe/aio-cli

Install API Mesh AIO Cli Plugin

aio plugins:install @adobe/aio-cli-plugin-api-mesh

Create Mesh in Adobe IO Developer Console

To create Mesh in Adobe IO you need to create your account first and then create app from template, then create APP Builder project with default configuration.

1. Navigate to  Adobe Developer Console -> Project -> Workspace(Stage/Production) -> Add Service(Left Sidebar) -> API -> API Mesh -> Create
2. Create mesh.json file in your directory with following configartion.

{

"meshConfig": {

    "sources": [

      {

        "name": "Commerce",

        "handler": {

          "graphql": {

            "endpoint": "https://venia.magento.com/graphql/"

          }

        }

      }

    ]

  }

}

aio auth:login

aio api-mesh:create mesh.json

The aio api-mesh:create response assigns you a meshId. Use the aio api-mesh:status command to see the status of your mesh creation. You can run the aio api-mesh:describe command to get your apiKey and a GraphQL endpoint that you can use to query your mesh.