Catalogue management is hard. But building a catalogue management app for your company is harder. Not only does the application have to connect to multiple tables/API, and pull data on inventory, price and even offers, but the application also needs a robust UI that lets the user manage this catalogue easily.

Not only does this take a lot of time to build and maintain, but direct access to the database or an API endpoint that could return private information could also prove to be a problem. GraphQL helps solve these problems inherently in the way it returns only what it is queried for.

Because of these benefits, GraphQL is a great interface to develop an internal application on and to make development and maintenance easier, a low-code tool like appsmith can be very useful and will help speed up the process of development.

In this tutorial, we'll learn to create an application to manage a games store's catalogue running a GraphQL backend. We'll be using appsmith to build the application and implement CRUD operations on the database.

Game Catalogue App Screenshot
Appsmith is an open-source framework that lets developers build dashboards, workflows, and CRUD apps with only the necessary code. You can connect to any API or databases like MongoDB, PostgreSQL, or MYSQL and get access to multiple widgets including charts, tables and forms for building a UI really fast.

Initial Setup

To build this application, first, we’ve collected a dataset from Kaggle that has a list of games, their prices, rating, average playtime and genre they’ve belonged to. We’ve created a mock database out of this, hosted it on Hasura and exported them as GraphQL APIs. Below is an image showing some of the attributes of the dataset.

Mock Data hosted on Hasura

Here, as we can see, the response consists of data of games in a JSON format. Next, we’ll use Appsmith to utilise this database and build a Store Manager by writing different GraphQL queries.

Getting started with Appsmith

To begin, we'll need to sign up for Appsmith (it's free!), if we don't already have an account. We can also deploy a Docker image on a server. For this tutorial, we're going to create an application on Appsmith cloud.

  1. Sign in to Appsmith Account
  2. Click <highlight>Create New<highlight> to create a new application and name it <highlight>GraphQL Store Manager<highlight>. This takes you to an empty workspace with a sidebar.
  3. On the sidebar, you should see items like Pages, API, and DB Queries in a folder-like structure. Under Pages, a new page, <highlight>Page1<highlight>, already exists. Rename it as <highlight>Store Dashboard<highlight>.

Below is a screenshot of the application:

Initial App Setup

Connecting to the Database and Creating the first UI View

