Orchestrating Commerce APIs for Headless Implementations

Transcript

Good morning, good afternoon, good evening. Wherever in the world you happen to be watching us from. Thank you for joining us today for App Builder Live. We have, I think, a pretty fantastic show. It’s something that a number of folks have been asking for, which is a deep dive into API mesh. But without further ado, let me introduce revamped and hey man, how are you doing hero? Thank you so much. Okay, I am going to hand it over to you and we’ll just jump right in okay. Thank you so much. On. Hey everyone. Welcome to the deep dive session for API mesh with Adblock. Before we learn anything new, I believe it’s good to ask three questions. First, one is a what, then why and then how. So let’s start with that. Let’s see what is APM mesh and and try to understand like what’s the purpose of it. And then a normal network. So imagine there’s a tool like you can combine multiple sources data sources. It could be a standpoint. It could be a GraphQL endpoint open API spyware, anything. Imagine there’s a tool that can combine all of them into a single GraphQL endpoint. Imagine how simplified your life would be as a frontend developer then. Now you don’t need to handle so many of your sources and imagine all of the sources if they can be used against a single entity, and this is going to make your development much smoother. Opponents much faster and enhanced the application performance, mainly because it’s dependent on GraphQL. And that’s exactly what the API measures. So it is an extensive losing list kill proxy. That’s a lot right. So let’s break it up. So it’s a reverse proxy of that. Meaning it sits in right in front of all your backend sources. And just like any reverse proxy, it offers all the benefits that get with that. You’re good with it. I mean, leave a better security, added benefits of tech modeling or, you can have throttling Adidas protection, all of it. And then it’s a GraphQL proxy, meaning it’s not just relying all your messages, all your request from your front end to the backend, but it also making some thoughtful decisions in the GraphQL world. So let’s say you have all these sources that you want to talk. So instead of making multiple calls to these sources, you can make just one single GraphQL call. And API mesh is going to make sure it breaks things up and navigate each one of them to the individual sources they belong to. And it’s extensible, meaning it’s not just being a dumb proxy. You can actually add business logic. Then, you can add business logic like you can pull in multiple sources. Do something with that data before you run it back. And all of these you can achieve with low or no code. And that’s what metals. So imagine let’s say you have an example where you or you run an e-commerce store. And this is make that owned a holiday season and you want to run a promotion. You want to show some banners, content and you want to apply some discounts to your products. Imagine if you want to do this in a traditional world, you would do it in the backend. First of all, you have to set up your your notifications or announcements API. It could be marketing backend or anything, but you have to set it up through companies or whatever user backend and then forward it from there to your front end and have your front end render them. But with API mesh it’s much easier because you don’t need to touch commerce anymore. You don’t need to touch your backend, you just need to do these things on the fly in middleware, and that’s where it meshes. That’s why it is called extensible. And at the same time, if you want to add a discount or sale or change anything with respect to your business logic, you can do it. And mission.

I specifically brought this example up mainly because this is exactly what we’ll be going today towards the demo. Okay, so why that we actually answered what APM meshes now looks. Now let’s look at why. What does it give us. Like I was saying, since it’s a reverse proxy, you are adding a lot more security for your backends in the middleware. And instead of touching all your backends, I’m going and adding all the touch and load balance. Of course, DDoS protection, throttling or any of it. You can literally do that at the middle layer and offload all of that. And now since APM mesh is handling all your requests and it’s handling all these checks and balances, your CPU, Ram and everything, all your resources for your backends are spared. They are they are doing like less work, which means more stability and more robustness.

And and also the fact that, it’s a much better tool and much makes life much easier for developers and also your frontends, because previously, when you wanted to do something, any, any change on your backend, you had to do a deployment that paid for the deployment. Again, deploy your front end and on all these things. But now with API mesh it’s much easier. And the deployments on mesh take not more than a few minutes. Sometimes a minute or two. So with all these things in that in mind, let’s actually look at what APM mesh can. So for us and what does it actually look like.

Okay. So let’s I’m I’m going to walk you through the documentation because that’s going to be your best resource when you actually want to use APM mesh for yourself. Mesh is not an individual product. It’s a licensed product along with developer. So they are to be developed popular. So if you get license for a block, you get license for a APM straight away. So let’s imagine you already have it. Let’s see what what does it take to create a mesh. And also what does a mesh look like. So mesh like I was saying, it’s you can achieve all these things with low or no code and everything is done through a single file or mesh config. Everything else you provide, along with your mesh config is just substitute data for it. But the main crux of it is your meshes and handlers. So these are the main things in your mesh.

