Connect a Frontend Next.js Application to a Serverless Fauna Database with Apollo Client
To build out our Shop products page on the frontend we will need data coming in from the database. To do that we need to connect Fauna to Next.js. We'll do this through Apollo Client because it will give us a lot right out of the box.
To connect our database we'll configure Apollo Client with httpLink and authLink. On the Fauna side of things we'll create a role and key for Read permissions (just Read for now) and grab the graphql endpoint to supply as environment variables for Next.js.
Shadid Haque: [0:00] Next, we're going to be connecting our front-end application to Fauna. We will use the Apollo GraphQL Client library to do this. Let's go ahead and install Apollo GraphQL library. In our terminal, we're going to run npm install @apollo/client graphql.
[0:15] Let's configure the ApolloClient. Let's create a new file in our root directory. We're going to call this file gqlClient.ts. In here, we're going to import ApolloClient, InMemoryCache, and createHttpLink from ApolloClient. We also import setContext from Apollo. Next, we create a constant called httpLink. We use the createHttpLink. Inside it, we specify a uri. I'm going to keep it as an empty string for now.
[0:54] Next, I'm going to create a curried function. I'm going to name it authLink. I'm going to use the setContext function from ApolloClient to set up our authorization headers. We create a variable for our faunaKey. For now, let's just keep it empty. This is where our faunaKey will go.
[1:12] Next, let's return the headers. For authorization, we're going to use the faunaKey as our Bearer token. Next, we initiate and export a new ApolloClient. In the link, we are concating the authLink with httpLink. This is because we want to use the authorization headers. We instantiate a new InMemoryCache.
[1:43] Let's head back to our Fauna dashboard. We need to define a new role and a key to connect to our database. Let's head over to the security tab. From here, I'm going to select Roles, I'll select New Custom Role, and going to give my role a name. From collection drop-down, let's select Product. We're going to give read privilege. Let's do the same for Shop collection as well. Let's save this.
[2:18] Next, we go to the keys section and we create a new key. From the role drop-down, we'll select the role we just created. We'll give our key a name and select Save. We will copy the provided key.
[2:35] We'll head back to our code. We will create a new file called .env.local to hold our environment variables. We will create a new environment variable called Next_Public_Fauna_Key and we'll add the key in there.
[2:50] Let's head back to Fauna dashboard. From here, we're going to go back to the GraphQL tab. We will copy the GraphQL url. Back in the code, we're going to create another environment variable and we're going to call it Next_Public_Fauna_Domain and add the GraphQL url of Fauna here.
[3:11] Finally, we go back to gqlClient. Here, we replace the uri with process.env.Next_Public_Fauna_Domain. We also replace the faunaKey with the environment variable. We're just going to say process.env.Next_Public_Fauna_Key.
[3:33] At this point, all the configuration is done. Next, we're going to pull in some data into our application from Fauna database.