Forem: Solomon Antoine

Collect form submissions with NextJS & Google Sheets

Solomon Antoine — Fri, 04 Feb 2022 22:05:21 +0000

Collect form submissions with NextJS & Google Sheets

In this tutorial, learn how to build a form that save records into Google Sheets using NextJS & TailwindCSS.

Google Cloud

We want to login or register an account for Google Cloud, then create a new project like so:

Go to the APIs & Services page and click the ENABLE APIS AND SERVICES button then search for sheets

The click Enable

After you’ve enable the Google Sheets API, then click the Credentials on the left navigation. Then click your service account and add a new key using the JSON option like so:

After you download the json file, copy the private_key and client_email as they will later be using in the env file

Google Sheets

Next, we want to setup our Google Sheet and add the Name, Email, Phone & Message as columns like so:

Then make the Google Sheet public.

Setup our project

Setup NextJS

Next, we will want to create our NextJS project by using the following command:

$ npx create-next-app nextjs-sheets-form --typescript

Setup TailwindCSS

Install TailwindCSS by running the following:

$ npm install -D tailwindcss postcss autoprefixer @tailwindcss/forms
$ npx tailwindcss init -p

Next, go to your tailwind.config.js file and add the following:

module.exports = {
    content: [
        "./pages/**/*.{js,ts,jsx,tsx}",
        "./components/**/*.{js,ts,jsx,tsx}",
    ],
    theme: {
        extend: {}
    },
    plugins: [
        require('@tailwindcss/forms')
    ],
}

Lastly update you styles/global.css file with the following:

@tailwind base;
@tailwind components;
@tailwind utilities;

Update .env

Next, let’s setup our .env.local file then add the following values.

GOOGLE_CLIENT_EMAIL=
GOOGLE_PRIVATE_KEY=
GOOGLE_SHEET_ID=

The GOOGLE_PRIVATE_KEY is the API key you created earlier while the GOOGLE_CLIENT_EMAIL is the primary email for your Google Cloud account and the GOOGLE_SHEET_ID is the Spreadsheet ID available in the URL.

Add Google API

Next we want to install the Google API package by using the following command:

$ npm i googleapis

Code our project

Now that our project is setup with the necessary packages, we want to design our form using TailwindCSS

Update Index File

import type { NextPage } from 'next'
import {FormEvent, useState} from "react";

const Home: NextPage = () => {
    const [name, setName] = useState('');
    const [email, setEmail] = useState('');
    const [phone, setPhone] = useState('');
    const [message, setMessage] = useState('');

    const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
        e.preventDefault();

        let form = {
            name,
            email,
            phone,
            message
        }

        const rawResponse = await fetch('/api/submit', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(form)
        });
        const content = await rawResponse.json();

        // print to screen
        alert(content.data.tableRange)

        // Reset the form fields
        setMessage('')
        setPhone('')
        setName('')
        setEmail('')
    }

    return (
        <main className="bg-gray-100 min-h-screen">
            <div className="max-w-5xl mx-auto py-16">
                <form className="py-4 space-y-4" onSubmit={handleSubmit}>
                    <div className="flex items-center justify-center">
                        <label htmlFor="name" className="sr-only">Name</label>
                        <input value={name} onChange={e => setName(e.target.value)} type="text" name="name" id="name" className="shadow-md focus:ring-indigo-500 focus:border-indigo-500 block w-64 sm:text-md border-gray-300 rounded-md" placeholder="Your Name" />
                    </div>
                    <div className="flex items-center justify-center">
                        <label htmlFor="email" className="sr-only">Email</label>
                        <input value={email} onChange={e => setEmail(e.target.value)} type="email" name="email" id="email" className="shadow-md focus:ring-indigo-500 focus:border-indigo-500 block w-64 sm:text-md border-gray-300 rounded-md" placeholder="Your Email" />
                    </div>
                    <div className="flex items-center justify-center">
                        <label htmlFor="phone" className="sr-only">Phone</label>
                        <input value={phone} onChange={e => setPhone(e.target.value)} type="tel" name="phone" id="phone" className="shadow-md focus:ring-indigo-500 focus:border-indigo-500 block w-64 sm:text-md border-gray-300 rounded-md" placeholder="Your Phone" />
                    </div>
                    <div className="flex items-center justify-center">
                        <label htmlFor="message" className="sr-only">Message</label>
                        <textarea value={message} onChange={e => setMessage(e.target.value)} id="message" className="shadow-md focus:ring-indigo-500 focus:border-indigo-500 block w-64 sm:text-md border-gray-300 rounded-md" placeholder="Your Message" />
                    </div>
                    <div className="flex items-center justify-center">
                        <button type="submit" className="flex items-center justify-center text-sm w-64 rounded-md shadow py-3 px-2 text-white bg-indigo-600">Save</button>
                    </div>
                </form>
            </div>
        </main>
    )
}

