Get started with API Mesh
If you’re new to API Mesh for Adobe Developer App Builder, Adobe recommends starting with this introductory tutorial, before progressing to the other videos and tutorials.
What is API Mesh
API Mesh combines multiple sources of data to get a single response for your application to consume.
View the full API Mesh documentation
Who is this video for?
- Any developer new to API Mesh or Adobe Commerce with limited experience using Adobe I/O Runtime and API Mesh.
Video content
- Overview to API Mesh
- Links to supplimental documentation
- Use case for doing real time inventory check at checkout
- Moving development efforts and resource usage away from your commerce application
Transcript
This is Russell from Adobe. Let’s discuss API Mesh, and ensure that you have a good understanding of its purpose and why this tool will benefit any Adobe Commerce project. Here is what Adobe calls out for the definition of API Mesh.
API Mesh allows developers to combine multiple data sources into a single GraphQL endpoint. Unlike working with APIs, the GraphQL query language lets you determine the information the response contains. By serving multiple sources through a single gateway and providing a customized response, API Mesh creates a better end-user experience for accessing your backend services.
Why is this important? Adobe has wanted to use this technology but until recently was unable to do so. In order to use API Mesh they built a product called Adobe Developer App Builder, or App Builder for short. Okay, yes, we need to explain that a little bit further. Here is the Adobe definition of API Mesh and it’s use with an App Builder.
The API Mesh is a decoupled API platform that enables enterprise and mid-market developers to integrate private or third-party APIs and other software interfaces with the Adobe products using Adobe I/O. This allows businesses that need to access functionality across multiple systems provide better end-user experience. The API Mesh allows developers to configure multiple APIs and other sources and serve them through a single gateway. Developers can query the combined sources through a single GraphQL query.
Okay, yeah, that can be a bit overwhelming. Let’s make it a little bit easier to understand what we just went over.
Here is an example of what API Mesh can do.
You have a company, you have a brick and mortar storefront with a sales team, and you also have an Adobe Commerce website.
Let’s say you sell socks, not just any socks but special limited edition socks. This week’s special is Happy Pi Day, in case you were wondering.
Your socks are manufactured, warehoused, and shipped from four locations across the United States.
It’s important that your point of sale, your system that your sales team would use to place orders and your Adobe Commerce website are all able to connect to your four different ERP systems. It’s also imperative that they are responsive and can perform their actions often. This way, you can ensure that the inventory level shown on the website are accurate, as well as in your backend systems where your sales teams and phone orders would take place.
Where the speed of these APAs are not as important for those point of sales systems and that office software used by the sales team and phone orders. It is very important that your website have the fastest responses available.
By using API Mesh, you can gather all this information simultaneously and we get the result. And remember, your website can query it. Your point of sale can query it. And, you know, any other systems that need that information can all query it. That’s the whole point of using this abstracted API Mesh.
Another opportunity for a better customer experience is to do realtime inventory checks as a customer is getting ready to check out. We want to make sure that their order of 314 Happy Pi Day socks can be fulfilled. By using Adobe Developer App Builder and making use of API Mesh, you can hit a single API endpoint and get back the sum of all of the inventory amounts from all of your warehouses in roughly 300 milliseconds. What used to take 200 to maybe 250 milliseconds for each of the four API calls to each of your warehouses, and that combined results in at least a second of a response time, is cut down to roughly 300 milliseconds.
Now, you can do a final check as the customer’s entering checkout to see if the available stock is there in order to fulfill the order and even update your commerce application with the latest inventory totals all at the same time.
API Mesh is meant to consolidate several sources of information, prepare the results, and only return the relevant information to fulfill your request. As a huge accidental bonus, all this development, all the CPU usage, memory usage, and everything else about this process, now resides outside of your Commerce application. This leads to faster updates because all of that code that manages the API calls are external to your system. There’s no downtime to your Commerce application when changes are deployed because the code’s external. And it’s one less thing to consider and stress about during the upgrade process of Adobe Commerce.
As stated earlier, all the API calls can happen simultaneously so you’re only waiting for the slowest one to be returned before the results are meshed together and returned as a single, well formatted response.
I hope this helps you with your first introduction to API Mesh. Hopefully this was a good introduction for the rest of these videos. And tutorials that we have here in Experience League on API Mesh, and of course, Adobe Developer App Builder where this new tool can be used.
Example use cases
Your Commerce application has a REST API and a GraphQL endpoint. For example, you could use the REST API to apply special pricing or the GraphQL endpoint to handle inventory status. Using API Mesh, you can define both endpoints, retrieve the information, and return it to the requesting application as one response.
What is a reverse proxy
As a developer using Adobe App Builder and API Mesh, it is not necessary to understand what a reverse proxy is. However, if you are interested in the overall functionality as it pertains to Adobe App Builder, use the following resources:
Useful API Mesh resources
recommendation-more-help
3a5f7e19-f383-4af8-8983-d01154c1402f