Integrating Fauna Into Preact WMR Application
Published: 2021-06-16 16:28:19

In this tutorial, we’ll integrate Fauna into a Preact WMR application. We’ll perform CRUD actions to our database within the WMR application. Our focus will solely be on exploring Fauna CRUD actions within a Preact WMR application.

While the development process is evolving for developers, there’s a need by many developers to have an all-in-one development tool that will make web application development faster and easier. [WMR](https://github.com/preactjs/wmr) gives developers the added feature and advantage of building web applications based on the all-in-one development tool.

In this tutorial, we will integrate Fauna into a Notes keeping application built using Preact WMR library. Let’s start by implementing the frontend part of the Notes application.

Prerequisites
- A basic understanding of React and React hooks.
- Have Node installed on our local machine
- A basic understanding of JavaScript
- Have `yarn` or `npm` installed as a node package manager

## Implementing The Frontend Application
We will implement the frontend part of the application by cloning a WMR project, and walk through the different parts of the project. We start by cloning an already built WMR application repository.

```
git clone https://github.com/IkehAkinyemi/preact-wmr-notes-app.git
```

Once done cloning the application, open the project in your choice of text editor. Within the project, our focus is on the ./public/api and ./public/config folders. Within these folders, we have our setup and connection to our database, that we’ll set up later within this tutorial. 

Next, we install [Fauna’s JavaScript driver](https://docs.fauna.com/fauna/current/drivers/javascript.html), this will help make CRUD actions to the database for fetching, deleting and also creating data on it.

```
yarn add faunadb
```
or
```
npm install --save faunadb
```

Within the `./public/config` folder, we create a `db.js`  file, and import the Fauna library. We proceed to set up our `client` and `query` variables to help us connect to our database.

```
import faunadb from "faunadb";
const client = new faunadb.Client({ secret: process.env.REACT_APP_DB_KEY });
const q = faunadb.query;
export { client, q };
```

We will generate our API key once we have our database set up later within this tutorial. Let’s proceed to define our CRUD actions within the `./public/api/index.js` file. 

```
import { client, q } from "../config/db";
const getAllNotes = client
  .query(q.Paginate(q.Match(q.Ref("indexes/all_notes"))))
  .then((res) => {
    const noteRef = res.data;
    const getAllDataQuery = noteRef.map((ref) => {
      return q.Get(ref);
    });
    return client.query(getAllDataQuery).then((data) => data);
  })
  .catch((err) => err.message);
const createNote = (note) =>
  client
    .query(q.Create(q.Collection("notes"), { data: { note } }))
    .then((ref) => ref)
    .catch((err) => err.message);
const deleteNote = (noteId) =>
  client
    .query(q.Delete(q.Ref(q.Collection("notes"), noteId)))
    .then((ref) => ref)
    .catch((err) => err.message);
export { getAllNotes, createNote, deleteNote };
```

Here we created and exported three different CRUD actions: `getAllNotes`, `createNote`, and `deleteNote`. These will help us develop, obtain, and delete our Notes data from the database through some frontend actions that we will see later in the tutorial. Within the `getAllNotes` action, our database set up would contain **Indexes** with the name of `all_notes`. This will help us group our note data, within the database, into a single group search. The createNote action records that our database would contain a **Collection** named `notes`.

We proceed to the `./public/pages/app/index.jsx` file where we created **JSX** elements that will help us markup and style our frontend application. And then import all our API functions to help us carry out our CRUD actions. We also define utility functions that will work with React hooks to get all the notes data from the database, create note data on the database, and delete a particular Note.

```
import { useState, useEffect } from "preact/hooks";
import { FaTrash } from "react-icons/fa";
import { createNote, deleteNote, getAllNotes } from "../../api";
import styles from "./style.module.css";

export default function NoteApp() {
  const [Notes, setNotes] = useState([]);
  useEffect(() => {
    getAllNotes.then((res) => {
      setNote(res);
      console.log(res);
    });
  }, []);
  const [currNote, setcurrNote] = useState("");
  const addNote = (e, note_content) => {
    Notes.push({
      id: Notes.length,
      note: note_content,
    });
    // createNote(note_content).then((res) => {
    //   console.log("Expense details added to the database");
    // });
    setcurrNote("");
    e.preventDefault();
  };
  const deleteNoteItem = (note_idx) => {
    const notes = Notes.filter((note) => note.id !== note_idx);
    setNotes(notes);
    deleteNote(note_idx).then((res) => res);
  };
  const extractNotes = () =>
    Object.values(Notes).map((note) => (
      <li key={note.id} class={styles.noteItem}>
        <span
          class={styles.deleteIcon}
          onClick={(e) => deleteNoteItem(note.id)}
        >
          <FaTrash size={20} color={"red"} />
        </span>
        {note.note}
      </li>
    ));
  return (
    <section class={styles.wmr_app}>
      <h1>Preact WMR Note Application Built With Fauna</h1>
      <div class={styles.inputArea}>
        <h3>Write and add your Notes.</h3>
        <input
          class={styles.inputField}
          type="text"
          value={currNote}
          onChange={(e) => setcurrNote(e.currentTarget.value)}
          onKeyUp={(e) => (e.key == "Enter" ? addNote(currNote) : null)}
        />
        <button class={styles.button} onClick={(e) => addNote(e, currNote)}>
          Add
        </button>
      </div>
      <div class={styles.notes_list_wrapper}>
        <ul class={styles.unstyled_list}>{extractNotes()}</ul>
      </div>
    </section>
  );
}

```

In the above code, we define utility functions, `addNote`, `deleteNoteItem` and `extractNotes`. The `addNote` will be used to update our database with the new note item and update our frontend application. The `deleteNoteItem` would be used to delete note items from the database, and also on the frontend part of the application. The `extractNote` will help us extract the values of the notes we will get from the database. Our frontend application will look like the below UI with the predefined styles we have in the `./public/pages/app/styles.module.css`: 

![first photo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s10l2iu6f833si5aa1dx.png)

Now we have the frontend part of our application ready. Now, let’s integrate Fauna into our application.

## Integrating Fauna Into Our Application
[Fauna](https://fauna.com/) is a flexible, developer-friendly, transactional cloud database delivered as a secure Data API that provides two interfaces: GraphQL and the Fauna Query Language (FQL). It includes functionality to store collections, indexes, and other databases (multi-tenancy). To learn more about Fauna, visit the [official documentation](https://docs.fauna.com/fauna/current/start/index.html).

We need to create the database for our Preact WMR application in Fauna’s dashboard. If you have not created an account on Fauna before now, create one [here](https://fauna.com/).

Within the dashboard screen, press on the `NEW DATABASE` button, and provide a name for the database then press the SAVE button. In this tutoria,l we call it **notes_application**.

![Navigation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q587wl5lu1kglyf5qjud.png)

Next, we create a Fauna collection to store data in the recently created database. A **Collection** is similar to SQL tables containing similar characteristics, e.g. a user collection with information about users in the database. Click on the `NEW COLLECTION`.

![Fauna's dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/von4qtp5qpblqihlisuv.png)

Once we click on the button, it will take us to a form where we’ll name our data collection. In this tutorial, we’ll call it **notes**:

![collection](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sqz82iuaeupp4l50shnw.png)

Next we create the **INDEXES** for the collection of the database. A Fauna index allows us to browse through data stored in a database collection based on specific attributes.

![collection form](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dgnezml9qt3l1wnedu1c.png)

We’ll click on the `NEW INDEX` to create a new index for our database. We name ours **all_notes**. Remember to select the current collection we’re creating the index for.

![index](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4w898t5pohl1ylrf8xpo.png)

Next navigate to the **SECURITY** tab. By clicking on the `SECURITY` button on the sidebar to generate an API key for our application. Click the `SAVE` button.

![security](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xplom6hvembz8btltq2c.png)

Once you have done this, Fauna will present you with your `Secret Key`. Copy the key immediately and store it within our application or somewhere easily retrievable because it will only be displayed once.

Now we’re done with the basic setup for our database. We can now go to our application and start creating, storing, getting, and deleting our notes.

Our final frontend application will look like the UI below. The frontend application is ready to carry out our basic CRUD actions. 

![complete application](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/im7jmebs95q5xs81gami.png)

Our database will contain this data in an object with a `note` field.

![database](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6cb51okktg21vy78r39s.png)

## Conclusion
In this tutorial, we built a Notes application with Fauna's serverless database and Preact WMR. We saw how easy it is to integrate Fauna into a Preact WMR application and got the chance to explore some of its core features and functionalities. Here’s my [Twitter handle](https://twitter.com/IkehAkinyemi), @IkehAkinyemi, also my dev.to handle, I would love to answer your questions on this tutorial and also see you build with Fauna.

The source code of this tutorial is available on [GitHub](https://github.com/IkehAkinyemi/preact-wmr-notes-app).