GraphQL is a relatively new approach for data query and manipulation through web APIs. To some degree it is an alternative approach to REST. But since it relies on standard web API it is actually quite simple to leverage GraphQL data sources in your Oracle Visual Builder Application.
In the demo video we consume a sample public GraphQL API (https://anilist.co/graphiql) and build a VB app that queries and display data.
If you'll use the web interface in the above URL to define and execute queries, you'll be able to invoke the browser's developer tools to see the interaction pattern.
A query is executing a POST HTTP call to the server passing in the query as a parameter in the body of the call.
To emulate the same behavior in Visual Builder, we define a new REST service endpoint providing the same information.
For the request body we used this syntax:
{"query":"{Character (id : 1) {\n id\n image {\n large\n medium\n }\n name {\n first\n middle\n last\n full\n native\n userPreferred\n }\nage\n dateOfBirth {\n year\n month\n day\n }\n}}\n","variables":null,"operationName":null}
We then copied the response from the test tab as a sample of our data structure.
Now that our service connection is defined, we can build the user interface.
With the new data palette it is quite easy to drag and drop the endpoint to the page which creates all the UI components that will show us the data. This also creates an action chain that fetches the information for you – though this call will initially fail as it is missing the needed payload.
To address the payload issue, we define a type and a variable that are based on the endpoint's request structure. And then we assign a value for the query part of the request.
To make it dynamic we inject the record id based on a page variable. The expression used is:
"{Character (id : "+$page.variables.newid +") {\n id\n image {\n large\n medium\n }\n name {\n first\n middle\n last\n full\n native\n userPreferred\n }\nage\n dateOfBirth {\n year\n month\n day\n }\n}}\n"
The last part is hooking up the fetch action chain to also be invoked when we change the value of the id variable in our UI.
Tip – If you are running into issues during the development – have a look at the browser's dev tools network and console to see the calls being made and the returned data.
The result is a VB web application fetching data from a GraphQL source.