You can create sources on your mesh. Right now let’s look at a quick example where you only have a single source at this point eight the mesh is just acting as a proxy. It’s hiding a common end point. You can give you an endpoint here and you can name your source whatever you want. It’s easier for organizational purposes so you can organize all your data and then you, sources involved. But the main thing is your end point of the source. So in this case we are looking at which is the size of that. We’re looking at an open API source. So your mesh right now is acting as a reverse proxy for the open at the AI, source. Similarly, there are a lot of the sources that you can add. You can bring in a GraphQL source straight away. You can bring in Json schemas. Json schema is a name given to, Rest endpoints. So you can as you can see here, I can define a source called cards for example. And give any if if you have any shadow card or if you have any card sources that are doing anything specific, anything special on top of what Commons does, you can maybe define it as a source here. And if it was a Rest endpoint, is refusing open API or GraphQL, you would use Json schema and you would just give you a base URL and then define define operations on top of it. If you are aware of how GraphQL works, you have to define operations like fields, for example. Similarly, what we’re doing here is defining these operations on the source itself. And that is it. Once you do this you have source is going to be ready. Your mesh is going to be ready. It’s going to be deployed in a few minutes. And then you can start using it as if you were using the source directly.

And all these things are interchangeable. You can have a mesh with two way open API sources, one GraphQL, a tons of Json schemas, and all you can have. How many you can, and and that’s where the mesh comes in. It’s an orchestration tool at the heart of it. You can orchestrate all your backends in the middle layer. There is also the soap handler, which is experimental at this point. But if you have any sources that that that run on Soap protocol, you can continue to use them for you. But that’s the crux. You got to start with handlers. You know, you have to provide at least one handler and that’s your mesh. And at the same time you can actually transform your data. You can change if let’s say you have two sources that are conflicting, they have few fields of conflicting. You can maybe use a filter schema to remove one of those fields from one of the sources, and use the feed from the other source.

Let’s say you have commerce which has countries, and then you also have a different source, maybe a currency, for example. And they have a discounting source, which also provides currency. Both fields are conflicting right now. Maybe you can skip one of them. So for conflict management you can use filter schema. So it’s going to filter out few things. For example here what we have as am an austere go these two sources. And let’s say I don’t want the category and custom order customer orders to be used. I’m just going to use the filter schema to filter those things out. Similarly, you can use a prefix schema. So if you want to handle conflicts but not remove them, you can just add a prefix saying if if I have a commerce, source, every field or every operation that’s coming from it should have a prefix called commerce underscore.

And similarly you have lot of those. It’s very hard to go into each individual, each one of them, because each one of them define something. They stand for something. But you can transform your data. Similarly. You have other features, advanced features like you can set up course headers. If you want to use your mesh on a front, then obviously you need to set up course. And if you have caching, the best part of APM mesh is you can add caching at the middle layer, meaning all your backends. They don’t need to add caching of them. You can maybe bring in your hand cream. For example fastly we have documentation on like how you can do this through fastly, but you’re not limited to faster. You can bring in your own Syrian and put the Syrian in front of mesh. That way you’re also adding caching layer to one. So every time you make a request, if your GraphQL request has is trying to hit 3 or 4 sources, instead of going to each of those sources and increasing the time it out, you can maybe put a obsidian in front. So now the C10 is going to cache your request for the first time. Next time on was it’s going to return it. And since you on the CDN, you have full control over how you want to define it or how you want to invalidate the data, there.

And then there are other things we have launch other features, for example, hooks. It’s one of the most famous out of processor extensibility feature. If you want to do something right before an operation is powerful. But like maybe you wanted to add authentication, maybe your sources already gave you authentication, but you want to do something else. You want to talk to a third party source, verify if this if this query is valid or not. Verify if this query is hitting the right sources or not. All those things you can put there. You can create a hook on the mesh itself. And here we have a before all hook, which means whatever you provide in here, it could be a, a serverless function, it could be a local file. Whatever you provide here, it’s going to be run first ahead of your, operation. And if this response true or false, depending on that, if it throws an error, obviously the query is returned with the error that the throw. If not, it’s going to continue. The operation is going to continue. So you are adding all these lifecycle hooks around your operations and adding more logic to your backend sources. Similarly, there is secrets management where, if you have any secrets, any tokens or API keys or anything, you don’t want your frontends to know anything you don’t want to put in your front end. Maybe you can put it in the middleware and use it from there. And since these, this is an integrated, approach, we don’t own the secrets. You own the secrets. You provide the secrets we completely encrypt them end to end, and we only use it on the mesh.

And you can always go through the documentation around understanding how to set up these secrets on a mesh, and how to start using them inside it. But for the sake of the demo, let’s look at a very simple example to start off with. And then eventually we get into the complex part. Okay, so to get started, first of all we need to set up the CLI. The IOC allow because that’s what we’ll be using to interact with the mesh to create, update or query a mesh. It’s going to give the endpoints which you can use to query along with it. We also have the dev console approach, where you can look at your meshes. You can manipulate them on the dev console at the moment. But then you can you can look at your mesh shows, you can look at all the information that you would need usually to create your mesh. So to get started, let’s actually let me show you like how the Dev Council has laid out and how the organization and everything the organization structures, because that’s exactly what we’ll be using for the CLI.