To work with Appsmith, you need a database. This can be in the form of an API or a database. Appsmith supports MongoDB, MySQL, and PostgreSQL, among others. In this case, we’ll be connecting to Hasura, as it'll be our GraphQL backend server. To establish a new connection, follow these steps:

  1. Make a connection to a database by clicking the plus icon near APIs on the sidebar under a page.
  2. Now, rename your API to <highlight>FetchGames<highlight>
  3. We’ll write a POST request and use GraphQL query to list down all the games in the database.
  4. Next, use the following URL as the data source to access the mock database hosted on GraphQL: <light><light>
  5. We’ll have to set headers in order to access the database. Set <highlight>content-type<highlight> to <highlight>application/json<highlight> and <highlight>x-hasura-admin-secret<highlight> to <highlight>qpN7KbsgIoKcuuC1sL3xiaIN2eegukvPPweg6MW1RkM8KUkaHAi85U3FOVj0Zkxm<highlight>
  6. Next, we’ll have to write a GraphQL query in the request body to list all the database games. This will require an object with <highlight>query<highlight> as key and the GraphQL query <highlight>value<highlight> associated with it to fetch the games.

  "query": {{JSON.stringify(`
    query {
        steam_games(limit: 100, order_by: {appid: asc}) {

Here, we have the query stringified with moustache syntax to ignore all the line breaks. Inside the query, we have the table name we want to query <highlight>steam_games<highlight> with a limit parameter set to <highlight>100<highlight> and an <highlight>ordey_by<highlight> parameter to order all the games by the <highlight>appid<highlight> ascending order using the <highlight>asc<highlight> keyword. Inside the query, we’ll have to use the fields we want to fetch. Now hit <highlight>Run<highlight> to run the query. You should see a list of games in a JSON field in the response tab.

FetchGames API Response

Awesome! You now have your store catalogue with all the games and their prices. Let’s now build a UI to display all these games on a beautiful table.

  1. Navigate to Page1 and click on the plus icon next to the widgets.
  2. Now drag and drop a table widget onto the canvas; we'll see a new table with some pre-populated data.
  3. Next, we’ll have to open the table’s property pane to update the table data by clicking on the cog icon.
  4. Inside the property pane, we’ll find a <highlight>Table Data<highlight>property, and here we’ll have to bind the FetchGames API. Use the moustache syntax and add the below code snippet:


This will pull data from the FetchGames API we’ve set up in the previous section.

GIF Two.gifm

Beautiful! We now have our catalogue displayed on a table. Next, we’ll create a form where we can add new games to the database.

Implementing Create Operation on Database

In this section, let’s look at how we can add new values to the database by building a simple UI. For this, let’s create a new Form on Appsmith that takes in all necessary fields to post in our game store database.

  1. Now, go back to the page, and drag and drop a form widget. Inside the form widget, we’ll add some Input widgets that accept necessary fields to add a new game to the database.
  2. We’ll also have to name the input fields so that we’ll have to reference them while posting values from the GraphQL query.
  3. Additionally, we’ll also have some text widgets that’ll look like labels for the Input widgets. Below is how we’ll have to name the text widgets and associated input widgets.

Name : <highlight>nameInput<highlight>

Default Text: <highlight>{{}}<highlight>

AppId : <highlight>appIdInput<highlight>

Default Text: <highlight>{{Table1.selectedRow.average_playtime}}<highlight>

Average Play Time : <highlight>avgPlayTimeInput<highlight>

Default Text: <highlight>{{Table1.selectedRow.average_playtime}}<highlight>

Genres : <highlight>genresInput<highlight>

Default Text: <highlight>{{Table1.selectedRow.genres}}<highlight>

Price : <highlight>priceInput<highlight>

Default Text: <highlight>{{Table1.selectedRow.price}}<highlight>

You can simply do this by going to the input widget’s property pane and double-clicking on the existing widget name.

Below is a screenshot how the form should look like,

Game Post Form

Perfect, we now have our UI ready; let’s create a GraphQl API to post data into the Database.

  1. Create a new API by clicking on the plus icon next to the APIs, rename the API to <highlight>InsertGame<highlight>.
  2. Set the <highlight>content-type<highlight> and <highlight>x-hasura-admin-secret<highlight> header to access the database on Hasura from the previousFetchGames` API.
  3. Now we’ll have to write a GraphQL query inside the request body, paste the below code snippet inside the Body:

    "query": {{JSON.stringify(`
    mutation ($object: steam_games_insert_input!) {
        insert_steam_games_one(object: $object) {
    "variables": {
        "object": {{JSON.stringify({
            appid: appIdInput.text,
            name: nameInput.text,
            average_playtime: avgPlayTimeInput.text,
            price: priceInput.text,
            genres: genresInput.text,

Here, we have an object consisting of a <highlight>query<highlight> key that holds the GraphQL query and a <highlight>variables<highlight> key with all the variables that need to be posted to the database.

Now, in the query, we have a mutation that lets us modify the server-side data. Inside the mutation, we’ll send the object that references the data we will be querying. The <highlight>steam_games_set_input<highlight> allows us to update an object in the database. Next, we’ve associated the variables to the object from the created UI input widgets from the Edit Modal. The <highlight>.text<highlight> on the input widget name helps us get the text written inside the input.

Now we’ll have to call the EditGame API after the modal is submitted, hence open the button’s property pane and add the following code snippet under the onclick action:

{{ => {;

This will update the item on the store and refresh the table, by re-running the FetchGames query.

Deleting the Store Item on Database

This section looks at how we can delete the database’s values by building a simple button on the table. For this, let’s create a new column consisting of a button in the table; if clicked, the selected item should be deleted.

Open the Table Property Pane, and click on the <highlight>Add New Column<highlight> option. Now set the column type to Button and the <highlight>label<highlight> to Delete.

Now let’s write a Delete API and link it to the created button.

  1. Create a new API by clicking on the plus icon next to the APIs, rename the API to <highlight>DeleteGame<highlight>.
  2. Set the <highlight>content-type<highlight> and <highlight>x-hasura-admin-secret<highlight> header to access the database on Hasura from the previousFetchGames` API.
  3. Now we’ll have to write a GraphQL query inside the request body, paste the below code snippet inside the Body:

    "query": {{JSON.stringify(`
    mutation {
        delete_steam_games(where: {appid: {_eq: "${this.params.appid}"} }) {

Now, in the query, we have a mutation that lets us modify the server-side data. The <highlight>delete_steam_games<highlight> allows us to delete an object in the database based on the selected <highlight>appid<highlight>. The <highlight>appid<highlight> from the table is referenced using <highlight>this.params.appid<highlight>.

Lastly, let’s call this API, after we click the delete button, go to the delete button property pane and select the Call an API action in the actions and select the <highlight>DeleteGame<highlight> API.

To refresh the table, after deleting an object, you can add custom JS in the button's onclick property:

{{ =>, () => {}, {appid: currentRow.appid})

This code snippet will first, delete the Game and then fetches the data again and updated it on the table.


You've seen how easy it is to build an application on Appsmith, specifically a catalogue dashboard. This guide covered how to create an application and connect it to a GraphQL, as well as how to create, read, update and delete data. You learned how to build interactive pages, work with widgets, and customize them for your purposes.

Building a dashboard with Appsmith is a fast way to build admin tools. Check it out if you’d like to save your developers time and get internal tools launched faster.

Cover Image: Photo by Charisse Kenion on Unsplash