GraphQL is a data query language for the APIs. It helps fulfill the queries with the existing data based on a Schema, queries, and resolvers. It helps build upon the REST philosophy but helps move ahead where traditional APIs have some limitations. It can be effectively used to aggregate data from multiple resources and describe data for apps that have complex UI/UX and multiple endpoints.
Configuring GraphQL connector
To add a GraphQL connector, under Studio > Connectors, click (+) Connector and select the GraphQL connector under APIs.
You need to first configure the connector. Enter the Connector name which would be used when you need the connector in your apps and while adding queries.
Now to understand the GraphQL connector let us use the Space X API at GraphiQL Explorer which contains information about the SpaceX missions and several provides interesting fields for querying. It does not require any authentication method. Remember that the authentication will depend on the respective APIs that you use.
So for the GraphQL API connectors, you need to provide the following:
- Authentication: Select the appropriate authentication method based on the API. The input parameters would be dependent upon the type.
- Add GraphQL endpoint: Enter the endpoint URL for the GraphQL.
Once these configurations are added, click Test Connection. If the authentication is successful you would get the response accordingly. Click Save to Finish configuration.
Query Builder for the GraphQL API connector
The GraphQL API would be used by creating the queries which in turn would be based on the variables and arguments depending upon the API. Studio provides the Query builder that enables you to easily define the queries and their parameters. Let us take an example to get the Mission details for the SpaceX API.
Adding query
-
Enter the Query name and ensure that the GraphQL URL is added.
-
Write Your Query: Build the query by adding the arguments directly into the Query builder. Here we would be fetching the id and manufacturers from the missions API. This is a simple query where you are not providing any dynamic values.
You can test the query and view the values returned in the Response. These can then be used in your Apps with Bind Data.
Adding variables to queries
If you want to add dynamic variables you can also use the variable within your queries. Now say you want to find the records for the manufacturers that are provided dynamically when running the form, then in that case you need to provide the variable in double curly brackets within the Query. When you test the query in the Query Builder you can provide the input parameter value. Save the Query.
The QueryBuilder thus enables you to easily define your queries with the respective parameters.
The queries will be listed out under the connectors list.
Using GraphQL connector
Get data
Now let us take a simple example to display the Mission Details in a Table grid control. You can make use of the Queries that you had configured earlier.
Add a tablegrid control and configure the Connector. Go to Bind Data> Connectors and configure the query.
So now when you take a preview of the respective form you would be able to see the data accordingly.
Get data based on condition
Let us take the example to search data for a specific manufacturer. We will be using the query we configured earlier. We will pass the name as the input parameter.
You can then configure the query to display data in a control like the tablegrid control. Go to Bind Data> Connectors and configure the query.
Now when you run the query you would get the data from the document.