All right. This is what the dev console is going to look like. Imagine let’s say you already have access to dev console and you already have access to Abdullah. You should be able to create a new project in favor of time. I already created a project here API Mesh Deep dive session. And as you can see, once I open this up, I have multiple workspaces in it. And this is just a logical separation of where you want to put your mesh.

And if I put something in dev, it’s not going to interact with what I have in production. Not necessarily. This is demo. This is production. I just happen to name them that way. So it’s easier, for us to see how, maybe a team can propagate meshes. Maybe they can have a mesh in dev their, their testing and then slowly propagate it to show it in production. This usually what developers do, but then you can absolutely name them anything you want. For example I have a dev instance here in favor of time. I also created a mesh, but we’ll see how to get to that. I’ll just quickly show you how the UI is going to look like. Once you create a mesh on a dev workspace or any workspace, you will see, a card called a mesh. Let’s open it up. You get all this, all the important details that you would need to stack using this mesh. So when it comes to mesh, or APM mesh, you have two actors. One is a mesh user, the other is a mesh only. So the mesh owner is the person or the team who owns that mesh, who creates and manipulates that mesh. And the mesh users are typically the frontends that use it. So the mesh users are only aware of the query. You are what you see here. You can copy and start query it. You can use your frontend. You can use, any GraphQL playground, graphical Altair, postman or anything. Today we will use a combination of graphical editor and postman mix of all of them. And then what do you see here? This UI is not available to mesh users. This is only for mesh on this. Got to be a developer or an admin to have access to this. And this is all through Okta and everything. So this is exactly how once you create your mesh, it’s going to look like now that we have seen this, let’s actually see how you can get started with the mesh.

Let me go to terminal again. In the interest of time I’ve set up the CLI and the CLI. What you need is IO and then the API mesh plugin on top of it. That is all. And the documentation, around getting started will help you through the whole process. You can set up CLI and then you can set up your environment. This is the plugin I was talking about. And the first thing very first thing you would do is, init a workspace on your local. So you need to first of all set up your, your file structure where all your meshes and everything are going to decide. So for that I am going to do IO API and mesh in it, and I have to give a name to it. So let’s call it Adobe API mesh API. It’s a mouthful but let’s see okay. First of all it’s going to ask me do you want to create it in the right workspace or not? Yes. And then do you want to initiate git? This is a very important question. Initiating git is going to help you with, organizing the your code in any good triple not necessarily GitHub. And it’s easier to communicate with your team and you since it’s a version control, you can also set up your version control in such a way that a certain branch is connected to a certain workspace. So we have earlier seen that we have multiple workspaces, and you can create how many workspaces you want on a particular project. And you can maybe connect the dev space to the dev branch and production to the main branch and etc… So it’s much easier and it’s our suggestion as well to use it and mostly GitHub and I’ll get to that. And why I was suggesting GitHub and even you can see it. So let’s say we have get I say yes, I want to setup it. And now it’s going to ask me what’s your package manager? I usually set it yarn. It’s much faster, but if you’re comfortable with npm can start doing it. And then it’s going to ask me this directory is not empty. Obviously I have other things going on in this directory. So I’m going to create a subdirectory with the name. That’s it. These are the three four questions it’s going to ask you. And now it’s going to set up my local instance. And it’s it usually takes a minute. But let me meanwhile I think I have it open here. Yes, I have a sample open again. In the interest of time, I set it up. This once, it sets up once the init is done, the command. This is how your workspace is going to look like. Rinke is a little bit like how it’s going to look like you’re going to get all the necessary files needed for you to start local development, start publishing your meshes and using GitHub. And, and I’ll get to that. And then using the CI CD for automatically publishing your meshes without you manually doing them every single time. So let’s open the mesh. Jason. This is a very simple mesh. Jason. Right now I have just mesh config and just one source, and it’s the comma source, and the endpoint is just the open endpoint that we use. And when you write Node.js and on top of it you can see that I have provided an extra config called response config and it’s called included and head step details. What this does is if you have multiple sources, it’s going to give you more insights into how your sources are actually doing right now. This might not help you much, but eventually when we start adding more sources and more customizations on top of them, this is going to help us a lot and you don’t necessarily need it, need this in production. And if you see the performance is going down or your network bandwidth is going up, consider switching it off. But it’s usually pretty small. Okay, okay. All right. So we are done at this point. So workspace has already created the local folder structure. So let’s actually open it up. Will do. I use VS code. But again you can use any ID of your choice. I again use VS code mainly because we already provide all the VS code related configs along with the inner command. So let’s actually open it up code and what we need it in the middle. Be it the error message okay.

