Frontend Serverless with React and GraphQL

First, we need to create an account with GraphCMS. Head over to https://www.graphcms.com and do the following steps:

1. Sign up for a new GraphCMS account. You will need to enter your email, password, and name.
2. You will need to verify your email. They will send you an email and you can open it and click on the verify button.
3. Now that you are verified, you should log in on the GraphCMS website.
4. Click on the (+) Create a new project button.
5. Give a name and description, we will use Next Chop but you can use whatever you want.
6. Select the region closest to you and click "Create Project".
7. You can select the free plan to start and then you should have a blank project.

Now that we have a blank project, we need to create 2 new models- the first is Recipe and the second is UserLike. Let's set up the Recipe model first.

1. Click on the Schema button on the side and then the "Create Model" button. Give it a name of Recipe.
2. Drag the single line text field to the schema and drop it. Name it title and leave the Api Id alone.
3. Create a single line text field with the name description.
4. Create a markdown field with the name content.
5. Create a asset picker field with the name image.
6. Create a json field with the name ingredients.
7. Create a single line text field with the name owner.

Now create a UserLike model and create the following fields:

1. Create a single line text field with the name user.
2. Click back on the Recipe page. Create a new reference field called userLikes.
3. Select UserLike as the model that can be referenced. Check on the slider that says allow multiple values. Click the configure the reverse field button.
4. On the new reference field dialog box, set the field name to be recipe rather than Recipe with a capital letter.
5. Press the create button.

Still with me? Okay great, so what we've done is create an account with GraphCMS and then established the two models that represent our schema. GraphCMS will do the rest and set up an entire backend for us to use.

Now we need to set the Public API permissions so we can actually access our endpoint from our app.

1. Click on the settings button and then API Access.
2. Click on the checkbox under queries Content from stage Draft.
3. Click on the Draft button under "Default content gets delivered from stage".
4. Check the Mutations checkbox and then click the save button.

Now that we've set up our GraphCMS, lets turn back to our project. First add .env as a line to the .gitignore file. Next add dotenv to our project:

npm install --save dotenv

We need to make sure that we never commit our .env file. Add .env to the .gitignore file:

.next
node_modules
.DS_Store
.env

Next we have to set up our next.config.js file with the environmental variables that we will be using.

require('dotenv').config();
const { BRANCH, GRAPHCMSURL, GRAPHCMSPROJECTID } = process.env;
module.exports = {
  publicRuntimeConfig: {
    graphcms: {
      BRANCH,
      GRAPHCMSURL,
      GRAPHCMSPROJECTID,
    },
  },
};

These environmental variables get set in .env file:

BRANCH=master
GRAPHCMSURL=YOUR_GRAPHCMS_URL
GRAPHCMSPROJECTID=YOUR_PROJECT_ID

You can get the BRANCH, GRAPHCMSURL, GRAPHCMSPROJECTID variables from the GraphCMS settings page that wwe were just on. You can copy the Endpoints url. The format is GRAPHCMSURL/GRAPHCMSPROJECTID/BRANCH. After setting your .env variables and saving the next.config.js, stop the server by pressing ctrl + c and then starting the server back up.