Unlock the Power of GraphQL in Your UI Extensions

Hey, y', all, It's Brooke with HubSpot Academy. In this video, we're going to Talk about using GraphQL with HubSpot. GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data in HubSpot, GraphQL gives you the power to call object records and their associations in a single call. This helps cut down on the number of API calls you would have to make the traditional way. For example, if you wanted to use the traditional endpoints to get a list of contacts and then their associated companies, you'd have to call the API endpoint for contacts getting their company's associations, saving the company's IDs connected to each contact, and then call the API endpoint for companies to get the company's information. As the list of contacts grow, so too does the number of calls to the company's API. GraphQL solves for this by creating a single query that can get an object record and all of its associations along with the associated records properties. So With a single GraphQL query, you can retrieve a list of contacts and their associated companies with the company data. In order to see how GraphQL works, let's go into our HubSpot account. We have a UI called GraphQL, and to get to it, we're going to go into our HubSpot URL here and we're going to change this to read Graphy QL and then have your HubSpot account. And this will take you to the graphy QL interface. So you can choose to create a blog query or a CRM query to get CRM data. So let's go ahead and build one for CRM data. And then here you have all of the different CRM objects that you can grab data from. We're going to go ahead and choose Contact. And when you're doing this, in order for this to work, you have to have a unique identifier and a unique identifier value. So in most cases, for the unique identifier, we can choose to use our HS object ID and then our unique identifier value. So, for example, one of mine is 301. And so then we can also choose the different properties that we get from that contact. So the great thing about graphic, well, and creating this query is that you can put the data in whatever order you want it to, and then if you click on associations, you can pull in all of the associations that are connected to this one type of object. So let's just go Ahead and pick company primary and then to choose the properties that go with that company, you have to click on items. So now we have all of these. And the great thing about GraphQL is if you have more associations with that primary association that you want to call, you can even call those as well. And so now we can go ahead and run this and it will give you the data here. Now, how can we use that in a practical way? Application One of the great ways that you can use it is that you can use it in an API call and then add that data to a UI extension. So for this one, I'm going to go ahead and show you how I did that on a CRM record. I'm going to go to Contacts and we're going to go over to custom. And so what I did in order to show you this as an example is I created a custom object. And so what this card is doing is it's calling the favorite books connected to this contact and it's showing a list of them here in a table format. And so I used a GraphQL query to call the data and then render it onto my UI extension. So let's go into the code to see what that looks like. So we're in our code. And the main thing that I did in order to set myself up for success is inside of my app JSON. I went ahead and added in some information about the card as well as the different scopes. In order to use the GraphQL API call, you need to make sure that you have the collector graphqlschema read and collector graphqlquery execute as a scope. And then I renamed this the JSON file. And then the main thing that we use in order to use this GraphQL query is in our serverless function. So in our fetch associated books, I'm using an Axios call to make this in my exports main, we're going to make this an async function and we're going to send over some context. So for this we have our HS object id. This is how it knows which contact we're on and to get the associated books with it correctly. And then we also have to use our private app token and we just use process EMV to get that private app access token and then we put our code in a try catch. So in this try catch, we're creating a constant for data and we're sending along the query that is our GraphQL query. We're sending along the private app token and the HS object id and then we just go ahead and return that data. And then if it doesn't work out, that's why we have the try catch and we're returning the error. So then we have to create our function and I call this fetch associated books. It's going to take in three parameters. It will also take in our query, our token and our HS object id. Then we're going to create a body to send along with our Axios post function. We have the operation name favorite book. So this is going to be the name of your query. You're going to send along the query and then your variables of your HS object id. And then we are going to return and use the Axios post. We're going to hit that endpoint that you need for GraphQL, which is just API.hubapi.com collector GraphQL then we're going to use the JSON Stringify function to stringify the body. And finally we're going to send along the headers where we're going to authorize it. So finally we have a constant called query and in the backticks that's where we Write in our GraphQL query and then we go into our card frontend. This is where we write the react code. So we're going to import react and we're also going to import two hooks from React, UseEffect and UseState. These are going to help us to be able to call our data. Then we are also going to make sure that we import all of our components from the HubSpot UI extensions components. The first thing we have to do is define the extension to be run. And this one we're going to send along a context. We're going to run the serverless function and we're going to send in actions. And then in this case our action is going to be connected to fetch properties and it's going to be the fetch CRM object properties that's going to help us to get that HS object id. Then after that we have to go ahead and define the extension component. We have to take in our run serverless context and our fetch properties as props. This is a lot of code. Don't worry. I've created a GitHub repo that's on the HubSpot Academy GitHub so you can go ahead and download that and that link will be in the description. So the first thing that we're going to do is use the react hook use state to get the data of our books. So we're going to do Const books, set books and we're going to set the state right now to null and later it'll be full when we get the data properly. Then the next thing that we're going to need to do is get our current object id. In this case, the current object ID will be that contacts HS object id. And finally, because it takes a second for our data to load in on our UI extension, we're going to use a loading spinner to hide it until the data is ready. And so for this one we're just going to create a boolean for the loading state. So we're going to have const loading, set loading and equal to true right now, because right now we're going to show it and then it's going to change to false once we know that we have our data all loaded in properly. Next we have to use the use effect hook, which will allow us to run our fetch properties. The fetch properties is going to grab the HS object ID of our contact that we're currently on and it's going to set the current object ID to that properties HS object id. And then we also have to run our serverless function, we send it our name, which we called fetch associated books. We send it the parameters that it needs to work, which is the HS object id, and then we wait for the response. To make sure that it's going to work, we're going to go ahead and console log the response. Once you know that your code is working, you can go ahead and comment that out. And then we're going to write an if function and it's going to say if the response status is is triple equal to success, then we're going to set books to be equal to the GraphQL query. So that's what this long thing here is. It's just calling the Items within that GraphQL query and is also going to set the loading to false so that that loading spinner will go away. And then the use state will also rerun when the current object ID changes. And then finally we are going to go ahead and return what our front end is going to look like. So for this one we're going to first say if our const that signifies the loading state is true, show a loading indicator that means our data is not there yet. And this helps to prevent the user from seeing a partially loaded component or data loads. It has a couple of different options. Check out the developer documentation for all of those options. And finally, when we have all of our books data, we are going to return our table and this table is just going to be set up like any other HTML table. We have our heading, we've got our table head and row and then we've got our table body. Finally we're going to use the map function to map over the books array data so that each record will become its own record row inside of the table. And all of that code leads us to having this table inside of our UI extension. Calling our custom object that's associated with this contact GraphQL allowed us to get all of that data in a single query without having to make multiple API calls and it gives you a much easier way to read the data in a human readable format. That's all I've got for you today. Thank you so much for watching. Thank you. Make sure to subscribe to the HubSpot Developers YouTube channel. Check out the resources for more links and I'll see you on the next one. Bye y'. All. Bye bye.