Create a Fauna Room Collection in Next.js with the fauna Client
The first step to building a chat app is to have rooms to chat in. We'll need to create a Room collection (or table) in Fauna that we'll be adding to.
In our Next Application we'll create a simple form that has a submit handler that will create those rooms in Fauna. We need to hold some state in our component so we'll turn the page into a client component with 'use client'.
There will be a little bit more Fauna set up to get things working. We need to create a key for our application to interact with our database so we'll create a key by running Key.create in our fauna shell. Then we'll install the fauna client and make a client.query to create the room.
[00:00] We're gonna go back to our page.js file. Next, we're going to import user state from React. Once we save our code, we're gonna get an error. This is because in Next 14, all the page components by default are server components. Now notice in the builder here, it tells us that [00:20] we can only use user state in a client component. So to make this component a client component, we're going to mark it with use client. And now the error is gone. Next, we're going to create a state for room name using the user state hook. [00:42] And then we'll delete the h one tag here, and we will add a new form here, and we'll add in a new input tag. The input has a type of text. It has a placeholder and the value is room name variable. And then [01:01] we have the on change event handler that we bind to the set room name function. And then we'll add a submit button. Now on the form tag, we will create, on submit event handler and then we will bind [01:21] it to the create new room function. And let's go ahead and create this new function called create new room. Okay. So let's go ahead and implement this function. However, first we need a room table in our [01:41] database. In Fauna, we can create database entities like tables from schema. In the root of our application, we're going to create a new folder called schema. Next I'm going to add a new file called main.fsl in this schema folder. And in our schema file we're going [02:01] to write collection room and empty squiggly bracket. This tells Fauna that we're trying to create a new table called room. The tables are also called collections in Fauna. Next, we push this schema to the cloud by running fauna schema push in our terminal. And when we accept these changes, it will create a room collection or a room [02:21] table in our cloud database. We can go back to the FaunaCloud dashboard and verify that the room collection has been created. We need to be able to connect to our database from our application code. To do so, we need a key. So we're gonna go run Fauna shell in the terminal and this will connect us to the Fauna cloud from our [02:41] terminal. So we're gonna write key dot create and we're gonna pass in a role, which is gonna be the server role. And running this will create a key for this database that has a server role. We're gonna learn more about roles when we get to authentication. Next, we are going to create a [03:01] new dotenv file in the root of our application and then here we're gonna create a new environment variable called next public fauna key and we're going to paste in the secret for our database here. Next, we're going to install the Fauna package by running npmifauna safe in [03:20] our terminal. And then we're gonna go back to the page. Js file and here we are going to start implementing the create new room function. So first, we're gonna import client and [03:40] FQL from fauna library. Next, we're going to initialize a new fauna client. And we're going to pull in the secret from our environment variable. Next, we're gonna go to our create new room function [04:00] and add a prevent default. And then we're gonna add a try catch block. And then inside the try block we're gonna make a query to fauna. Const new room equals 08 client dot query and [04:20] then fQL and then we're gonna do backticks and inside the backticks we're gonna write the fQL query. So we're gonna write room dot create and then name and the name is going to be the room name and we will console log [04:40] the response. Now let's go ahead and try to create a new room from the web app. And we're gonna inspect the console. So let's just clear this. Let's do it again, and we'll see that [05:00] this is our response, and it looks like a new room just got created in the database. We can verify this by going back to the Fauna dashboard and looking at the room collection and we can see our rooms are getting created.