How to integrate a GraphQL API with bubble.io

Bubble plus GraphQL

In the following article, you will learn why you should take a look at GraphQL APIs. Furthermore, I will show you how to do GraphQL API requests and how to integrate GraphQL APIs with your no-code bubble.io application.

What is GraphQL?

The term GraphQL refers mainly to two main components. First, it refers to a query language that lets you formulate queries on data, that is stored in a database. Second, it also includes a GraphQL runtime that sits on top of a database. That runtime is a piece of software, that takes the queries, validates them, executes them, and returns the data to the application that asked for it.

A simple example for a type (1 – the definition of the data format), a query (2 – the request that asks for data) and the response (3 – the actual data) that is returned by the GraphQL API.

GraphQL uses HTTP as a protocol to transmit queries from the browser to the server, that hosts the database. Consequently, we can use a GraphQL API with the API Connector in our no-code bubble.io application. That fact makes it so interesting.

Furthermore, GraphQL is not relegated to a specific database or programming language. As a result, it’s getting more and more popular and can be found among a large variety of API providers.

Where is GraphQL used?

Since GraphQL is still somewhat newer than REST as a standard for APIs, it’s not found all over the place. However, it has some significant advantages compared to REST. As a consequence, it’s getting more popular, and you will find more and more API providers also providing GraphQL APIs.

GraphQL originates from Facebook. It was implemented by Meta (formerly Facebook) to query a large amount of data from related but separated tables. As you can see, it’s used in places, where we have to handle a lot of data that comes from different tables. If that data has to be shown in a common context, it’s very prone to use GraphQL queries here.

Let me give you an example: You can see GraphQL a lot in the space of blockchain and NFT marketplaces (also marketplaces in general). When you show a selection of NFTs (or other products) on a catalog page, you want to pull in data from different tables. So, for example, you query the product data like picture and title from a product table. Additionally, you need to query current crypto coin exchange rates from another table to show the current price. Lastly, you may want to show who traded that NFT already, which comes from a transaction table. As a result, you end up doing three requests in a REST pattern. That can be done in one query with a GraphQL API.

As you can see, GraphQL is going to appear a lot in the space of large data like blockchain, dApps, NFT marketplaces, social apps, and online communities. Since those kinds of applications are being created more and more, you will ultimately see GraphQL APIs more and more.

Get started with GraphQL queries in postman

Before we jump right into our no-code bubble.io application to do GraphQL API queries, we will try those in postman first. Postman is a tool for working on any kind of API request. It’s easier to try requests in postman before you jump into the actual application. That is because in postman you are free to change anything very quickly, and you don’t rely on third-party tools to work correctly.

Sample GraphQL API

We will be using an open sample GraphQL API that is accessible for everyone on the public internet. The GraphQL API we will be using is the Rick & Morty API (one of my favorite TV series ;-)). You can check its documentation and the GraphQL API itself following the links.

Simple Query for GraphQL

The first simple query asks the GraphQL API for all characters and a count. The result will list all characters and count them. The count will be given back as a result as well. Below, you find the cURL command that you can import into your postman or execute on your command line.

You will notice that the GraphQL query is included as raw-data. The following gist shows the query in nice formatting. Besides that, you can see the base URL and the request method POST. When working with GraphQL, you will always send POST requests to the same base URL. Contrary to REST APIs, you don’t specify what kind of data you want to get in the path or in query parameters. With GraphQL, the query will always be included in the body or payload of the POST request – the raw-data. Let’s take a look at the query.

The above gist shows the query. The red word query marks the beginning of the query. The orange-colored words are called fields. Those fields determine, what data is being asked for. You can simply remove or add fields that belong to that GraphQL schema. That’s how you alter queries.

As a result, you will receive a JSON like below from the GraphQL API.

You can try the above query in postman itself or with the help of the graphical GraphQL editor that the sample API provides. You can simply add the query on the right side of the editor and click the play button. It’s shown in the screenshot below.

GraphQL editor with simple query and result
GraphQL editor with simple query and result

How to do a GraphQL Query with your no-code bubble.io application

What do we have learned so far? There is a growing number of GraphQL APIs. You can HTTP POST requests to make queries (read data) or mutations (write data). A simple query can be formulated with fields, that determine what you get back from the GraphQL API.

I won’t go into all details of formulating queries and mutations in this article, since there is pretty good documentation on that done by GraphQL itself. Next, we want to transfer our simple query to our no-code bubble.io application, so that we can integrate a GraphQL API with no-code / low-code.

In order to do API requests from our bubble.io application, we need to install the API Connector plugin. That can be done from the Add plugin tab. There are lots of good tutorials on that to be found on Google. Having done that, you need to add an API and create a first API call. See the screenshot below to find the correct buttons on the plugin.

Add API and API call in bubble.io
Add API and API call in bubble.io

After that, we want to add our POST request therefore, we add a request of type POST. Besides that, we will need to set the Content-Type header to application/json and add a JSON body. In the JSON body, you can copy everything that is listed as raw-data in the first gist above.

bubble.io request for GraphQL API
bubble.io request for GraphQL API

Lastly, you hit the Initialize call button and that is it! You have just integrated your no-code bubble.io application with a GraphQL library.

Summing up: Reasons for using GraphQL APIs with your no-code / low-code application

To sum up, I will quickly summarize the most important reasons to consider GraphQL APIs.

It’s easy to change the schema of your data.

You don’t have to change your API requests when the underlying data schema changes. Since a GraphQL query still works, even if not all fields are requested, API requests don’t break as easily as they do in the REST pattern. That makes API changes go smoother.

It’s faster

As explained above, you can combine requests for data from multiple tables into one query. That means you don’t have to do multiple requests to get all the data you need.

The GraphQL runtime helps you

In the case of queries that are not working, GraphQL gives you verbose error messages. So GraphQL can let you know when you are missing a required attribute and which one you are missing. That makes development a lot easier.