Right. Let’s close this. Let’s increase the size of that. All right. So this is exactly how earlier I was showing how my folder structure is going to look like. And since we said yes to get our automatically vs code picked up all these things and I’ll be get to that soon. But then let’s look at the mesh. Similarly, this is the exact same mesh, what we had before. But the only difference is we have instead of using the endpoint directly, we actually provided a variable. You’re saying the endpoint for this commerce, it is actually going to come from environment. And the variable name is cosmos endpoint. So if I again every folder structure gives you an entry by default. So if I open the enemy you have this field and all. It’s empty right now. But you can you can just quickly pick up this name. So to this URL put this here and then that’s it. You don’t need to do anything. So your mesh is usable straight up. So let’s actually try and see how this mesh looks like. Once it’s once it’s running. So we have a command for that API mesh run. And you want to give the file that you want it on the config that you want to.

So let’s do this. You can see it’s immediately building on the right. You can see a few folders being created. These are actually all the artifacts and all the schemas it is creating internally. So before I query it, it spit out a URL where I can query my mesh. But before querying let’s actually see how does an artifact look like. So here is an artifact sample. Exactly. We have a schema. And this schema is very important. This schema right now is actually coming from just one source. We only have one source right. We just provided a comment by default. But if you let’s say you had multiple sources, if you added like 4 or 5 sources, this schema is going to be quite important for you because it’s going to be the unified schema for that whole mesh.

Along with it, if you want to drill down into each one of those individual schemas, you do have the sources folder and how to handle it. More sources here. I would have seen a lot more here. Again, this game is the same right now, but if you had multiple sources this will be the sub schema. This is going to be the superset of it. All right. You don’t need to know any of these to start using your mesh. You just need to know, that once you run the run command, you’ll get an endpoint here. I can copy this again. Like I was suggesting, you can use any GraphQL playground of your choice. I have Altair here. It’s a Chrome extension, so just paste your endpoint. And, this is a very simple, very simple sample query. And again, for the sake of it, I’ll probably give store name as one. And once I make let me with a size a little bit. All right then I make this request. Right now this is actually going to my local instance of the mesh. But internally that mesh is actually forwarding this to venia. That’s what we used.

And as you start adding more and more of these sources, you can start creating them. Depending on the playground that you’re using, you get access to the docs, so it’s much easier to use them. You can click on this. And I believe you can start adding the docs in certain of your playground. So you can directly click right click and then add it to your existing query.

All right. Now we have seen how a mesh could be and like how the local diff is going to look like. So let’s actually push this up and let’s see how easy is it to create this mesh and deploy it. So I’m going to stop the server and then I clear it. And now I’m going to use APM mesh Create. That’s the create command. And I’m going to give Mesh start Json. And that’s the fine. Again if you can see even though I had some placeholders, I really don’t need to give them the mesh. The create command can automatically pick up all these references, and it’s going to build all of them into a single artifact and push it.

So once I do this, it’s going to ask me, where do you want to create, like I was showing here, if I go back to Dev Console viewer on the Commerce Extensibility Lab, that’s my organization and my project is APM Mesh Debrief Session and my workspace is Tab. I already happen to have a mesh that for the for showing you. So I can probably use maybe a stage and a good Q would be on the UI. If you see APM mesh already on your workspace card, which means there is already a mesh it. So consider using maybe a stage and you can always create new workspaces, but. So I’m probably going to use this stage I’m going to set up Cosmos extensibility. This is a search right. Not mine happened to be right at the top. But you have more. Or you can always switch them.

So I’m going to select this and it’s going to ask me do you want to save this information for future operations. So it’s easier. But you don’t have so many button clicks. Next time if you want to update or do any manipulation with your mesh. Yes. And then I’m is at that stage. Yes. The last question it’s going to ask you, do you want to create it. Because this is a side effect operation, meaning you can create similar to how update and delete. It’s going to ask you, before continuous.

So let’s create it right now. What it’s doing is it’s going to create the mesh along with it. It’s going to create an API key, and it’s going to subscribe that API key to the API mesh service. And finally it gave me this endpoint.

I said it usually takes a minute or two. Sometimes it even faster. Mostly. It must be already done at this point. So let’s actually go to Altair. I’m going to use the same query and I’m just going to switch the URL. I don’t have the local URL anymore, so I’m just going to put the endpoint we just saw. That’s it. So now that I’m actually getting it from the deployed instance. So literally within less than a minute we were able to deploy Ami. You can see this is literally working much faster. So your deployments are faster and easier. And right now you’re done basically creating your mesh. But what more can you do with this? Let’s say you you lost your, endpoint. There is a command for you to get all the details necessary to start using your mesh again. So API mesh described gives it describes the whole mesh for you. Again, as you can see, it didn’t ask me all the details again because I said please store this information for the future operations. So now it gave me all the information I would need and it gave me the endpoint as well. You can start using this. You can use the get command to get the whole config and you can also download the not that you need to do. You use this, but you can also do it from the UI. You can go into dashboard. Let’s actually go to stage because we recently created let’s go to stage and API mesh. And this is where it does. You can download the mesh schema right from there. And you can look at right now I only have sources. So it’s going to show you so so I don’t have any transforms or any files on the mesh. It does nothing. But let’s actually see. Oh a lot do lot more with the mesh. Not just having it as I do as proxy. So what I’m going to do now is, push up this mesh.