export default Home

Setup API Endpoint

Next, we want to setup our API endpoint to update our Google Sheet. Create a file called api/submit.ts and add the following code:

import type { NextApiRequest, NextApiResponse } from 'next'
import {google} from "googleapis";

type SheetForm = {
    name: string
    email: string
    phone: string
    message: string
}

export default async function handler(
    req: NextApiRequest,
    res: NextApiResponse
) {
    if (req.method !== 'POST') {
        return res.status(405).send({ message: 'Only POST requests allowed' })
    }

    const body = req.body as SheetForm

    try {
        const auth = new google.auth.GoogleAuth({
            credentials: {
                client_email: process.env.GOOGLE_CLIENT_EMAIL,
                private_key: process.env.GOOGLE_PRIVATE_KEY?.replace(/\\n/g, '\n')
            },
            scopes: [
                'https://www.googleapis.com/auth/drive',
                'https://www.googleapis.com/auth/drive.file',
                'https://www.googleapis.com/auth/spreadsheets'
            ]
        })

        const sheets = google.sheets({
            auth,
            version: 'v4'
        });

        const response = await sheets.spreadsheets.values.append({
            spreadsheetId: process.env.GOOGLE_SHEET_ID,
            range: 'A1:D1',
            valueInputOption: 'USER_ENTERED',
            requestBody: {
                values: [
                    [body.name, body.email, body.phone, body.message]
                ]
            }
        });

        return res.status(201).json({
            data: response.data
        })
    }catch (e) {
        return res.status(e.code).send({message: e.message})
    }

}

Recap

In conclusion, configuring NextJS + Google Sheets is a pretty simple task and is a quick way to collect information without having to manage a database. If you found this tutorial useful, considering subscribing to my YouTube channel where I record
programming content on the regular or follow me on Twitter.

Social

Build a blog powered by NextJS & Notion API

Solomon Antoine — Thu, 27 Jan 2022 20:05:19 +0000

Link to YouTube tutorial: https://youtu.be/LFRYYIoiIZg
Blog Example: https://nextjs-notion-blog-chi.vercel.app/

Introduction

Notion has been a game changer when it comes to my personal life. It allows me to manage everything from documenting goals, to journaling my thoughts. Because of this, I figured I’d use Notion to power my personal blog over a tool like WordPress for the convenience of not having to ever leave Notion. In this tutorial, I will demonstrate how you can use the NotionAPI in conjunction with NextJS & TailwindCSS to power your blog.

Setup Notion

Make sure you have a Notion account, note you can use their free tier for this tutorial.

Create a Notion Integration

Go to https://www.notion.so/my-integrations and create a new internal integration

Create a Notion Database Page

You can duplicate the template here.

Grant Integration access to Blog

Click the share button and give your integration access.

Create Project

Create NextJS Application

$ npx create-next-app mysite --typescript

Install TailwindCSS

npm install -D tailwindcss postcss autoprefixer @tailwindcss/typography
npx tailwindcss init -p

Setup Project

Edit Tailwind Config

Go to your tailwind.config.js file and add the following:

module.exports = {
    content: [
        "./pages/**/*.{js,ts,jsx,tsx}",
        "./components/**/*.{js,ts,jsx,tsx}",
    ],
    theme: {
        extend: {},
        fontFamily: {
            sans: ["'Montserrat'"],
            mono: ["'Inconsolata'"]
        }
    },
    plugins: [
        require('@tailwindcss/typography')
    ],
}

Add Tailwind CSS to Global.css file

@tailwind base;
@tailwind components;
@tailwind utilities;

Add Document.tsx

In order to make use of our custom fonts, we need to create a new file called pages/_document.tsx with the following information

import Document, {Html, Head, Main, NextScript, DocumentContext} from 'next/document'

class MyDocument extends Document {
    static async getInitialProps(ctx: DocumentContext) {
        const initialProps = await Document.getInitialProps(ctx)
        return {...initialProps}
    }

    render() {
        return (
            <Html>
                <Head>
                    <link rel="preconnect" href="https://fonts.googleapis.com"/>
                    <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin={'true'}/>
                    <link
                        href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@200;300;400;500;600;700;800;900&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
                        rel="stylesheet"/>
                </Head>
                <body>
                <Main/>
                <NextScript/>
                </body>
            </Html>
        )
    }
}

export default MyDocument

Add .env file

