DEV Community: Gerald Amezcua

Full-stack web app with NextJS and Graphql

Gerald Amezcua — Mon, 31 Aug 2020 21:24:20 +0000

Full stack web app with NextJS and Graphql

When we talk about developing a front end application with ReactJS we can find 3 main options. CRA which focuses on building single-page web applications but having difficulty with CEO positioning. Gatsby which focuses on static site generation with great performance, with cool CEO and data-fetching. And then we have NextJS, in my opinion, the best way to write ReactJS web applications nowadays, server-side rendering with the option of making it client-side, cool built-in routing, 0 configuration philosophy, and since NextJS 9, this framework provides API routes which is a really easy way to provide back-end to our react app and which we are going to be using for this post. In this post, we are going to learn how we can implement a GraphQL API running over an API route.

The basic NextJS app

As I mentioned before NextJS focuses on a 0 configuration philosophy we can easily configure it but to make it even easier let's just type npx create-next-app todo-app in our terminal to have it ready to use. Once the project is setup let's cd todo-app and type yarn dev to run the server and see that everything is running.

The API Route

Cool!, We now have our nextjs web app up and running. Let's create a new file inside pages/api/ called graphql.js and let's add the following code:

export default (req, res) => {
  res.statusCode = 200

  res.send("GRAPHQL")
}

And if we go to localhost:3000/api/graphql we'll be able to see the text GRAPHQL written. Easy!. Let's now configure GraphQL!.

GraphQL setup

Install it

First, let's add a dependency called apollo-server-micro by writing yarn add apollo-server-micro

Our Schema

The next thing we need to work with graphql is Writing our schema, which will define the Queries and Mutations we have and how the data is structured. For now, we want to have a query called hello which will return a string. So let's add the following to the top of our route.

import { ApolloServer, gql } from 'apollo-server-micro'

const schema = gql`
  type Query {
    hello: String!
  }
`;

Resolvers

We have just written our schema, but now GraphQL needs the resolvers of our schema, which tells graphql where to fetch our data from. Below the schema let's add our resolvers.

const resolvers = {
  Query: {
    hello: (_parent, _args, _context) => "world!"
  }
}

The server

Now let's create our server with our schema and resolvers.

const apolloServer = new ApolloServer({
  typeDefs: schema,
  resolvers,
  context: () => {
    return {}
  }
})

Cool, with this instance we can access a handler, in charge of handling all the requests and responses and as we are actually working with NextJS we need to specify it that we don't need bodyParser in our requests.

Let's remove the last export default and change it for the following

const handler = apolloServer.createHandler({ path: "/api/graphql" });

export const config = {
  api: {
    bodyParser: false
  }
};

export default handler;

Okay, we have now a basic configuration of a GraphQL server, why don't we go to localhost:3000/api/graphql and see what we have now!

and if we run the following

query {
    hello
}

We will have our response from the resolver.

CORS

We need another thing to use this API from the front end, so let's add a new package by typing yarn add micro-cors, and let's add the following.

import  Cors  from  "micro-cors";  

const cors =  Cors({ 
    allowMethods:  ["POST",  "OPTIONS"]
});  

// Here is how we connect our handler with cors.
export default cors(handler);

Data from Postgres with Knex.

At some point, our app would need some sort of access to a database to persist some data. For this, we will need to set up some stuff so let's do it! First Let's add knex and Postgres with yarn add knex pg

Now let's create a file called knexfile.js with our database configuration.

module.exports = {
  development: {
    client: "postgresql",
    connection: "postgres://postgres@localhost:5432/todo",
    migrations: {
      tableName: "knex_migrations"
    }
  },
};

Next, let's create our first migration, which will tell Postgres how to create our tables, let's start by typing yarn run knex migrate:make create_todo and inside the folder migrations will have a new file generated, let's open it and add how we want our table to be created.

exports.up = function(knex) {
  return knex.schema.createTable("todos", function(table) {
    table.increments("id");
    table.string("description", 255).notNullable();
    table.boolean("done").defaultTo(false).notNullable();
  });
};