So right now this is my local local mesh folder structure, right? I didn’t I never committed anything. Everything is still in my local. I can set up a GitHub endpoint and start pushing them here. But again, in the interest of time, I already have created this deep dive session a similar to what you see here. I just injured the project and I already push this to a GitHub.

So let’s actually see how this looks on GitHub. And what more can we do with that. So I have this here. This is my deep dive session. And once you push it up to GitHub is a size push it up to GitHub. This is how it’s going to look like I happened to create multiple branches there. Like I was saying, maybe my base branch is connected to a dev workspace and main is going to do production. You can do you can set it up however you want. We don’t we don’t suggest how to do it or we don’t add any rules around it. Okay. Once I push up my code base to GitHub, this is how it’s going to look like. But the main part is the dev container. Previously we looked at the mesh Json packages and all of those things EMV, but we also had other other folders like dev containers and GitHub workflows. So what are these? What are they? What are they going to do for me? So GitHub right now has launched a feature called Codespaces. I believe it’s been around for a while and I hope it’s it’s free. There are some fee free. So freemium service. So you have free tier that you can use. So right now you can click on code, you can create how many Codespaces you want. And you can share these with your team. So if you have a truly global team are working from home, you can always you can have, like a codespace and share Codespaces. And it’s like having vs code online, so only difference. Anyways, I’m not here to advertise Codespaces, but let’s see actually see how we can use Codespaces if you actually want though, since I was suggesting that init command already gives you all the dev container and everything related to it, all you got to do is come here and click plus to create a container. Usually creating a container takes a while around 4 to 5 minutes, because it needs to download all the necessary images and set it up again. In the interest of time, I have set it up for us.

This is super simple. Let me for the size.

Basically restart.

All right, maybe due to inactivity, just shut it down. But let’s switch it on right now. As you can see, this structure looks exactly like how as code as. So you can whatever you were doing in VS code locally. You can do it here. And whatever the VS code config that we have provided that will be applicable here. So right now we have the same mesh, the same exact mesh commerce and all. And let’s say I want to add announcements to it. I have a simple mesh right now, but I want to use maybe some announcement service or some marketing backend along with this and start adding announcements into my config. So we have these Adobe Commerce samples repo. It’s a public repo that anyone can use. There is this API mesh section. We have added few examples already, a few very useful examples with all the explanation needed unnecessary for it. We and we continue to end. We about to add more in the future. And here, for the sake of announcements, let’s actually go to the custom field example. And we did this. So this is how the custom field is going to look like. And my mesh config is again pretty simple. You already saw this. It’s a commerce endpoint. Along with this all I’m going to do is add some announcements. Create another source. And this time my announcement source is a dummy source. It’s, it’s like a lambda kind of thing. It’s this Cloudflare backend, dummy backend. And all it does is just return some sample data for us to use.

So what I’m going to do is I’m going to copy this config. You can do this as well. This is a public repo. So you can copy this whenever you insert your source your sorry your folder. Go ahead to use anything from you. So I’m going to copy this. I’m going to go to my mesh. And in the sources array I’m going to create a new source for this extra break. That’s it. So I added a new source and now I have to give, the value to it. Right. Like right now it’s a variable. So let’s actually go back. We have a sample and we along with it I’m going to go to Sample Envy. I’m going to pick up the sample announcements end point that we have created the dummy endpoint. I’m going to put it here. So let’s actually see what does this mean. So this is the definition for the new source I’m going to call it announcements. And it’s a Json schema meaning this is the Rest endpoint. So I’m going to use the Json schema handler. This was the GraphQL handler. And I’m going to give a base URL saying this is the base URL. Later I’m going to define operations on it because in GraphQL everything needs to be defined ahead of time. It’s it should be part of your schema. You should define it. So I’m going to define a fear called announcements on this source. And it’s again I’m just saying it’s a get call. You need to make it. And and it’s directly available on the spot. If let’s say you had a different path, maybe I could give like slash announcements or something like that. But right now my life announcements are directly available on this. Again, operations is an array, which means you can add how many ever you want.

And let’s go back and custom field along with those along with the source, which like I was saying, we need to create a new type. So I’m going to copy quickly this and then add it ups, I’m going to add it here after the sources array.

