This blog post and demo application dive into how TIBCO Flogo Enterprise can be leveraged to build GraphQL APIs, providing a practical example of how to define schemas, implement resolvers, and handle queries and mutations.


In Today's dynamic digital landscape, APIs play a crucial role in connecting applications and enabling data exchange. GraphQL has emerged as a powerful query language and runtime for APIs, offering a more efficient and flexible alternative to traditional REST APIs.

This blog post and demo application dive into how TIBCO Flogo Enterprise can be leveraged to build GraphQL APIs, providing a practical example of how to define schemas, implement resolvers, and handle queries and mutations.

By following this guide, you'll gain a solid understanding of:

Before we begin, ensure you have the following:

TIBCO Flogo is a compelling choice for building GraphQL APIs due to its:

GraphQL offers several advantages over REST APIs:

&nbsp;A Flexible Product Information API

Let's imagine a scenario where you need to build an API to provide product information from multiple sources. You have a product catalog database, a pricing service, and an inventory management system. A GraphQL API would allow clients to efficiently query for product details, including name, description, price, and availability, from these different sources.

GraphQL allows clients to request precisely the data they need in a single query, eliminating over-fetching and reducing the number of requests. This is crucial for performance, especially when dealing with mobile clients or bandwidth-constrained environments.

Flogo acts as the orchestrator, seamlessly connecting to different data sources and executing the necessary logic to fulfill GraphQL requests. Its visual flow-based programming model simplifies development and makes it easy to understand the API's behavior.

Now, let's roll up our sleeves and build this API!

Introduction

Time to get our hands dirty! Let's build this API.

Our schema will define the&nbsp;&nbsp;<code><code class="inline-code">Product&nbsp;</code></code> type and the operations clients can perform. We'll include <code><code class="inline-code">Query</code></code> to fetch product details and a&nbsp;&nbsp;<code><code class="inline-code">Mutation&nbsp;</code></code> to update or insert product information (upsert).

Before you dive into building your Flogo application's logic, it's often helpful to define some application properties. These properties act like global variables that you can use throughout your app. Think of them as a way to store configuration settings, constants, or even shared data that multiple parts of your application might need. This keeps your app organized and makes it easier to manage things like API keys, database connection details, or any other values that you might need to reuse in different parts of your flow.

We will create app properties for our external services that flogo will orchestrate during business logic implementation.

JSON Schemas in Flogo are like blueprints for your data. They define the structure and types of data that flow through your application. This helps ensure data consistency, validate inputs and outputs, and even auto-generate forms for easier configuration. 

Think of it as a way to add structure and validation to your Flogo app, making it more robust and easier to work with.

We will prepare our Product Catalog service request and response schema so we can use it at multiple places during implementation phase.

Implement Resolvers with Flogo Activities

We'll simulate fetching data from various sources using dummy Product API available on <a href="https://dummyjson.com/"></a><code class="inline-code"><a href="https://dummyjson.com/">https://dummyjson.com</a>&nbsp;</code>through "REST Activity".

In a real-world scenario, you would use activities like "Database Activity" and "REST Activity" to interact with actual databases and services.

Let's understand how we can implement query and mutation using Flogo&nbsp;<code class="inline-code">GraphQLTrigger</code>.

Now, let's dive into the implementation of the <code></code><code class="inline-code"><code>product</code> query</code> resolver. This resolver is responsible for retrieving comprehensive product information based on a given product ID. Since we're dealing with data from multiple sources, we'll need to orchestrate a series of steps to fetch and combine the necessary details.

Our first step is to set up Flogo app with GraphQL Trigger to receive incoming GraphQL requests. We'll use the GQL Trigger for this purpose.

Next step is to retrieve the basic product information from our product catalog service. We'll use the Rest Invoke Activity in Flogo to achieve this. This activity allows us to connect to external service and fetch the product record that matches the provided <code>id</code>.

