Creating a single-page application with Aamu.app's database and GraphQL API

This time, let’s create a simple application, which uses just HTML, JavaScript and Aamu.app’s database through GraphQL. So, it’s what is known as a single-page application. The source code for this application (well, one HTML file with some JavaScript in it) is at GitHub.

Using this in real life

A small warning is in order: this uses the database API key, which gives write permissions to the database. So, using this on the public Internet like this is not advised. In those cases you should do the API access on the server side.

You can see the general principle here and maybe that will guide you enough into real applications.

Create the database

First you need the database at Aamu.app. Conveniently, we have a template for it. You can create a database from the template in here:

The App

We will create a sort of reservation calendar, which accepts entries consisting of a title and a date, and show the current entries as a list. It would look like this:

The list of entries is fetched from the database with GraphQL, for which you would need an API KEY, which you can create in the Database Settings.

A new entry is submitted through the Forms endpoint, which you can also get in the Database Settings. We could also send the form data through GraphQL API, but using the forms endpoint is easy and enough for this application.

Both of these should be set in the HTML file, where is says like this:

// Set these!
const API_KEY = '';
const FORM_ENDPOINT = '';

How the GraphQL part works here?

So, when the HTML file is loaded into the browser, this happens:

async function getData() {
	try {
		const response = await fetch('https://api.aamu.app/api/v1/graphql/', {
			method: 'POST',
			headers: {
				'Content-Type': 'application/json',
				'Accept': 'application/json',
				'x-api-key': API_KEY
			},
			body: JSON.stringify({ query: `
				{
				Sheet1Collection(sort: { startTime: DESC }) {
					id
					created_at
					updated_at
					title
					startTime
				}
				}
			`})
		});
		if (!response.ok) throw new Error(`HTTP error: ${response.status}`);
		const data = await response.json();
		if (data?.errors) {
			data.errors.forEach(e => setError(e.message));
		} else if (data?.data) {
			handleData(data.data);
		} else {
			setError('No data returned from API');
		}
	} catch (err) {
		console.log('Error:', err);
	}
}

// Get current data from the calendar (database)
getData();

So, getData() is called, which fetches the rows from the database (table Sheet1) and then presents the data on the screen (function handleData).

Note that you can do GraphQL queries very easily, using the Fetch API. You can read more about the syntax of the GraphQL queries here in our blog.

Sending the data

As told, sending happens through the Forms API. Sharing the Forms API endpoint is safe — it can be used only for adding data.

That’s it!

There’s not much more to it: just fetching data from a database and adding data to a database, while showing it on a screen. This was a really simple application.