How to connect Commercetools and Hygraph

have you ever had to connect a Commerce engine to a CMS because content editors just have to be able to browse and select products in the CMS well in this video I'm going to show you how to do that exactly we're going to use Commerce tools and high graph together and interestingly if we do it the high graph way developers get a real benefit as well so let's talk about it this is a CMS [Music] mavick all right so what we're working on today is our skin care starter but now all our product information actually comes out of Commerce tools so when we have a look here there's like this you know product highlighter and this is actually connected to a product in commercials and then when we browse this product this product information with the ingredients description all that stuff is also coming out of Commerce tools but this stuff is then coming out of hgraph so we're enriching the data together and so you can even add it to the card and then there it is and so this is actually in the frontend starter um talking to um Commerce tools API so it created the card you can see there's the ID here and it added a line item and then I didn't implement the paying now because that's a demo but there you go and so when we look in um Commerce tools here we have our face serum and it has all the things you expect descriptions product name product key there's the variant actually even with the images the price all the things so how do you connect this product data into HRA well there is two approaches there are two approaches so first site is the data site we need to content Federate or Federate the information from Commerce tools into high graph so it becomes one API that you can query from the front endend but we also need a way for Content editors to actually browse and select a product in a super easy way so let's start with how we connect the data up so when we go to our schema you can see there's a remote source for Commerce tools here and luckily Commerce tools actually has a graphql API so there's not much to do here but just put this in make sure the authentication works and then High graph will do an introspection on the API of Commerce tools and you get all the information to do a quick view of that is let's say if I wanted to make a global query now from hgraph to Commerce tools I can actually then just do a quick test where I say okay let's grab the commer tool remote Source let's post to it and then here it actually shows me all the endpoints that you can get from commer tools so if I wanted to get like a product for example I can just say well buy ID and then type in something and you will get a product so this is not the way I've set it up in this demo because I've actually connected a product to a product page and so when we go to the product page which is this one this product page is now connected to Something in Commerce tools and so what I've done here and we'll look at this special Commerce tools field in a second because that's where the content editors are come in we've actually created a Commerce tools product field that is actually a Gra graphql field so that looks very similar to what we just saw right and so here we have a Commerce tools post and we call it the Commerce tools product and we go down and we find the product and we look it look it up by ID and then you can see here this little magical connection string here we're looking at the ID that was typed into the field in the same document called Commerce Tool's product ID and it's cast as a string and that product ID actually comes from this specific field here that is the Commerce tools product ID field that is actually your picker and how you get that field is by actually going to apps and installing the Commerce tools app so let me show you how that actually looks in content because I spoke a lot saw a lot of details but this is actually where it comes down so now this is our face serum and here I can actually select a product from Commerce St and this selection allows me to browse look at all the things I'm sorting it you see face serum is selected here right and so this is this product ID and so what is filled out here is just the ID of the product we don't store anything else and then this graphql field you don't actually see it it's just here so what this does now when you query this schema for this PDP you are able to then use that product ID and query everything else so let me show you this in the playground so I already set it up so we have a product page PDP and where the slug is in this case face serum and so we're querying everything from the page I just showed you right from the slug to the title to the OG description all the other components but then here you see the Commerce tools product and so this is actually all coming from Commerce tools now so we have one query and when I hit play I will get all the information from my page plus all the stuff from Commerce tools and so when you put this in the code it means you can query with one graphql API call to hgraph you get all the information also from Commerce tools and so this is the benefit for the front end developer because you don't need to have an SDK installed to query Commerce tools for product information you don't even need an SDK to query High graph because it's just graphql and hgraph has Federated the content for you and so so it all fits nicely and then if you look at my code base I just have a query here for a PDP for a product that queries all its components like a routine a tutorial things we just saw right so when we go to the content and we go to the our components we have a tutorial and we have a routine and that's what you see here we have the tutorial and the routine and so all that you can just query in a query like this and then get all the stuff from Commerce tools and there's a lot more information that I could get out of Commerce tools I could also get a card query or anything I wanted from here and so in my code it's now very simple when I go to a PDP page I query my product page get my stuff and I render It Anyways um I hope this made sense um you can join us at slack in our community at slack. gra.com or you can just tweet at me at at Tim benck at Twitter sorry I'm still saying Twitter I cannot say x yet um anyways that's it happy coding cheers