[Music] in this video we'll create an integration Hub spoke with a couple of actions to demonstrate how to interact with a thirdparty graphql API we'll also create a service portal widget to use JavaScript to achieve a similar result as part of this we'll create a library of queries for our spoke to make creation and management easier in the future for this example we'll use a simple graphql API to get Star Wars movie information we'll start by going to studio and creating a new app for our spoke we'll give it a name add an icon and click create for this exercise we've created a table the purpose of which is to make it easier for us to create and maintain the queries as opposed to the payload of arrest step in the action designer or embedded in JavaScript it's not required it's just a suggest the thing that makes this table special is that it's extended from the application file table or CIS metadata that means that any records in this table become part of the application like a business rule or client script whether we use the app repo Source control or good old update sets the data comes along with the rest of the app data if we hadn't extended the table we'd be required to export the records in XML from one instance and then import them into another the record consists of several string fields to hold a Name ID and description and an active field along with a place for us to create and maintain the query string the purpose of this whole record and some variables to assist in testing let's create a quick sample record just to make sure things are working properly we'll name it get all films ID get- all- films a description and the graphql quer quy and then submit now let's go to flow designer and create a new action we'll call this get all films the query has no inputs so we'll start with a script that can retrieve the query from our table the script will read the record based on the ID we sent which is much easier than trying to decipher a CIS ID and return the query string if we encounter a provider that does allow for new lines and tabs we can use the JavaScript replace method here to strip them out this might be a good time to start thinking about putting common logic like this in a script include so multiple actions can use it consistently we'll go down here to the outputs to have the script return a query string a quick save and we'll add another step for the Json Builder we'll use the name query and use the output of the script step now let's add the rest step to send this we'll Define the connection in line and provide the base URL yes we could use the connection Alias which would be much more useful if we were to create several more actions in this spoke but for this demo we're going to do this The Brute Force way we'll build the request manually and be sure to change the method to post since all graphql requests are post as they include a payload for our query mutation we'll also set the header content type to tell the server to expect Json information the request body is the output of the Json Builder we save and test when we look at the execution details and go down to the steps we can see from the response body we got a payload back let's copy that and go back to our action and add a Json par step to process the response into an object right after the rest step we'll set the source data to be the response body from the rest step and paste our sample payload here then click generate Target a quick inspection of the target structure and we'll create an action output we'll call it films as of type object exit edit mode and drag the all films data pill from here save and test one more time when we look at the action output we can see the films listed here which are easily consumed by flow designer now let's create a query that requires inputs to see how variables work for this example we'll use the same graphql API only this time we'll send a query to get a specific film so we need to specify which episode number is a variable we'll go to our query table and give it a Name ID description and query and a sample variable in Json here let's go back to flow designer and to save time we'll open our previous get all films action and use this menu on the right to select copy action give it a new name and click copy first we'll need to add an action input to get the film ID which will make an integer and mandatory next we'll update the script in a couple of ways first we'll need to add an input to gain access to the film ID in the action input next we'll change the query ID to get- fil we'll create an object to store the variables and use the value from the script step input and store a stringified version of the variables in a step output and of course we'll need to add an output for those variables and save next we'll add the variables to the Json Builder the nice thing is that nothing needs to be changed in the rest step because it's using the payload from the Json Builder same endpoint let's save and test so we get a sample response payload back in the execution details we get an error on the Json parser which isn't surprising because it's expecting the old response body so let's go to the new one down here copy it and go back to our Json parser step we'll paste the new sample on the left and click generate Target Target again confirm it and take a look that's what we expected based on the query sent the only thing left to do is update the action output so we go to the outputs edit outputs and delete the films create a new output called film as an object and exit edit mode we'll then drill into the Json parser data and get the film object and drag it to the value and Save one more test and we see in the execution details the action output is the film detail we requested all that's left to do is publish these two actions and make them ready for use by others in flow designer now let's take a quick look at how these same query records might be used in a service portal widget here we have a widget that takes an integer and the goal is to display a few details about that particular Star Wars film we can see that the server code is setting up a dummy data object for the film data and reading the queries for later use the HTML is set up with a button to call C.G film so let's start by creating that function through the magic of editing we have the script here so let's walk through it together first we'll create a simple object for the variables next we'll add those to an object that contains both the query string and string ified variables remember the variables need to be stringified because they'll contain quotes for the Json objects within next we'll make an HTTP post call to the graphql API endpoint if the response was successful we'll process that noting that even when a graphql error appears most API send back a 200 to indicate success so we'll go through the response body to check for an error property and display it if none was found we can process the response body for valid data and display that otherwise if the server returned a 400 or 500 Response Code we'll catch that also now let's try out the widget we asked for the first film and see episode 4 A New Hope if we change that to three we get episode 6 Return of the Jedi the same concepts with queries and variables can apply to UI Builder outbound rest messages or thirdparty applications using custom service now graphql apis this should get you started on your way to understanding graphql and how to use the basics there are more details about graphql and I invite you to watch the final video in this series for some helpful resources