exports.down = function(knex) {
  return knex.schema.dropTable("todos");
};

And let's build our table!. Run yarn run knex migrate:up

Now we need to create a constant which will help us manage the database inside our code. Let's open /pages/api/graphql.js and add the following.

import knex from "knex";

const db = knex({
  client: "pg",
  connection: "postgres://postgres@localhost:5432/todo"
});

Updating our schema

Cool, we can now work. Why don't we change our schema and resolvers?

const schema = gql`
  type Query {
    todos: [Todo]!
    todo(id: ID!): Todo
  }

  type Todo {
    id: ID!
    description: String!
    done: Boolean!
  }
`;

const resolvers = {
  Query: {
    todos: (_parent, _args, _context) => {
      return db
        .select("*")
        .from("todos")
        .orderBy("id")
    },
    todo: (_parent, { id }, _context) => {
      return db
        .select("*")
        .from("todos")
        .where({ id })
        .first()
    }
  }
}

And if we now go to localhost:3000/api/graphql we'll finally be able to fetch and play with our data!

But wait a minute... How are we going to create data?
Well...
Let's go and see how we can add a Mutation which will help us create data inside our database!

Creating data

First, we have to add a new type inside our schema. We first need to specify the name of the mutation in this case createTodo and then inside the parenthesis the names and types of values that we will receive, at the end, we need to specify what our mutation will return, in this case, a Todo type.

const schema = gql`
  ...

  type Mutation {
    createTodo(description: String!, done: Boolean): Todo
    completeTodo(id: ID!): Todo
  }
`;

Now inside our resolvers object let's add the new Mutation key and the createTodo

const resolvers = {
  ...

  Mutation: {
    createTodo: async (_, { description, done }, _c) => {
      return (await db("todos").insert({ description, done }).returning("*"))[0]
    },
    completeTodo: async (_, { id }, _c) => {
      return (await db("todos").select("*").where({ id }).update({ done: true }).returning("*"))[0];
    }
  }
}

And with this, now we can create and complete todos in our database

Cool, but what about the Front-end?

The client

Until now we have been building the server-side of our application by integrating graphql in an API route, why don't we integrate the client side of our app?

Dependencies

Let's start by adding two dependencies we need to connect to GraphQL
yarn add @apollo/react-hooks apollo-boost

Provider

First let's setup the Apollo Client of our app. for this let's open pages/_app.js and add the following:

import '../styles/globals.css'
import { ApolloProvider } from '@apollo/react-hooks';
import ApolloClient, { gql } from 'apollo-boost';


function MyApp({ Component, pageProps }) {
  const client = new ApolloClient({
    uri: "http://localhost:3000/api/graphql"
  })

  return (
    <ApolloProvider client={client}>
      <Component {...pageProps} />
    </ApolloProvider>
  )
}

export default MyApp

Query

Now let's open our pages/index.js and import what we are going to need

import React, { useState } from 'react';
import { useQuery, useMutation } from "@apollo/react-hooks";
import { gql } from 'apollo-boost';

Now, we first need to declare our GraphQL query, exactly as we would do in the GraphQL Playground

const GET_TODOS = gql`
  query {
    todos {
      id
      description
      done
    }
  }
`

Now inside our component, we are going to use the query and map through them to render them in the app