So what did we do here. We are adding new type definitions to our schema. Because like I was saying you want to use I want to let’s say add these announcements, which is the third party service into commas into the store config that the earliest. So I need to extend the store config type to add a new field inside of it, called announcements. And I’m just defining it as a string and as it and now we defined this announcement field on the store config. Similarly we have to give it a definition like we have to give we have to implement it. And that’s where it is coming from. The resolvers dot js file. So let’s create a file called resolvers dodgers. And again the definition can come from here. We have a file for the sake of the demo. Let’s just copy it paste them here and just format it. And there are comments I don’t like what each one of those lines are doing, but I’ll quickly go over. So resolvers, like I was saying, we created a field on store config called announcement. So we are now defining it. Sorry implementing it. So store config is the main key. And then in the sub key we have announcements along with it. We are giving a result resolver function. And all this resolver is doing is directly going to the announcements API that we earlier defined on the mesh, the announcements API. It’s going there. It’s calling the query and query a query called announcements. Where is we get this. We actually got this from the field that we defined. So this is where the definition we gave here is going to be useful in the implementation. And all I’m doing is going there and getting that announcement from it. And I’m just going to return it. It’s a very simple example, but it’s a powerful example showing you how you can do this without touching your backend. So let’s actually see, like I was suggesting, this is the escort just online. I can do yarn start and I can give my mesh or just let’s have once I do this, it’s going to start building my mesh automatically, just like how you saw earlier on your local. And it’s going to open up the browser for us.

All right.

And if you ever run into a case where your code space was taking a lot longer, or it’s not able to cope with the resources that you have, you can always create a new codespace with more configurations. And you can give like how many cores out, how much time do you want for the sake of it? Right on mesh is an extremely light service, which means even a two core and the very basic configuration is enough. It’s hard here I’m using a single monitor, so let’s actually open it up as a different browser. And I’m going to go to the GraphQL. And so once I do this every mesh is also going to give you a playground. You can switch it off here on but it gives you the playground. So it’s easier for you to try out your mesh and practice your meshes. So here the let me criticize. So here we have the store config. We have a store called all these are actually coming from canvas. But we just define an announcement field right. So let’s do this. Let’s say if I just to store code I’m just getting the store code. And like I was saying in the head step details, you can get more details about the source. You can say this was the query we did. And then what was the URL and how long did it take? We get that here, the response time. And similarly now if I want announcements we created this field. So I’m going to query announcements this time. So we got announcement back. We said get 40% off on all buyouts etc. etc… Like I was saying this is a dummy announcement. But you can extend this. You can put your marketing endpoint here and get all the marketing data and maybe plug it into commas or a and again, as you can see here we have two sources. This time hits to be details. If I we have two of them. Mainly because even though it looks like we are hitting commerce, we are internally hitting the announcements API. So that’s why you see hit step for both of them. You have commerce which took one 76 milliseconds. And then we have announcements which took 49 milliseconds.

So it gives all those extra details for you. You can switch this off in production if you one box. All right. So now my mesh is ready. I have created, a new mesh on top of the existing mesh. I added more features called announcements. I added custom resolvers and everything. What if I want to actually publish this mesh? We have this extra file here called GitHub. And then there is a workflows and deploy dot Yaml. Again this gets this. You actually get this with the inner command itself. And all this. All this does is automate everything related to updates for your mesh. You don’t need to do anything, you just need to commit your data. Commit your files. So right now I created two files, right? I updated my mesh Json to have the announcements API and defined this new field. And then in the resolvers I actually give definitions for that see. So let’s actually commit these two I would say added.

Announcements support in store config. That’s it. I’m going to commit my changes I’m going to push it.

You can see my my my git is already done. And if I go back if I go to deep dive session that’s the repo. If I go to actions, you can see there’s a new action going on and it has the name as what the the commitments or that we have added announcement, support, etc… Again, this is going to take a few seconds. So a few minutes because it has to set up the whole container there, right. It downloads open to and all it sets up I or CLI and it’s going to run the updates for you automatically. But let me. Oh sorry. Let me go to actions and let me show you a different example, something I tried a few hours ago.

So if I go here, we have one job completed. If I open this, you can see it, set up it, set up the job and everything. It did all that automatically. We have to set up all those things and then it set up the CLI created, selected the order project, workspace, everything and then it did the update. Let me open this up. It says IO API mesh run update and then it gave the mesh Json. Then I and it did the update immediately. And all of this happened automatically didn’t we didn’t touch the terminal every.

So let this and let this continue for now. But we have another example in the interest of time. Again I created another example, but this time it’s even more complex. So we added announcements as part of this. So what more can we do to on top of it. So let’s say I have these discounting API. And while running these announcements on the frontend on the other as a banner, I also want to apply some discounts on top of my existing products. So let’s say I have I’m getting my products from Catalog Service or the Commerce Service, and I’m getting them some discounts as a third party service. Maybe it’s some internal service of our own and, you can use all of them together. Let me show you the quick example.

