Author: Saddam Shaikh
MuleSoft has released the APIKit for GraphQL connector, which can be utilized with Anypoint Code Builder to develop Mule applications.
What is GraphQL?
GraphQL is a data query and manipulation language for APIs that empowers consumers to retrieve fields or data that are relevant to them.
GraphQL Use Case:
- If we have a REST API that returns ‘n’ number of fields, but we encounter a scenario where a mobile app requires specific fields and a web app requires a different set of fields from the REST API, following the REST architecture would entail developing two separate REST APIs. However, this functionality can be achieved through a single endpoint in GraphQL.
- If the objective is to expose a single endpoint capable of aggregating responses from multiple target systems.
Follow the below steps to create a GraphQL application in Anypoint Code Builder:
- Create a GraphQL schema using GraphQL editor. We have developed a GraphQL schema for the product and incorporated two queries: “productById” and “products”.
type Product{
id: ID!
title: String
description: String
price: String
discountPercentage: String
rating: String
stock: String
brand: String
category: String
thumbnail: String
images: [String]
}
type Query{
productById (id:ID): Product
products: [Product]
}
schema{
query: Query
}
- Publish the Product GraphQL schema to Exchange as a GraphQL API asset. Additionally, you can implement the GraphQL API that exists in Exchange.
- Launch Anypoint Code Builder as a Web IDE and choose “Implement an API.”
- Configure the below fields and click on Create Project.
- Project Name – Name of the Mule projectProject Location – The location where we want to store the project
- Search for an API specification published in Exchange to implement. Browse Exchange and choose the GraphQL schema.
- Anypoint Code Builder generates Mule flows for each type in the Product GraphQL schema.
- Incorporate the logic to retrieve product data from backend APIs for each flow. We have used the dummyJSON product API to get the product details.
Add Request Config in global-config.xml
<http:request-config name="Product API Config" doc:name="Product API Config" doc:id="af4dc2fc-0e8e-455c-8a7f-94b5a40e0c83" responseTimeout="120000">
<http:request-connection host="dummyjson.com" port="443" protocol="HTTPS" />
</http:request-config>
Final Mule flow code
<?xml version='1.0' encoding='UTF-8'?>
<mule xmlns="http://www.mulesoft.org/schema/mule/core" xmlns:doc="http://www.mulesoft.org/schema/mule/documentation" xmlns:http="http://www.mulesoft.org/schema/mule/http" xmlns:graphql-router="http://www.mulesoft.org/schema/mule/graphql-router" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:ee="http://www.mulesoft.org/schema/mule/ee/core" xsi:schemaLocation="http://www.mulesoft.org/schema/mule/core http://www.mulesoft.org/schema/mule/core/current/mule.xsd http://www.mulesoft.org/schema/mule/http http://www.mulesoft.org/schema/mule/http/current/mule-http.xsd http://www.mulesoft.org/schema/mule/graphql-router http://www.mulesoft.org/schema/mule/graphql-router/current/mule-graphql-router.xsd
http://www.mulesoft.org/schema/mule/ee/core http://www.mulesoft.org/schema/mule/ee/core/current/mule-ee.xsd">
<flow name="api-main-flow">
<http:listener xmlns:http="http://www.mulesoft.org/schema/mule/http" config-ref="http-listener-config" path="${http.listener.path}" />
<graphql-router:route xmlns:graphql-router="http://www.mulesoft.org/schema/mule/graphql-router" config-ref="api-router-config" />
</flow>
<flow name="Query.productById">
<graphql-router:data-fetcher xmlns:graphql-router="http://www.mulesoft.org/schema/mule/graphql-router" config-ref="api-router-config" objectTypeName="Query" fieldName="productById" />
<http:request method="GET" doc:name="Request" doc:id="9007ba6a-8019-438a-9415-892c8294a14d" config-ref="Product API Config" path="/products/{productid}">
<http:uri-params>
<![CDATA[#[%dw 2.0 output application/json --- {
"productid": attributes.arguments.id
}]]]>
</http:uri-params>
</http:request>
<graphql-router:serialize xmlns:graphql-router="http://www.mulesoft.org/schema/mule/graphql-router" config-ref="api-router-config" objectTypeName="Query" fieldName="productById" />
</flow>
<flow name="Query.products">
<graphql-router:data-fetcher xmlns:graphql-router="http://www.mulesoft.org/schema/mule/graphql-router" config-ref="api-router-config" objectTypeName="Query" fieldName="products" />
<http:request method="GET" doc:name="Request" doc:id="8007ba6a-8019-438a-9415-892c8294a14d" config-ref="Product API Config" path="/products"></http:request>
<ee:transform doc:name="Transform Message" doc:id="lvtqis">
<ee:message>
<ee:set-payload doc:name="Set payload" doc:id="wxopxb">
<![CDATA[%dw 2.0
output application/json
---
payload.products
]]>
</ee:set-payload>
</ee:message>
</ee:transform>
<graphql-router:serialize xmlns:graphql-router="http://www.mulesoft.org/schema/mule/graphql-router" config-ref="api-router-config" objectTypeName="Query" fieldName="products" />
</flow>
</mule>
Test the GraphQL implementation:
- Navigate to the Run and Debug view, then click on the run button to deploy the Mule application.
- To test your Mule application from a REST client such as Postman, you are required to supply a ‘proxysession’ cookie while invoking the GraphQL service. You can obtain this value using Developer Tools. Please copy the cookie name and value. To test your mule application from a REST client e.g. Postman, you need to provide a ‘proxysession’ cookie when calling GraphQL se
- Head to the PORTS tab and copy the local address for the 8081 port.
- n Postman, initiate a POST request using the local address and append the /GraphQL path. Include the ‘proxysession’ cookie, with the cookie value in the format of name=value.
Kindly note that using Anypoint Code Builder in the Production environment is not recommended, as it is currently in Beta release. I hope you enjoyed reading the blog.