Create a new file called .env.local with the following info:

NOTION_ACCESS_TOKEN=
NOTION_BLOG_DATABASE_ID=

For the NOTION_ACCESS_TOKEN we can go to our integrate and copy the secret key

For the NOTION_BLOG_DATABASE_ID we can copy the uuid within the url

Add Types File

Create a new file called @types/schema.d.ts and add the following:

export type Tag = {
    color: string
    id: string
    name: string
}

export type BlogPost = {
    id: string;
    slug: string;
    cover: string;
    title: string;
    tags: Tag[];
    description: string;
    date: string
}

Build the project

Install Notion Client & Markdown

We need to install the Notion Javascript client in order to get the blog data and a couple other packages for display purposes

npm install @notionhq/client notion-to-md react-markdown

Create Custom Notion Service

import {Client} from "@notionhq/client";
import {BlogPost, PostPage} from "../@types/schema";
import {NotionToMarkdown} from "notion-to-md";

export default class NotionService {
    client: Client
    n2m: NotionToMarkdown;

    constructor() {
        this.client = new Client({ auth: process.env.NOTION_ACCESS_TOKEN });
        this.n2m = new NotionToMarkdown({ notionClient: this.client });
    }

    async getPublishedBlogPosts(): Promise<BlogPost[]> {
        const database = process.env.NOTION_BLOG_DATABASE_ID ?? '';
        // list blog posts
        const response = await this.client.databases.query({
            database_id: database,
            filter: {
                property: 'Published',
                checkbox: {
                    equals: true
                }
            },
            sorts: [
                {
                    property: 'Updated',
                    direction: 'descending'
                }
            ]
        });

        return response.results.map(res => {
            return NotionService.pageToPostTransformer(res);
        })
    }

    async getSingleBlogPost(slug: string): Promise<PostPage> {
        let post, markdown

        const database = process.env.NOTION_BLOG_DATABASE_ID ?? '';
        // list of blog posts
        const response = await this.client.databases.query({
            database_id: database,
            filter: {
                property: 'Slug',
                formula: {
                    text: {
                        equals: slug // slug
                    }
                },
                // add option for tags in the future
            },
            sorts: [
                {
                    property: 'Updated',
                    direction: 'descending'
                }
            ]
        });

        if (!response.results[0]) {
            throw 'No results available'
        }

        // grab page from notion
        const page = response.results[0];

        const mdBlocks = await this.n2m.pageToMarkdown(page.id)
        markdown = this.n2m.toMarkdownString(mdBlocks);
        post = NotionService.pageToPostTransformer(page);

        return {
            post,
            markdown
        }
    }

    private static pageToPostTransformer(page: any): BlogPost {
        let cover = page.cover;
        switch (cover) {
            case 'file':
                cover = page.cover.file
                break;
            case 'external':
                cover = page.cover.external.url;
                break;
            default:
                // Add default cover image if you want...
                cover = ''
        }

        return {
            id: page.id,
            cover: cover,
            title: page.properties.Name.title[0].plain_text,
            tags: page.properties.Tags.multi_select,
            description: page.properties.Description.rich_text[0].plain_text,
            date: page.properties.Updated.last_edited_time,
            slug: page.properties.Slug.formula.string
        }
    }
}

Edit Index file

First we want to make use of the staticProps method like so:

import {GetStaticProps, InferGetStaticPropsType} from "next";
import Head from "next/head";
import {BlogPost} from "../@types/schema";
import NotionService from "../services/notion-service";

export const getStaticProps: GetStaticProps = async (context) => {
    const notionService = new NotionService();
    const posts = await notionService.getPublishedBlogPosts()

    return {
        props: {
            posts
        },
    }
}

const Home = ({posts}: InferGetStaticPropsType<typeof getStaticProps>) => {
    const title = 'Test Blog';
    const description = 'Welcome to my Notion Blog.'

    return (
        <>
            <Head>
                <title>{title}</title>
                <meta name={"description"} title={"description"} content={description}/>
                <meta name={"og:title"} title={"og:title"} content={title}/>
                <meta name={"og:description"} title={"og:description"} content={title}/>
            </Head>

            <div className="min-h-screen">
                <main className="max-w-5xl mx-auto relative">
                    <div className="h-full pt-4 pb-16 px-4 md:px-0 mx-auto">
                        <div className="flex items-center justify-center">
                            <h1 className="font-extrabold text-xl md:text-4xl text-black text-center">Notion + NextJS Sample Blog</h1>
                        </div>
                        <div className="mt-12 max-w-lg mx-auto grid gap-5 lg:grid-cols-2 lg:max-w-none">
                            {posts.map((post: BlogPost) => (
                                <p key={post.id}>Blog Post Component Here: {post.title}</p>
                            ))}
                        </div>
                    </div>
                </main>
            </div>
        </>
    )
};