I close this, close this. So this is pretty much same as what you have before. We had the commerce endpoint. We had the announcements endpoint. On top of it. I created another source called discounts API. And again it’s adjacent schema. You give the base URL. This is a dummy guy. All it does is it’s going to return, send me discounts for all the products you query. So you can see I’m defining all the discounts and all I’m doing is along with the resolvers, what we had before, the announcements, resolvers, I’m adding a new resolver called CART and batching resolvers. So let’s actually just see them quickly. We have a in the resolver. And what this does is it’s going to take the special price field on top of the configurable product. And it’s giving definition to it. And what we have implemented here, it’s take the maximum price of your product and apply the discount you got from your source. All these are available on the code samples. Or you can go to code samples API mesh and find all of them, chain mutations and custom field etc. etc. you can see find all of them there.

We are cutting close to the time. So what I’m going to do is I’ll show you this in action.

I have, so all of these are put forward to the advantage that we have set up port forwarding, which means you can you can copy this everywhere as this the local address.

Traffic. You’ll let me close this. So this is the query that we had, and I have the announcements I’m creating announcements and also query products right now. And as you can see I have a special price field. This is no different. It’s actually an existing field. But this time what we did is for an existing field we gave a definition to it. So all I’m going to do is click this display. And you can see that I have this value which is coming from Connors. But the special price is actually a combination of commerce and the discounting API. For the sake of transparency, let’s actually go to venue, which is the backend on the source for this example, with.

Robinhood tears.

Let’s go to act with Nio. If I go to Lavinia and if I use the exact same query here, this. Obviously you won’t have unknowns. It’s complaining saying you couldn’t find announcements on it because it’s something we added at the mesh level, not at the back end. It so when I click this to be oh yeah, obviously I don’t need this and I’ll.

So when I click this you can see that special price is always now no matter which field which product that you look at. This is exactly what we used to define that field in the mesh level. So if I go back you can see that special price actually has a value to it. And this is actually defined in the batching result where we just saw because we are adding resolver to the special price product. Along with this, there’s another thing that I also did. I just didn’t show it. So here we added a new result look or character resolver, and we added a new business logic to our existing backend. What it does is if, let’s say I have a cart with five or more products, I want to set free shipping. That’s a promotion that I want. Ideally, you would want to do this. Usually if you want to, do not maybe go to your backend and do all of this, but let’s actually see how the mesh does it. And here is the example. Let me open that cart. Mutations. It’s actually pretty simple. I’m defining a new field called new mutation. And I’m just taking the property and everything for it is defined inside the cart resolver. And all these examples again are part of the samples. So let me show you quickly how it looks in action. So for the sake of it, let’s create a brand new cart. Let’s do this okay. It created a new cart. I’m going to take this empty cart and let’s see.

Put this here. Let’s see how my products are going to look like. Let me close this. We don’t need extensions. So right now you can see there are no items on my cart. Obviously we create an empty cart. So let’s actually set up. This is just a setup step. I need to set up shipping address before I can add products any and I’ll set up all of them. So once I’m done here this is done. So let’s actually add more products. Add few products to the cart. Right now I’m adding a item called this VT0 to. I’m just giving a quantity three. And then I do this okay it is done. So if I go back to my queries, if I do this oh I added to the wrong one. I need to set on cart to base the new card that we just used.

All right this is done. So let’s go back and re query the cart. And how many do we have. We have a total quantity of three. And the shipping address is flat. It fixed. But now let me exceed that five limit match or exit whatever. So I’m going to add another three products to the same cart. I’m going to click this again. It’s a mutation okay. It’s done. So if I go back to queries, if I replay the query this time, you can see my total quantity is six more than five. And my shipping method is actually three instead of flagship. So this is a very good example of how you can use mesh without touching the source. So right now you have a query here which is touching the announcements. It’s touching the announcements API. You have the products which is coming from commerce. But in the middle the special price is going to a discounting API. And then you have CART where you have mutations that are going to a shadow card that you have, sorry, a custom cart, mutations that have clicked on the mesh. So with this single query we are literally hitting three sources and all with the single. If you see the extensions, this is pretty fast thing. I can just open up the skip details and sorry the Devcon sorry the developer tools. You can see all of these are done within 600 milliseconds. That’s very fast. So these are all the things that you can do with the mesh and the opportunities are endless. You can’t you don’t need to stop here. Like I was saying, we have these samples. Go ahead. Take a look at all these samples and try out. And if you don’t actually have access to a blender today, we need to get access to it to get. Actually, let me jump in there. You should probably have access to it if you are a commerce customer because all commerce customers it’s bundled with commerce. So yeah, that’s definitely the way to do that. So I had a couple of questions. Do you have a minute? Sure. Okay. Quickly I’m glad that all of them didn’t. We were all worked pretty flawlessly right there was a couple of times you put some wrong things in, which is good because you can check quickly back on track.

In terms of troubleshooting, but you talked about the speed at which the API mesh returns data. When you’re dealing with back end services that may be not as performant as you would hoped. How do you troubleshoot? Is this a problem with the mesh? Is is a problem with whatever API I’m calling? Are there tools that you can leverage to help sort that out? Great question, I missed that. Thank you so much. That’s the model. So we had this VS code folder here right. There’s a large star Json. And that’s going to help you set up the debugger without doing it. So let’s actually open up the terminal. This the terminal in VS code. Right now I’m running my mesh. But let’s actually stop it. And let’s started in the debug debugger. So we have a debug command. Let’s start Json and once I do this it’s going to start up the build and everything just like how you had earlier. But it’s going to start the debugger as well automatically.