export default function Home() {
  const { loading, error, data, refetch } = useQuery(GET_TODOS);

  if(loading) return <p>Loading...</p>
  if(error) return <p>ERROR :(</p>

  return (
    <div>
      <h1>My TODO list</h1>

      {
        data.todos.map((todo) => (
          <div key={todo.id}>
            {todo.description}
            <button
              disabled={todo.done}
            >
              {todo.done ? "Done" : "Complete"}
            </button>
          </div>
        ))
      }

    </div>
  )
}

Cool, now we should be seeing our todos on the browser. Now let's add a way to create todos. Let's start by adding the createTodo mutation

const CREATE_TODO = gql`
  mutation CreateTodo($description: String!) {
    createTodo(description: $description) {
      id
      description
      done
    }
  }
`

Now inside our component, we add some state management, our mutation, and our form to perform the mutation to end up like this:

export default function Home() {
  ...
  const [todo, setTodo] = useState("");
  const [createTodo] = useMutation(CREATE_TODO);

  const saveTodo = async (e) => {
    e.preventDefault();
    await createTodo({variables: { description: todo }});
    refetch();
    setTodo("")
  }

  ...

  return (
    <div>
      <h1>My TODO list</h1>

      <form onSubmit={saveTodo}>
        <label>
          New todo
          <input onChange={e => setTodo(e.target.value)} value={todo} />
        </label>
        <button type="submit">Save</button>
      </form>

      ...

    </div>
  )
}

Completing todos

Pretty straightforward!, Why don't we add our completeTodo mutation and add functionality to our buttons?
Here we have our mutation declaration:

const COMPLETE_TODO = gql`
  mutation CompleteTodo($id: ID!) {
    completeTodo(id: $id) {
      id
    }
  }
`

And inside our component we have:

export default function Home() {
  const [todo, setTodo] = useState("");
  const { loading, error, data, refetch } = useQuery(GET_TODOS);
  const [createTodo] = useMutation(CREATE_TODO);
  const [completeTodo] = useMutation(COMPLETE_TODO)

  const saveTodo = async (e) => {
    e.preventDefault();
    await createTodo({variables: { description: todo }});
    refetch();
    setTodo("")
  }

  const onComplete = async (id) => {
    await completeTodo({variables: { id }});
    refetch();
  }


  if(loading) return <p>Loading...</p>
  if(error) return <p>ERROR :(</p>

  return (
    <div>
      <h1>My TODO list</h1>

      <form onSubmit={saveTodo}>
        <label>
          New todo
          <input onChange={e => setTodo(e.target.value)} value={todo} />
        </label>
        <button type="submit">Save</button>
      </form>

      {
        data.todos.map((todo) => (
          <div key={todo.id}>
            {todo.description}
            <button
              disabled={todo.done}
              onClick={() => onComplete(todo.id)}
            >
              {todo.done ? "Done" : "Complete"}
            </button>
          </div>
        ))
      }

    </div>
  )
}

And if now we go to our browser we can see our app working!

Conclusion

GraphQL is a technology that has been growing a lot in the last couple of years and so has NextJS. And now that we can have API routes in our NextJS app we can integrate them to build a delightful stack and be able to have a full-stack web application as a monolith but which can even run serverless 🤔?

Photo by Alina Grubnyak on Unsplash

Cutting Edge ReactJS Boilerplate without Webpack

Gerald Amezcua — Wed, 24 Jun 2020 17:32:13 +0000

The why

Recently I started working in some projects using ReactJS and at the moment of deciding what our team was going to use a good friend of mine ran into Parcel while watching a nice course by Brian Holt at Frontend Masters called Complete Intro to React, v5. So he said why don't we use it instead of webpack, because seriously sometimes it gets really strange and does stuff hard to work with.

So I remembered about Parcel and said okay, let's use it in the following project, I read about it and started making the setup of all the dependencies we think we are going to need for the project. Everything is working properly so I started another toy project and realized quickly that I needed a lot of the dependencies that the other project has, so I decided to extract a new Template or Boilerplate for any other projects that you or I would need.

What's included?

Parcel
ReactJS
Emotion
i18n
css.gg
react-spring
React Router
JSON Web token
React Hook Form
axios
SCSS
jest
cypress

What commands do we have?

npm run dev Starts parcel and storybook servers in development mode
npm run start Starts parcel in development mode
npm run format Formats code beautifully
npm run clear-build-cache Clears cache and dist folders
npm run lint Users ESLint to check code
npm run test Run tests
npm run test:coverage Runs tests displaying code coverage
npm run test:update Updates snapshots
npm run test:watch Runs Jest in watch mode
npm run cypress Starts Cypress

The repo

The repository is available at Github. and can be used as a template for any project you what to build with.

Happy coding

Photo by Ferenc Almasi on Unsplash

Reactive views from server and 0 JavaScript?

Gerald Amezcua — Wed, 25 Mar 2020 19:34:29 +0000

Elixir

In 2011, a new programming language appeared with a simple focus in mind: Making a programming language concurrent, elegant, easy, blasting fast, and powered by one of the monsters ever built, Erlang.

Elixir is a functional language built on top of Erlang, providing a delightful syntax pretty similar to Ruby, it is designed to scale tons of thousands of threads concurrently and enabling communication between them via messages. Elixir and erlang also promote a really nice expression things will go wrong and this is because it is designed to fail, offering a lot of mechanisms such as supervisors restarting particular parts or threads of the system instead of a complete explosion.

Phoenix

Phoenix is to Elixir what Rails is to Ruby: an amazingly fast web framework for building web applications without compromising scalability or maintainability.

By taking advantage of Phoenix speed, channels, and HTTP 2.0 implementation, Phoenix's builders came out with a cool library for Phoenix called LiveView which provides a really cool way to make reactive views with 0 Javascript and just Elixir.

Let's stop talking and let's write some code!

Having in mind that you already installed NodeJS in your computer, we first want to have Elixir installed

brew install elixir

Mix is a build tool that ships with Elixir that provides tasks for creating, compiling, testing your application, managing its dependencies and much more.

Now that we have it installed, let's install Phoenix

mix archive.install hex phx_new 1.4.0

Now we are all set to create our new Phoenix app

mix phx.new reactivity

A lot of things are going to start happening so, when mix asks us to Fetch and install dependencies?, just type y.

Now, let's set up our database and start our server

cd reactivity
mix ecto.create
mix phx.server

And know in our browser, we can go to localhost:4000

Now we are ready to set up `LiveView`

First, let's open our mix.exs file and add LiveView as a dependency and then run mix deps.get

def deps do
  [
    ...
    {:phoenix_live_view, "~> 0.10.0"},
    {:floki, ">= 0.0.0", only: :test}
  ]
end

After getting all the dependencies, let's restart our server by pressing ctr+c twice and then mix phx.server

Now, let's open config/confix.exs and add out endpoint configuration. You can generate your own salt by running mix phx.gen.secret 32

config :reactivity, ReactivityWeb.Endpoint,
   ...
   live_view: [
     signing_salt: "YOUR_SALT_GOES_HERE"
   ]

Now we need to configure our browser pipeline:

# lib/my_app_web/router.ex
import Phoenix.LiveView.Router

pipeline :browser do
  ...
  plug :fetch_session
- plug :fetch_flash
+ plug :fetch_live_flash
end

Then, add the following imports to our web file in lib/reactivity_web.ex:

# lib/reactivity_web.ex

def controller do
  quote do
    ...
    import Phoenix.LiveView.Controller
  end
end

def view do
  quote do
    ...
    import Phoenix.LiveView.Helpers
  end
end

def router do
  quote do
    ...
    import Phoenix.LiveView.Router
  end
end

Then, we will configure our endpoint:

# lib/reactivity_web/endpoint.ex

defmodule ReactivityWeb.Endpoint do
  use Phoenix.Endpoint

  # ...

  socket "/live", Phoenix.LiveView.Socket,
    websocket: [connect_info: [session: @session_options]]

  # ...
end

Now, let's add LiveView JavaScript dependency:

{
  "dependencies": {
    "phoenix": "file:../deps/phoenix",
    "phoenix_html": "file:../deps/phoenix_html",
    "phoenix_live_view": "file:../deps/phoenix_live_view"
  }
}

And let's install it:

npm install --prefix assets

Now, let's enable the socket communication:

// assets/js/app.js
import {Socket} from "phoenix"
import LiveSocket from "phoenix_live_view"

let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content");
let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}});
liveSocket.connect()