export default Home;

Blog Card Component

Next, we want to create a component for a Blog card

First install dayjs for morphing dates

$ npm install dayjs

the create a file components/BlogCard.tsx

import {FunctionComponent} from "react";
import Link from "next/link";
import {BlogPost} from "../@types/schema";
import dayjs from 'dayjs'

type BlogCardProps = {
    post: BlogPost
}
const localizedFormat = require('dayjs/plugin/localizedFormat');
dayjs.extend(localizedFormat)

const BlogCard: FunctionComponent<BlogCardProps> = ({post}) => {

    return (
        <Link href={`/post/${post.slug}`}>
            <a className="transition duration-300 hover:scale-105">
                <div key={post.title} className="flex flex-col rounded-xl shadow-lg overflow-hidden">
                    <div className="flex-shrink-0">
                        <img className="h-64 w-full object-fit" src={post.cover} alt="" />
                    </div>
                    <div className="flex-1 bg-gray-50 pt-2 pb-6 px-4 flex flex-col justify-between">
                        <div className="flex-1">
                            <span className="block mt-2">
                                <h4 className="text-xs font-medium text-gray-600">{dayjs(post.date).format('LL')}</h4>
                            </span>
                            <span className="block mt-2">
                                <h3 className="text-xl font-semibold text-gray-900">{post.title}</h3>
                            </span>

                            <span className="block mt-2">
                                <p className="text-sm text-gray-600">{post.description}</p>
                            </span>

                            <span className="block mt-2 space-x-4">
                                {
                                    post.tags.map(tag => (
                                        <span key={tag.id} className='bg-green-300 text-green-800 px-2 py-1 text-xs rounded-lg'>
                                                                        #{tag.name}
                                                                    </span>
                                    ))
                                }
                            </span>
                        </div>
                    </div>
                </div>
            </a>
        </Link>
    );
};

export default BlogCard;

Then replace

<p>Blog Post Component Here: {post.title}</p>

with

import BlogCard from "../components/BlogCard";

<BlogCard key={post.id} post={post}/>

in the index file.

Create Post File

Next, we want to create the page for displaying single blog posts, by making a file called post/[slug].tsx where we will make us of dynamic parameters.

💡 We will be making use of both getStaticPaths and getStaticProps which means you will have to redeploy your site whenever you make a change in Notion since we are generating static paths.

import {GetStaticProps, InferGetStaticPropsType} from "next";
import ReactMarkdown from "react-markdown";
import Head from "next/head";
import NotionService from "../../services/notion-service";

const Post = ({markdown, post}: InferGetStaticPropsType<typeof getStaticProps>) => {
    return (
        <>
            <Head>
                <title>{post.title}</title>
                <meta name={"description"} title={"description"} content={post.description}/>
                <meta name={"og:title"} title={"og:title"} content={post.title}/>
                <meta name={"og:description"} title={"og:description"} content={post.description}/>
                <meta name={"og:image"} title={"og:image"} content={post.cover}/>
            </Head>

            <div className="min-h-screen">
                <main className="max-w-5xl mx-auto relative">
                    <div className="flex items-center justify-center">
                        <article className="prose">
                            <ReactMarkdown>{markdown}</ReactMarkdown>
                        </article>
                    </div>
                </main>
            </div>

        </>
    )
}

export const getStaticProps: GetStaticProps = async (context) => {
    const notionService = new NotionService()

    // @ts-ignore
    const p = await notionService.getSingleBlogPost(context.params?.slug)

    if (!p) {
        throw ''
    }

    return {
        props: {
            markdown: p.markdown,
            post: p.post
        },
    }
}

export async function getStaticPaths() {
    const notionService = new NotionService()

    const posts = await notionService.getPublishedBlogPosts()

    // Because we are generating static paths, you will have to redeploy your site whenever
    // you make a change in Notion.
    const paths = posts.map(post => {
        return `/post/${post.slug}`
    })

    return {
        paths,
        fallback: false,
    }
}

export default Post;

Recap

In conclusion, Notion is powerful tool that you can use for replacing your CMS applications. If you found this tutorial useful, considering subscribing to my YouTube channel where I record
programming content on the regular or follow me on Twitter.

Social

Getting Started with the Laravel L.I.T.T.R Stack

Solomon Antoine — Tue, 18 Jan 2022 14:03:27 +0000