And that’s how you can actually look at how long it’s going to take load. What is my source is actually returning before I return it back to the mesh. So you can see the debugger is started and it’s listening on a web socket. And this launched our Json that we earlier created in the init automatically. It’s going to help you set up the debugger. I just need to come here to the panel and just click play. That’s it. My debugger is attached and I can just hover on top of them, just like any ID and look at more details. But let’s actually see, let’s put the debugger on a particular, let’s say handler. Sorry, I resolver and see how it looks like. So what was the mesh we created. It’s 76F so I go I go to the mesh 576F. That is the mesh Reza saw. I just got it from the terminal and. Oh, sorry. There are tenant files here. Just go to this. This is where all your resolvers are going to decide. So maybe let’s go to the announcements. Resolver. And maybe I want to put the debugger here. I want to see what is the announcement. It’s returning. And also along with it let’s say I have a batch resolver. Let’s wait. That’s close this. And let’s put a debugger here a line here. So now this is still this is not even my local I’m doing this on line. And it same applies on your local as well. So let me go to my graphical. Let’s play this. And if I if you see it actually stop here you can look at the response. You can look at announcements. You can see them here. And on Spain this is exactly where we are going to return. And you can do whatever you want. You can go to the debug console and debug it further. And if you want to step in right now, there’s nothing to show. So let’s continue. And now that was done. That was the announcement resolver. This is the batch of results. It stopped here. So if I want to look at the discount and if I want to maybe look at my route and get all the details from that, if I want to look at the context ID there, you like all the context details that there are and what are the patterns that it was sent to me in the first place for the whole thing. And you can look at the request, reply objects and everything and let go, suggesting earlier we don’t have secrets. It’s empty right now. We didn’t set up anything. So this is definitely going to help you debug. So and while integrating with your sources, it’s going to be tough if you don’t know how to debug. So that’s why we have added all the debuggers and everything by default. So it’s going to be much easier for you to look at and understand how your sources are doing. So this was the source and I’m looking at what it returned. So you’ve helped a lot of customers with API mesh troubleshooting and that sort of thing.

Are there issues or things that come up that are pretty common and anything else that you want to add in terms of like troubleshooting? Oh, Braswell mentioned also expand a little bit on why we have tenant files and the mesh artifact folders to avoid that confusion, since not all meshes will create that folder. Right? Exactly. That’s right. Because not every mesh, the very first class we looked at, it didn’t have any files on it. It was just a bland mesh. So it wouldn’t have all those tenant files or not. And, I didn’t go into deep because of time and all, but if you go to the documentation and, if you go to advanced features, there is local development, it’s going to help you set up everything. What we just saw just now, it’s going to help you with the files and all as well. And, all these handlers in the GraphQL and Json schema, you can also provide some files like response schema. You can provide it as a file. I happen to provide it as an endpoint. You can provide it as a file. So when you provide all these files that are going to go set and the the tenants, folder, and yes, actually coming to the question that you had drawn. Yeah. While working with customers, the biggest questions I have been having is writer caching. Like how you can make this better, how you can use, mesh and make this faster. The first thing you can you can do is put a seat in front. If you already have seed, like I believe most of the e-commerce customers do convert fastly. I don’t know exactly, but, they probably do. So you can use fastly and there is a documentation, page around how you can set up fastly with your meshes. So this is going to tremendously increase the performance of your mesh. And first of all because fast is deployed across multiple location. Sorry. And it’s going to be much faster. And as you are not going to the sources, often you only go to the source is when it’s a mutation or a postman. Other than that, you can stick with fast and on and along with it. Few other questions. We have had in the past was how can you use these sources? And mostly around debugging the exact question that you had? And out of those questions came all the input files and everything that we were talking about. Setting up debuggers by default and improving our documentation to show how someone can use debuggers to debug it. Further, all that meshes.

We’re at time, but if you have any, closing comments, nothing much. I’m glad I was able to cover everything that I had and, I miss debugging. Thanks for all I do. My yeah, so happy hacking. I would say. Yeah, absolutely. Thank you so much for joining us today. It was a great session on exactly diving into API mesh. So hopefully folks who watch this can get in there and see what what kind of magic they can create and how they can make it much faster. Yeah. And we would really appreciate if your help as you start using APM mesh, if you come across any example that is not part of it here or something that you know, you added on top of an existing example, feel free to create pull requests. We have these pull requests coming in from partners and customers as they start working with APM mesh. So feel free to do that and we always encourage it okay. Thank you everyone. Thank your event and we’ll see you next time on that builder lives.