Next, we need to get the current price of the product. This information might be stored in a separate pricing service to ensure real-time accuracy. We'll use the REST Activity in Flogo to make an HTTP request to the pricing service's API and retrieve the price for the given product ID.&nbsp;

To determine if the product is currently in stock, we'll interact with our inventory management system. Again, we'll leverage the REST Activity to make an API call to the inventory system, providing the product ID and retrieving its availability status.

Now that we have data from three different sources, we need to combine it into a single, unified <code>Product</code> object that conforms to our GraphQL schema. This is where the Mapper Activity comes in handy. This activity allows us to map and transform data from various sources into the desired output structure.

In our Flogo flow, we'll connect these activities in sequence:

The output of the Mapper Activity will then be used by the <code class="inline-code">ReplyToTrigger</code>&nbsp;to fulfill the <code>product</code> query.

Now, let's shift our focus to the <code><code class="inline-code">createProduct</code></code> mutation resolver, which handles the creation of new products in our system. This resolver will be responsible for taking the product information provided in the mutation request and adding it to our product catalog.

Our first step is to set up Flogo app with GraphQL Trigger to receive incoming GraphQL requests.&nbsp;

The first step is to receive the product data from the GraphQL mutation request. This data will likely include details such as the product's name, description, price, and availability.

Step 3: Send the Product Data to Product Catalog API

Next, we will store this information in our product catalog API. We will use our external catalog API to add/create new product in the Catalog.

After successfully storing the product data, we'll retrieve the complete product information, including the newly generated ID. This information will be returned as a <code>Product</code> object in the GraphQL response, confirming the successful creation of the product.

In our Flogo flow, the "GraphQL Trigger" will manage the execution of this <code>createProduct</code> mutation resolver. It will receive the mutation arguments, then in the flow catalog api call will generate the unique ID and perform the product insertion, and finally return the created <code>Product</code> object in the GraphQL response.

The final result of implementation would look something like this.

Now that we've set the stage and built the core components of our GraphQL API, it's time to put it to the test!

Building the Flogo GraphQL API

Before deploying your Flogo application, it's crucial to ensure it functions as expected. Flogo offers robust local testing capabilities through its "Test Runner/Cases."

Once you're satisfied with the local testing, it's time to build and run your Flogo application.

&nbsp;<code>http://localhost:9090/graphql</code>

Now that your Flogo GraphQL API is running locally, you can test it using a GraphQL client like GraphiQL,&nbsp;POSTMan or Altair.

We are using Postman for our GQL API Testing. You can choose your prefered option for verifying the API.&nbsp;

By thoroughly testing your API with various queries and mutations, you can ensure its functionality and correctness before deploying it to a production environment. This step is crucial for delivering a reliable and robust API that meets the needs of your users.

Test Your API

By following these steps, you can effectively build a GraphQL API using Flogo. This approach allows you to leverage Flogo's flexibility and visual development environment to create efficient and powerful APIs that interact with various data sources and services. Remember that this demo uses simplified logic and mock data. In a real-world scenario, you would replace the "Mock Services" with actual integrations to databases and services using Flogo's wide range of activities.

This journey through building a GraphQL API with Flogo demonstrates the power and flexibility this combination offers. By leveraging Flogo's diverse activities and visual workflow design, you can seamlessly connect to various data sources—databases, RESTful services, and more—to construct a robust and efficient GraphQL API.

Here's a recap of the benefits Flogo brings to GraphQL API development:

By embracing Flogo for your GraphQL API development, you can streamline the process, improve efficiency, and create flexible APIs that cater to the evolving needs of modern applications.

Flogo and GraphQL: A Powerful Duo for Building Flexible APIs

Milind Pandav

What You Will Learn

Prerequisites

Why TIBCO Flogo?

Why GraphQL?

Use Case Scenario

A Flexible Product Information API

Why GraphQL is the Perfect Fit

Flogo's Role: The Orchestrator

Now, let's roll up our sleeves and build this API!