In the past months, I’ve noticed a trend where I download the same exact packages to my freshly installed Laravel application — which I’ve decided to coin as the L.I.T.T.R stack. LITTR standing for Laravel - Inertia - Tailwind - Typescript - React. Yes, I can already hear your sigh of yet another acronym being introduced to the Laravel stack. However, I feel this write up is necessary because I’ve noticed a common theme of having to reference my other projects just to get this combination of packages to work together. In this blog post, I will show you how to quickly get started with the L.I.T.T.R stack.

1. Install Laravel

In order to get started, we need a Laravel project to work with. That can be done with a quick composer command like so:

$ composer create-project --prefer-dist laravel/laravel littr-stack

2. Install Server Side Inertia

First we want to set up Inertia on the server side by adding it as a composer dependency like so:

$ composer require inertiajs/inertia-laravel

Then create the file resources/views/app.blade.php

and add the following code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <link href="{{ mix('/css/app.css') }}" rel="stylesheet" />
    <script src="{{ mix('/js/app.js') }}" defer></script>
    @inertiaHead
  </head>
  <body>
    @inertia
  </body>
</html>

Then create the middleware by running:

$ php artisan inertia:middleware

and then add the following to the App/Http/Kernel.php file:

'web' => [
    // ...
    \App\Http\Middleware\HandleInertiaRequests::class,
],

3. Install React Typescript

Next, we want to prepare React by first installing our npm packages:

$ npm install react react-dom @types/react @types/react-dom

then add Typescript by running:

$ npm install ts-loader typescript @babel/preset-react --dev

after that we want to create the tsconfig.json file and add the following:

{
    "compilerOptions": {
        "target": "es5",
        "lib": [
            "dom",
            "dom.iterable",
            "esnext"
        ],
        "allowJs": true,
        "skipLibCheck": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "noEmit": false,
        "esModuleInterop": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "jsx": "preserve",
        "incremental": true,
        "baseUrl": ".",
        "paths": {
            "@/*": [
                "resources/js/*"
            ]
        }
    },
    "include": [
        "next-env.d.ts",
        "**/*.ts",
        "**/*.tsx"
    ],
    "exclude": [
        "node_modules",
        "public"
    ]
}

4. Install Client Side Inertia

Next we want to set up Inertia on the client side by adding it as a npm dependency like so:

$ npm install @inertiajs/inertia @inertiajs/inertia-react

then delete the file by running:

$ rm resources/js/bootstrap.js

and convert our app.js file to typescript by running

$ mv resources/js/app.js resources/js/app.tsx

then add the following code to your app.tsx

import React from 'react'
import {render} from 'react-dom'
import {createInertiaApp} from '@inertiajs/inertia-react'

createInertiaApp({
    resolve: name => require(`./Pages/${name}`),
    setup({el, App, props}) {
        render(<App {...props} />, el)
    },
})

5. Install Tailwind

Lastly, we want to install Tailwind by running the following commands:

$ npm install -D tailwindcss postcss autoprefixer

then initialize your config file like so:

$ npx tailwindcss init

then update your tailwind.config.js with the following code

