Call Your CRM Data in Your CMS Through GraphQL

Hey y', all, It's Brooke with HubSpot Academy. In this video we're going to Talk about using GraphQL in your HubSpot CMS web pages. Using GraphQL on your CMS pages allows you to power your site with your CRM data to create a dynamic experience for your users. This is just a small look into using GraphQL with a CMS. So if you'd like to learn even more, check out HubSpot Academy's free CMS Data Driven course. The link will be in the description below. So now let's go into our HubSpot account. First we're going to go into our graphic interface. So I click on CRM development, you can get that in beta and it gives us direct access to our GraphQL page. And what I'm going to do is I'm going to create a new query that's going to go ahead and get all of the data from from a custom object that we created called books. So we're going to go ahead and click on CRM and then we're going to go ahead and scroll down to P Books collection because we want to get all of the books and not just a single book. And then we're going to go ahead and choose items and this will allow us to get our properties. We are going to go ahead and grab some metadata, just an id and then we want the book's title, we want the book's author, and let's also grab the publisher. So now we have created our query. I'm going to go ahead and change this query to be ignored books. I'm going to go ahead and click Copy. And now it's copied to our clipboard. So now I'm going to go ahead and go into our Design Manager. So in the main menu click on content and then Design Manager. So the Design Manager is a built in code editor inside of your HubSpot account. And it will make it really easy for us to go ahead and create a new theme to test this out. So up here in our file viewer, I'm going to click on file and we're going to say new theme. And then for the theme starting point we're going to go ahead and choose boilerplate and then we're going to call this GraphQL test theme and we want it in the root folder, no problem there. And we're going to go ahead and create and this will set us up with all of the boilerplate templates. So now we're going to go ahead and Inside of our theme folder, we're going to do File new folder. And I'm going to call this Data Queries. We're going to go ahead and create that. And then inside of our Data queries, we're going to click File new file in Data Queries. And under the what would you like to build today? Dropdown, we are going to choose GraphQL as our file type. Click next. And I'm going to call this Books data. And then we're going to go ahead and click Create. And then we're going to go ahead and paste in that query that we created inside of the graphic interface. And then up at the top we're going to go ahead and add a label. This is going to be Books CRM data. And then we will have a description as well. This grabs a list of all of the Books data. And that's all we have to do to set that up. So we'll go ahead and click Publish Changes. And now we're going to go into our Templates folder and we're going to click on about. We're going to right click and we're going to say Clone template just to make this a little bit easier. And then I'm going to call this Books listing. And all we need to do here is delete out all of this DND stuff that comes with the main one. And now what we need to do is in our templates up here in this metadata, we need to add our data query half. And then we're going to just go ahead and in that Data Queries folder, we're going to go ahead and call our Books data. And you don't need to put the GraphQL extension on there. And so now in our block body, I'm just going to go ahead and add an H1 and say list of books. So the first thing that we're going to do is set a function that will hold our data. So we're going to do set books equal to data query.data.CRM.p books collection.it EMS and that will grab all of our CRM data. And now that we've set that, in order for us to get the data, we are going to write a for loop. So we're going to say for book in books. And then we need to make sure that we write the end for. And now inside of here, for each one, let's do an H3 to hold the book title. So we're just now calling book dot book title. And this will be the name of the property. So make sure that you know how you called your properties. Now we're going to build a paragraph tag and then we're going to say by and then have the book dot author. And let's just do another P tag where we're going to call the book dot publisher. So now that we've done this, we can actually click this show output button here and it'll show you how the Hubble will be rendered in HTML. So now we're in the body section. So we've got our header first. Then we've got our H1 list of books. And then it will start with this. And so if you've called your books object correctly, you will see that this will be filled out. So now we're going to go ahead and click Publish Changes. And finally we're going to go ahead and click Preview without display options. And now we have a page that has our list of books. So this is really powerful to use in your CMS website, especially if you're using something like a membership site and you know the person who's visiting the page and they're in your CRM, if they're on the page, you can show them a list of only their books that are connected to them, which is really great. That's all I've got for you today. Thanks so much for watching. Leave a comment about how you're using GraphQL to call data in your CMS web pages. Make sure to leave a like on this video. Subscribe to the HubSpot Developers YouTube channel and check out the resources for links to learn more at HubSpot Academy. See you all soon. Bye bye bye.