And finally, and optionally, you can add the default CSS:

/* assets/css/app.css */
@import "../../deps/phoenix_live_view/assets/css/live_view.css";

Perfect! We can now restart our server and check if everything is OK!

Controller

Now that we have everything set up, we can start by writing our first Controller, which will have the specific action for our route and will render our LiveView!

Let's go ahead and create a new file under /lib/reactivity_web/controllers/ called to_do_controller.ex and add the following:

defmodule ReactivityWeb.ToDoController do
  use ReactivityWeb, :controller

  def index(conn, _params) do
    live_render(conn, ReactivityWeb.ToDoView)
  end
end

Then, add the route to lib/reactivity_web/router.ex

  scope "/", ReactivityWeb do
    pipe_through :browser

    get "/", PageController, :index

    get "/todo", ToDoController, :index
  end

LiveView

Add a new folder index /lib/reactivity_web/ called live and a file inside it called to_do_view.ex with the next content:

defmodule ReactivityWeb.ToDoView do
  use Phoenix.LiveView

  # Method that returns the HTML code that will be rendered
  def render(assigns) do
    ~L"""
      <div>
        <span> <%= format_date(@time) %></span>
      </div>
    """
  end

  # This is the first function that gets called once the live view is loaded
  def mount(_session, _, socket) do
    # Check if the socket is correctly connect we send a tick in the server and falls in handle_info(:tick, process)
    if connected?(socket), do: Process.send_after(self(), :tick, 1000)

    # Here we assign all the variables needed for our view
    {:ok, assign(socket, time: :calendar.local_time())}
  end

  # This function receives the tick event and the socket that triggered the event
  def handle_info(:tick, socket) do
    # So we send another tick after 1 second
    Process.send_after(self(), :tick, 1000)
    # And reply to our view with the local time, which ends up in rendering the view again
    {:noreply, assign(socket, time: :calendar.local_time())}    
  end


  # Helper to format the date into a readable Hour
  def format_date(date) do
    {_, {h, m, s}} = date
    "#{h}:#{m}:#{s}"
  end