module.exports = {
    content: [
        "./resources/**/*.blade.php",
        "./resources/**/*.js",
        "./resources/**/*.jsx",
        "./resources/**/*.tsx",
        "./resources/**/*.vue",
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

and then update your resources/css/app.css with the following code

@tailwind base;
@tailwind components;
@tailwind utilities;

and lastly update your webpack.mix.js with the following code

mix.ts('resources/js/app.tsx', 'public/js')
    .react()
    .postCss('resources/css/app.css', 'public/css', [
        require('tailwindcss'),
        require('autoprefixer'),
    ]);

6. Test Our Code

Create a new file resources/js/Pages/Foo.tsx then add the following code:

import {FunctionComponent} from "react";

const Foo: FunctionComponent = () => {
    return (
        <div className="h-screen bg-gradient-to-br from-red-200 via-red-300 to-yellow-200 flex items-center justify-center">
            <h1 className="text-white text-center text-6xl font-extrabold tracking-tight">LITTR Stack Works!</h1>
        </div>
    )
}

export default Foo;

Then update routes/web.php to include the following:

Route::inertia('foo', 'Foo');

Then compile our client side code by running:

$ npm run dev

After that we can start our server by running:

$ php artisan serve

and then visit http://127.0.0.1/foo

FYI, the page should look like this:

Get Started with GraphQL and Laravel

Solomon Antoine — Sun, 16 Jan 2022 00:02:23 +0000

Get Started with GraphQL and Laravel

GraphQL is a powerful REST alternative that allows developers to build APIs. We will be using GraphQL to create a simple CRUD application that allows us to create, read, update and delete data.

Setup the project

Prerequisites

PHP
Composer
NPM (optional)
Docker

Create new Laravel Project

Use composer to create a new Laravel project by running:

composer create-project --prefer-dist laravel/laravel graphql-basics

Install Laravel Sail

We will be using Laravel Sail to run our local environment. Sail allows us to seamlessly run Docker without complex configuration

composer require laravel/sail --dev
php artisan sail:install

Select [0] the mysql service

Start Docker

Create a sail shortcut:

alias sail='[ -f sail ] && bash sail || bash vendor/bin/sail'

Start Sail & Docker:

sail up -d

Install GraphQL Laravel library

The most popular GraphQL libraries for Laravel are Rebing & Lighthouse, in our tutorial we will be using Rebing
which we can install by running:

composer require rebing/graphql-laravel

Then publish the config file

sail artisan vendor:publish --provider="Rebing\\GraphQL\\GraphQLServiceProvider"

Prepare database migrations & models

Run the following command to create the Company model, migration and factory:

sail artisan make:model Company -m -f

Migration

Edit the generated migration file by replacing its content with the following:

<?php

use Illuminate\\Database\\Migrations\\Migration;
use Illuminate\\Database\\Schema\\Blueprint;
use Illuminate\\Support\\Facades\\Schema;

class CreateCompaniesTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('companies', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('contact_email');
            $table->string('street_address');
            $table->string('city');
            $table->string('country');
            $table->string('domain');

            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('companies');
    }
}

Model

Now, add these fields as $fillable properties for the Company model.

<?php

namespace App\\Models;

use Illuminate\\Database\\Eloquent\\Factories\\HasFactory;
use Illuminate\\Database\\Eloquent\\Model;

class Company extends Model
{
    use HasFactory;

    /**
     * The attributes that are mass assignable.
     *
     * @var string[]
     */
    protected $fillable = [
        'name',
        'contact_email',
        'street_address',
        'city',
        'country',
        'domain'
    ];
}

Factory

Let's create our Company factory for seeding purposes.

<?php

namespace Database\\Factories;

use Illuminate\\Database\\Eloquent\\Factories\\Factory;

class CompanyFactory extends Factory
{
    /**
     * Define the model's default state.
     *
     * @return array
     */
    public function definition()
    {
        return [
            'name' => $this->faker->company,
            'contact_email' => $this->faker->companyEmail,
            'street_address' => $this->faker->streetAddress,
            'city' => $this->faker->city,
            'country' => $this->faker->country,
            'domain' => $this->faker->domainName
        ];
    }
}

Update Database Seeder

<?php

namespace Database\\Seeders;

use App\\Models\\Company;
use Illuminate\\Database\\Seeder;

class DatabaseSeeder extends Seeder
{
    /**
     * Seed the application's database.
     *
     * @return void
     */
    public function run()
    {
        Company::factory(10)->create();
    }
}

Migrate & Seed Database

Run this command to seed our database:

sail artisan migrate --seed

Build our GraphQL Server

Let's start defining our GraphQL schema

Create GraphQL Type for Company

Run the following command to create our GraphQL type:

sail artisan make:graphql:type CompanyType

Then navigate to the app/GraphQL/Types directory and modify the file like so:

<?php

declare(strict_types=1);

namespace App\\GraphQL\\Types;

use App\\Models\\Company;
use GraphQL\\Type\\Definition\\Type;
use Rebing\\GraphQL\\Support\\Type as GraphQLType;

class CompanyType extends GraphQLType
{
    protected $attributes = [
        'name' => 'Company',
        'description' => '',
        'model' => Company::class
    ];

    public function fields(): array
    {
        return [
            'id' => [
                'type' => Type::id(),
                'description' => 'The auto incremented ID of a company'
            ],
            'name' => [
                'type' => Type::nonNull(Type::string()),
                'description' => 'The name of a company'
            ],
            'contact_email' => [
                'type' => Type::nonNull(Type::string()),
                'description' => 'The primary point of contact for a company'
            ],
            'street_address' => [
                'type' => Type::nonNull(Type::string()),
                'description' => 'The street address of a company headquarters'
            ],
            'city' => [
                'type' => Type::nonNull(Type::string()),
                'description' => 'The city of a company headquarters'
            ],
            'country' => [
                'type' => Type::nonNull(Type::string()),
                'description' => 'The country of a company headquarters'
            ],
            'domain' => [
                'type' => Type::nonNull(Type::string()),
                'description' => 'The web domain for a company'
            ]
        ];
    }
}

Create GraphQL Queries

Queries will be used to retrieve data from the database.

CompanyQuery

Run the following to create the company query:

sail artisan make:graphql:query CompanyQuery

Then navigate to the app/GraphQL/Queries directory and modify the file like so:

<?php

declare(strict_types=1);

namespace App\\GraphQL\\Queries;

use App\\Models\\Company;
use Closure;
use GraphQL\\Type\\Definition\\ResolveInfo;
use GraphQL\\Type\\Definition\\Type;
use Rebing\\GraphQL\\Support\\Facades\\GraphQL;
use Rebing\\GraphQL\\Support\\Query;
use Rebing\\GraphQL\\Support\\SelectFields;

class CompanyQuery extends Query
{
    protected $attributes = [
        'name' => 'company'
    ];

    public function type(): Type
    {
        return GraphQL::type('Company');
    }

    public function args(): array
    {
        return [
            'id' => [
                'name' => 'id',
                'type' => Type::id(),
                'rules' => ['required']
            ],
        ];
    }

    public function resolve($root, array $args, $context, ResolveInfo $resolveInfo, Closure $getSelectFields)
    {
        return Company::findOrFail($args['id']);
    }
}

CompaniesQuery

Run the following to create the companies query:

sail artisan make:graphql:query CompaniesQuery

Then navigate to the app/GraphQL/Queries directory and modify the file like so:

<?php

declare(strict_types=1);

namespace App\\GraphQL\\Queries;

use App\\Models\\Company;
use Closure;
use GraphQL\\Type\\Definition\\ResolveInfo;
use GraphQL\\Type\\Definition\\Type;
use Rebing\\GraphQL\\Support\\Facades\\GraphQL;
use Rebing\\GraphQL\\Support\\Query;
use Rebing\\GraphQL\\Support\\SelectFields;

class CompaniesQuery extends Query
{
    protected $attributes = [
        'name' => 'companies'
    ];

    public function type(): Type
    {
        return Type::listOf(GraphQL::type('Company'));
    }

    public function resolve($root, array $args, $context, ResolveInfo $resolveInfo, Closure $getSelectFields)
    {
        return Company::all();
    }
}

Create the GraphQL Mutations

Mutations are used insert, update, and delete an entity.

Create Company Mutation

Run the following command to create new mutation:

sail artisan make:graphql:mutation CreateCompanyMutatio

Then navigate to the app/GraphQL/Mutations directory and modify the file like so:

<?php

declare(strict_types=1);

namespace App\\GraphQL\\Mutations;

use App\\Models\\Company;
use Closure;
use GraphQL\\Type\\Definition\\ResolveInfo;
use GraphQL\\Type\\Definition\\Type;
use Rebing\\GraphQL\\Support\\Facades\\GraphQL;
use Rebing\\GraphQL\\Support\\Mutation;
use Rebing\\GraphQL\\Support\\SelectFields;

class CreateCompanyMutation extends Mutation
{
    protected $attributes = [
        'name' => 'createCompany'
    ];

    public function type(): Type
    {
        return GraphQL::type('Company');
    }

    public function args(): array
    {
        return [
            'name' => [
                'type' => Type::nonNull(Type::string()),
                'description' => 'The name of a company'
            ],
            'contact_email' => [
                'type' => Type::nonNull(Type::string()),
                'description' => 'The primary point of contact for a company',
                'rules' => ['email']
            ],
            'street_address' => [
                'type' => Type::nonNull(Type::string()),
                'description' => 'The street address of a company headquarters'
            ],
            'city' => [
                'type' => Type::nonNull(Type::string()),
                'description' => 'The city of a company headquarters'
            ],
            'country' => [
                'type' => Type::nonNull(Type::string()),
                'description' => 'The country of a company headquarters'
            ],
            'domain' => [
                'type' => Type::nonNull(Type::string()),
                'description' => 'The web domain for a company'
            ]
        ];
    }

    public function resolve($root, array $args, $context, ResolveInfo $resolveInfo, Closure $getSelectFields)
    {
        return Company::create($args);
    }
}

Update Company Mutation

Run the following command to create new mutation:

sail artisan make:graphql:mutation UpdateCompanyMutation

Then navigate to the app/GraphQL/Mutations directory and modify the file like so:

<?php

declare(strict_types=1);

namespace App\\GraphQL\\Mutations;

use App\\Models\\Company;
use Closure;
use GraphQL\\Type\\Definition\\ResolveInfo;
use GraphQL\\Type\\Definition\\Type;
use Rebing\\GraphQL\\Support\\Facades\\GraphQL;
use Rebing\\GraphQL\\Support\\Mutation;
use Rebing\\GraphQL\\Support\\SelectFields;

class UpdateCompanyMutation extends Mutation
{
    protected $attributes = [
        'name' => 'updateCompany'
    ];

    public function type(): Type
    {
        return GraphQL::type('Company');
    }

    public function args(): array
    {
        return [
            'id' => [
                'name' => 'id',
                'type' =>  Type::nonNull(Type::int()),
            ],
            'name' => [
                'type' => Type::nonNull(Type::string()),
                'description' => 'The name of a company'
            ],
            'contact_email' => [
                'type' => Type::nonNull(Type::string()),
                'description' => 'The primary point of contact for a company',
                'rules' => ['email']
            ],
            'street_address' => [
                'type' => Type::nonNull(Type::string()),
                'description' => 'The street address of a company headquarters'
            ],
            'city' => [
                'type' => Type::nonNull(Type::string()),
                'description' => 'The city of a company headquarters'
            ],
            'country' => [
                'type' => Type::nonNull(Type::string()),
                'description' => 'The country of a company headquarters'
            ],
            'domain' => [
                'type' => Type::nonNull(Type::string()),
                'description' => 'The web domain for a company'
            ]
        ];
    }

    public function resolve($root, array $args, $context, ResolveInfo $resolveInfo, Closure $getSelectFields)
    {
        $company = Company::findOrFail($args['id']);

        $company->update($args);

        return $company->refresh();
    }
}

Delete Company Mutation

Run the following command to create new mutation:

sail artisan make:graphql:mutation DeleteCompanyMutation

Then navigate to the app/GraphQL/Mutations directory and modify the file like so:

<?php

declare(strict_types=1);

namespace App\\GraphQL\\Mutations;

use App\\Models\\Company;
use Closure;
use GraphQL\\Type\\Definition\\ResolveInfo;
use GraphQL\\Type\\Definition\\Type;
use Rebing\\GraphQL\\Support\\Mutation;
use Rebing\\GraphQL\\Support\\SelectFields;

class DeleteCompanyMutation extends Mutation
{
    protected $attributes = [
        'name' => 'deleteCompany'
    ];

    public function type(): Type
    {
        return Type::boolean();
    }

    public function args(): array
    {
        return [
            'id' => [
                'name' => 'id',
                'type' =>  Type::id(),
            ],
        ];
    }

    public function resolve($root, array $args, $context, ResolveInfo $resolveInfo, Closure $getSelectFields)
    {
        $company = Company::findOrFail($args['id']);

        return $company->delete();
    }
}

Load Schema

We need to register to schema within the GraphQL configuration file, located at config/graphql.php:

'schemas' => [
        'default' => [
            'query' => [
                // ExampleQuery::class,
                \\App\\GraphQL\\Queries\\CompanyQuery::class,
                \\App\\GraphQL\\Queries\\CompaniesQuery::class
            ],
            'mutation' => [
                // ExampleMutation::class,
                \\App\\GraphQL\\Mutations\\CreateCompanyMutation::class,
                \\App\\GraphQL\\Mutations\\UpdateCompanyMutation::class,
                \\App\\GraphQL\\Mutations\\DeleteCompanyMutation::class
            ],
            // The types only available in this schema
            'types' => [
                \\App\\GraphQL\\Types\\CompanyType::class
            ],

            // Laravel HTTP middleware
            'middleware' => null,

            // Which HTTP methods to support; must be given in UPPERCASE!
            'method' => ['GET', 'POST'],

            // An array of middlewares, overrides the global ones
            'execution_middleware' => null,
        ],
    ],

Run the Application

Since we already started the app using Sail, we can go to the url: http://localhost/graphiql to test our endpoints

Return all companies

{
  companies {
    id
    name
    contact_email
    street_address
    city
    country
    domain
  }
}

Return single company

{
  company(id:1) {
    id
    name
    contact_email
    street_address
    city
    country
    domain
  }
}

Create company

mutation {
  createCompany(name:"Apple Inc.", contact_email:"support@apple.com",
    street_address:"One Apple Park Way", city: "Cupertino", country:"USA", domain:"apple.com") {
    name
    domain
  }
}

Update Company

mutation {
  updateCompany(id: 3, name: "Facebook Inc.", contact_email: "support@facebook.com",
  street_address:"1 Hacker Way, Menlo Park", city: "Menlo Park", country: "USA",
    domain: "facebook.com") {
    name
    domain
  }
}

Delete Company

mutation {
  deleteCompany(id: 7)
}

Recap

In conclusion, GraphQL is a very powerful tool for building modern APIs. If you found this tutorial useful, considering subscribing to my YouTube channel where I record
programming content on the regular.

Repo

Social