After spending most of my days doing Product Management work lately, I decided to spend some time building a PoC application to manage daily tasks for my kids.
The goal was to build it using ReactJS and write as little code as possible. Yes, the plan relied on taking advantage of tools & libraries to reduce the needed code for this first iteration.
Airtable was chosen for the data storage to avoid creating and maintaining a DB schema and/or GraphQL DSL, also to avoid creating a GUI to manage (review/filter/group) the tasks.
The app was simple enough to only require the creation of three tables, , and .
While exposing the GraphQL API via BaseQL a few limitations got discovered. The main issue was related to sorting data using nested elements and the implemented work-around was creating a new field on the <-> linked record to provide a new field available as not pretty, but it works as expected.
This is how the field configuration looks like:
A similar approach was used for the field used as a grouping field at the Airtable GUI.
Once the previous configuration was added, it was possible to do the sorting using the field.
Probably spending more time reading the BaseQL docs is required to resolve this without adding the Lookup field.
BaseQL provide a really intersting feature which allows you to expose mutations on your GraphQL API by updating a configuration option via the application interface as show here:
After doing this configuration the following GraphQL mutation can now be executed:
From the application callback function, this is how the mutation code looks like:
This is the required code to render a table using this library:
TableQL allows you to control how to render the data by providing an array containing the columns you want to render.
In this example, instead of rendering the field value, the code is rendering a ReactJS component.
After a quick research ClerkDev was found, and by spending less that 30 min to get the create-react-app working with the following features (user auth, SSO using Google, multi-user session for testing, multiple environments among others) the desicion was made to use this tool.
You can see the code used for sign-in/sign-up and validate rendering the app once the user was logged in:
Minimum required clerk settings for this example to work:
Make sure the username on clerk matches the at Airtable, because that is used to query the data via the GraphQL endpoint. Having a way to sync data between Clerk and Airtable will be ideal and worth some research time.
After adding Clerk to take care of the user management, it seems the table is no longer needed, but is kept because it was used on a script to populate the records at midnite.
This is how the app looks like, pretty simple but functional.
Login via Clerk:
I am fully aware there are other many tools for each one of those needs, FaunaDB + FaunAdmin, Firebase + Firetable, 8Base, Supabase, Sanity, Prismic, ReactTable, MagicLink and many, many others (some of those tools we curently use or had used in the past at Octahedroid).
But I used the mentioned tools because are the best tools for the problem I was trying to resolve and provide an easy path and less friction to implement at this very moment.
If you want to try this you can:
In order to install Airtable apps as BaseQL and take advantage of running scripts on automations you will need to have a paid plan.