end

And now, if we go to localhost:4000/todo, we'll see

As you can see, the view is being rendered without making any kind of event from the browser: the server knows that every second a :tick event is being triggered and the handle_info(:tick, socket) function handles this event and updates the state or assigns making the view render again.

Now, let's add some more code in order to build a simple To-Do list.

First, we'll add a new variable called todos:

  def mount(_session, _, socket) do
    if connected?(socket), do: Process.send_after(self(), :tick, 1000)
    {:ok, assign(socket, time: :calendar.local_time(), todos: [])}
  end

Add a form and a loop for rendering the tasks in our To-Do list. Here's the form will an option called phx_submit and a value of :save: this means that, whenever the form is submitted, LiveView will trigger an event called :save with the data in the form.

  def render(assigns) do
    ~L"""
      <div>
        <span> <%= format_date(@time) %></span>

        <%= f = form_for :todo, "#", [phx_submit: :save] %>
          <%= label f, :task %>
          <%= text_input f, :task %>

          <%= submit "Save" %>
        </form>

        <ul>
          <%= for task <- @todos do %>
            <li><%= task %></li>
          <% end %>
        </ul>
      </div>
    """
  end

Now to handle that event, let's add a new handle_event function:

  #This function will handle the save event on submit form 
  def handle_event("save", %{"todo" => %{"task" => task}}, socket) do
    # And we will add the new task to out tasks array
    {:noreply, update(socket, :todos, &([task |&1]))}
  end

And now in the browser, you will see:

And that's it!

No JavaScript needed and a whole world of opportunities around Elixir, Phoenix and this amazing library LiveView. There's a ton of things you can build with this and you don't need a lot of languages and stuff trying to interact with each other. Elixir has been growing along with its community, so I think it's the best time to start learning it and build amazing stuff with it.

And here is the full code