Forem: Nacho Iacovino ⚡

Add a connect wallet button to your website

Nacho Iacovino ⚡ — Mon, 21 Mar 2022 15:28:18 +0000

Introduction

Setting up web3 on your website and letting your users connect their wallet is essential for any web3 web app, and yet the process of integrating these features is often complex and nuanced.

thirdweb is a platform that lets you deploy smart contracts without having to know Solidity, you can do it by using TypeScript, Python or Go or even without writing any code.

Instead of spending time trying to configure a complex web3 setup, you can use the thirdweb React library to easily add web3 to your applications.

You can check the full code for this guide in this GitHub repository.

Check out the full docs for our React package here.

Get Started

To get started with the Thirdweb Component Library, you can run the following to install our packages:

# Run this to install with npm
npm install @thirdweb-dev/react @thirdweb-dev/sdk ethers

# Or run this to install with yarn
yarn add @thirdweb-dev/react @thirdweb-dev/sdk ethers

Once you've installed the necessary package, you just need to setup the ThirdwebProvider that provides all the context consumed by your app. With this context, you will have a standard web3 provider that you can use throughout your app.

Setting up this context is as easy as wrapping your app with the following setup, on the pages/_app.tsx file:

import type { AppProps } from 'next/app';
import { ThirdwebProvider } from '@thirdweb-dev/react';

function MyApp({ Component, pageProps }: AppProps) {
  const desiredChainId = 80001;

  /**
   * Make sure that your app is wrapped with these contexts.
   * If you're using React, you'll have to replace the Component setup with {children}
   */
  return (
    <ThirdwebProvider desiredChainId={desiredChainId}>
      <Component {...pageProps} />
    </ThirdwebProvider>
  );
}

export default MyApp;

Connect Wallet & Web3 Setup

Currently, we provide you with hooks to easily integrate web3 into your app and setup an app wide context without having to deal with the complexity of lower level web3 configuration.

Using custom hooks

If you want to create your own custom component instead of using ours, you can build it with our useWeb3 and useSwitchNetwork hooks. On the components/ConnectWallet.js file:

import {
  useMetamask,
  useWalletConnect,
  useCoinbaseWallet,
  useNetwork,
  useAddress,
  useDisconnect,
} from '@thirdweb-dev/react';

export const ConnectWallet = () => {
  const connectWithCoinbaseWallet = useCoinbaseWallet();
  const connectWithMetamask = useMetamask();
  const connectWithWalletConnect = useWalletConnect();
  const disconnectWallet = useDisconnect();
  const address = useAddress();
  const network = useNetwork();

  // If a wallet is connected, show address, chainId and disconnect button
  if (address) {
    return (
      <div>
        Address: {address}
        <br />
        Chain ID: {network[0].data.chain && network[0].data.chain.id}
        <br />
        <button onClick={disconnectWallet}>Disconnect</button>
      </div>
    );
  }

  // If no wallet is connected, show connect wallet options
  return (
    <div>
      <button onClick={() => connectWithCoinbaseWallet()}>
        Connect Coinbase Wallet
      </button>
      <button onClick={() => connectWithMetamask()}>Connect MetaMask</button>
      <button onClick={() => connectWithWalletConnect()}>
        Connect WalletConnect
      </button>
    </div>
  );
};

Then, we need to import this component on our index.tsx file:

import type { NextPage } from 'next'
import { ConnectWallet } from '../components/ConnectWallet';

const Home: NextPage = () => {
  return (
    <div>
      <ConnectWallet />
    </div>
  );
};

export default Home

The code

Remember, you can check the full code for this example in this GitHub repository.

This article was originally posted on thirdweb.com.

Top 10 Best Free Icon Packs for Developers and Designers

Nacho Iacovino ⚡ — Fri, 20 Aug 2021 10:29:42 +0000

Icons are an essential part of any website, you'll need them to illustrate your point better, give more personality to your app or make it easy to navigate your website, especially on mobile devices when some words might be too long and an icon fits much better.

In this article, I compiled what I considered the 10 best free icon packs, for both developers and designers to use, some of them have options to import to different formats, like png or svg, and some of them you can install them and import them directly into your projects, which makes them much more convenient if you are working with a framework like React.

Let's begin!

Heroicons

Made by the team behind Tailwind CSS, and more specifically by Steve Schoger.

Pros:

Export to SVG/JSX.
Outline/Solid versions available.
Very modern designs.
React and Vue library available for easy imports.

Cons:

No social icons.
Only 230 icons total.

Check Heroicons here.

Simple Icons

Thousands of free SVG icons for popular brands (and not so popular). If you need an icon for any brand or service, this is the place to go, they are really easy to use, they have packages for many different frameworks and languages and one distintive thing they do is that they give you the main brand color of the icon.

Pros:

Export to SVG/PDF.
Brand color of the icon.
Use by CDN, NPM package, or Framework/Language-specific packages.

Cons:

Only con is that it's so good that I wish that it had common icons so I wouldn't need to use anything else.

Check Simple Icons here.

Bootstrap Icons

Built by Twitter, one of the most extensive packs with over 1300 icons, they have a real personality that you might or might not like, but the collection is very complete.

Pros:

Export to SVG or use as a font.
Outline/Solid versions available.
NPM package available.
Main social icons available.

Cons:

No React or Vue library.
Some social icons missing.

Check Bootstrap Icons here.

Ionicons

Built by the team behind Ionic, it's an icon pack designed for mobile devices and apps, it's probably what you want to use in an Ionic application, but you can also export to SVG to use it in any project.

Pros:

Export to SVG.
Outline/Solid/Sharp versions available.
Main social icons available.

Cons:

Small collection.

Check Ionicons here.

Octicons

Built by GitHub, used to emphasize meaning, not replace entire words (no menu icon for example). The biggest advantage of this one is the many different packages that they offer for Ruby, Rails, Jekyll, JavaScript and React.

Pros:

Export to SVG/PDF.
Good documentation with UI examples on how to use.
Many different packages.

Cons:

Outline/Solid versions only for some icons.
Small collection.
No social icons.
Some common icons like hamburger menu are missing.

Check Octicons here.

Ant Design Icons

Built for React, no export to SVG available, the only way to use them is to install the package and import them into your project. It also offers a Two-Tone version of the icons, which is rare and it looks great.

Pros:

Outline/Filled/Two-tone versions available.
Really easy to add custom icons with their <Icon /> component.
Some attributes available like rotate/spin to customize your icons or create loading icons.

Cons:

Only available for React.
Small collection.

Check Ant Design Icons here.

Feather Icons

Built by Cole Bemis, my favorite part is that you can customize the size, the stroke width, and the color before exporting the icon as SVG.

Pros:

Easy customization.
Export to SVG.
Main social icons.

Cons:

Only 286 icons available.

Check Feather Icons here.

Material Design Icons

Also called Google Fonts Icons, it's built by Google. This one is really complete, with a lot of icons, you can customize the density, the size, and the color directly on the page. You can use it as an Icon font too, and if you are using Angular, it's the best choice by far. It also has easy instructions on how to use the icons in Android, iOS, and Flutter.

Pros:

Easy customization.
Export to SVG/PNG or use it as a font.
Big collection.
Outlined, Filled, Rounded, Sharp, and Two-tone versions available.

Cons:

No social icons.
Color customization is only black/white.

Check Material Design Icons here.

Entypo

Built by Daniel Bruce, more than 400 icons. More of an enterprise look than a modern look, but sometimes that's exactly what you need!

Pros:

Simple designs.
A lot of personality.
React library available.

Cons:

Not many icons.
It hasn't been updated in a bit, some social icons are outdated.
No button to export to SVG, you have to right-click and save it yourself.

Check Entypo here.

Fontisto

If you were looking for Font Awesome on this list, you are not going to find it, Fontisto is just a superior version. It's CSS-based, it offers an npm package to install it. It offers a lot of customization, you can add borders or background to your icons, animate them, flip them or rotate them. Super easy to create loading icons.

Pros:

CSS-based.
Easy customization.
Very good loading icons.
Main social icons available.

Cons:

No SVG export.
A little harder to implement than other solutions.

Check Fontisto here.

Final thoughts

You reached the end of the article! This article was inspired by a Twitter Thread I created some months ago, you can check it out here. I post daily content on Twitter so if you have enjoyed this, consider following me @nachoiacovino.

If you have any suggestions to improve this list, don't hesitate to contact me on Twitter, I'll be happy to improve this list over time.

See you on the next one!

This article was originally published on my personal blog, nachoiacovino.com

How to Setup Tailwind CSS in your Vanilla HTML Project

Nacho Iacovino ⚡ — Tue, 10 Aug 2021 11:45:55 +0000

Introduction

In this tutorial, I'm gonna explain how to setup Tailwind in the easiest way possible into your static HTML project.

Required tools

We are gonna need Node.js for this tutorial, if you don't have it, you can download it here.

You should get the "Recommended" version.

Installation

Create a folder for your project, open a terminal inside and do

npm init -y
npm install -D tailwindcss autoprefixer

With this, you initialize a new node project (the -y flag is to say yes to all prompts automatically) and install the required dependencies, in this case, Tailwind CSS and Autoprefixer, which is a dependency of Tailwind itself.

After that, we're gonna create a new folder called src and add a new file called tailwind.css inside of it.

Then, we'll add these three lines to the file.

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

Then, we need to add a couple of scripts to our package.json, dev and build.

{
  "name": "tailwind-css-in-vanilla-html",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "tailwindcss build -i ./src/tailwind.css -o ./public/tailwind.css",
    "build": "NODE_ENV=production npm run dev",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^10.3.1",
    "tailwindcss": "^2.2.7"
  }
}

Let's explain what's going on here, in the dev script, we're calling tailwindcss to build, and we're giving it an input file with -i, the .src/tailwind.css we just created in the previous step. Then, we're giving it an output file with -o, and that's gonna be .public/tailwind.css, which would be all Tailwind CSS classes after the build process.

In the build script, we're calling the dev but with NODE_ENV=production in front of it, we're gonna use this to create an optimized version of our Tailwind CSS file with only the classes we need for our project.

We can now run this command to generate the Tailwind CSS file in development mode, which will include all classes that Tailwind has available.

npm run dev

This also creates a public folder for us. Now let's create an index.html file inside that same folder.

Inside, add the following code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind CSS in Vanilla HTML!</title>
    <link rel="stylesheet" href="tailwind.css" />
  </head>
  <body>
    <div class="text-blue-600">hello!</div>
  </body>
</html>

This is a basic HTML structure but take important notice on line 8, where we're linking our tailwind.css file, it's important to realize this file is the one inside public, and not the one inside src.

So we can customize Tailwind a little bit better, we need to create a tailwind.config.js, we can do it automatically with this command:

npx tailwindcss init

And then, to know exactly which files Tailwind need to look at to create an optimized version of the output in the build process, we need to tell it where to look. Go to tailwind.config.js and modify the purge line.

module.exports = {
  purge: ['./public/**/*.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

And with this, you're set! You have successfully setup Tailwind CSS in your project and you're ready to create your amazing app.

If you have enjoyed this tutorial and you would like to learn more, I'm creating a Tailwind CSS course called Windcourse, in which I have a video of this exact process and I'll be also going deep into how to use Tailwind with React and Next.js.

If you are interested, you can pre-order it here.

Feel free to follow me on Twitter for daily tech-related content @nachoiacovino.

This article was originally published in my blog, nachoiacovino.com

Create a Next.js app with authentication in 5 minutes

Nacho Iacovino ⚡ — Thu, 10 Jun 2021 16:37:20 +0000

Hi! My name is Nacho Iacovino (@nachoiacovino), and I'm the Developer Advocate at Clerk. In this guide, I will teach you how to deploy Clerk using Vercel. This is the fastest and easiest way to set up a new application, complete with all the auth features provided by Clerk. In just a few minutes, you’ll create an app, deploy it, and set up your local environment.

If you prefer to follow this tutorial on video, you can watch it here.

Quick start

To get started, go to clerk.dev and sign into your account. If you don’t have an account yet, click “Get started for free” and create an account.

Once signed in, you’ll land your Applications page. Let's click Create application to create a new application.

When prompted, choose Quick start with Next.js and Vercel.

You will be directed to Vercel. Sign into your Vercel account, or create an account if you don’t have one. Choose a project name then click Continue to import the clerk-nextjs-starter repository.

Install Clerk

Next, let's install the Clerk integration to connect Clerk to Vercel. When prompted, click Install. A new window will pop up. Follow the instructions to create a new Clerk application to connect to this Vercel project. Choose an application name and a brand color for your app. By default, the Clerk application name is the same as the Vercel project.

Next, you will create a Git repository for your project. You can choose to use GitHub, GitLab, or BitBucket. For this tutorial, we'll use GitHub. Choose a repository name and click Continue.

Deploy the project

On the Import Project screen, Clerk sets the necessary environment variables for you, so you don't have to do anything. Simply click Deploy.

Vercel will create and deploy the new Git repository. This step may take a few minutes. After the process is complete, you should see a congratulatory screen.

You can visit your deployed application by clicking Visit. You can see mine here!

Clone the project locally

The next step is to clone the newly-deployed repository to your local machine. Go to your Git provider, open the repository, and find the URL to clone the repository.

Open your local machine’s command line interface and navigate to the folder where you want to install your project, then paste the following code snippet:

git clone <repo_url>

Next, open the project and run yarn install.

After the installation process completes, run yarn dev. This is where the magic happens!

Note: If you haven’t previously used Vercel on your local machine, you’ll have to sign in using a link sent to your email before running yarn dev.

You will be prompted to set up link this local project with the Vercel project. Respond Y to each prompt.

And voilà! Your app is now running on localhost:3000 —you can open it and see everything already working. Create an account on your app and take a minute to explore its features.

Modify settings

Now that your app is up and running, you can configure user management and theme settings provided by Clerk at https://dashboard.clerk.dev/ . Navigate to your application and choose which instance you would like to work on. Each Clerk project has 3 instances: Development, Staging, and Production. Instances are independent and do not share users or settings between them, so you can try different configurations before pushing them live.

Any changes made will be applied to your project without the need to modify code or re-deploy.

Try different configurations and find what works best for your application!

You can also modify theme settings to match the look and feel of Clerk components with the rest of your app.

And that's it! You just created a new application, deployed it with Vercel, and set up your local environment. No need to mess with complex backend configurations or worry about painful security customizations.

If you run into any problems, don't hesitate to contact me! I’m here to help. Check out my profile on Twitter and DM me at @nachoiacovino .

Any feedback is appreciated!

Build a Fullstack to-do app without any backend code

Nacho Iacovino ⚡ — Thu, 03 Jun 2021 12:06:55 +0000

Introduction

While traditional applications require both frontend and backend developers, new technologies like Clerk and Hasura are making it possible to build robust backends without writing backend code.

In this tutorial, we'll leverage these new technologies to build a simple to-do list application without writing any backend code. The primary tools we'll use are:

Hasura Cloud, for creating a frontend-accessible GraphQL API
Heroku Postgres, for storing to-do list data
Clerk, for authentication
Next.js, for frontend development
Tailwind CSS, for styling

Before we get started, you can see the final result here:

Let's begin!

Create a Hasura project

Start by signing up for Hasura Cloud.

If you already have a Hasura Cloud account, you will need to manually create a New Project. If this is your first time, a new project will automatically be created for you.

After your project initializes, you will see something like this (with a different name), go ahead and click the cog wheel to go to the project settings:

From here, you will need our project's GraphQL API URL. Please copy it, you will need it in a second:

Deploy the starter project

We prepared a starter project for this tutorial, the easiest way to get started is with the following "Deploy" button. The button will prompt you through cloning the repo, initializing Clerk, and deploying the app live on Vercel. The starter project uses Next.js, Tailwind CSS and Clerk. It's already setup with some styles using Next.js and Tailwind CSS but you don't have to be proficient in either of these to follow the tutorial.

This button will first prompt you to create a Vercel account if you do not have one. When signing up, Vercel may ask you to grant access to all of your repositories or just selected ones - feel free to choose either option.

The Next step will prompt you to integrate Clerk into your project, click Install and then Continue:

If you do not have a Clerk account already, you will be asked to create one now.

Next, you will be asked to select an application name and a brand color. Then, click "Create application":

After the window closes, click Continue and you will be prompted to pick a Git provider. In this tutorial, we will use GitHub:

This is where you will use Hasura Cloud's GraphQL API URL you copied earlier. Add it below and click Deploy.

While you wait for Vercel to deploy our project, you can move to GitHub, where Vercel has created a new repository on your behalf. Go ahead and clone it locally.

To clone, go to your desired folder, open a terminal and paste:

git clone <repository-url>

Then, go inside the project folder and run:

yarn
// or
npm install

This will install the necessary dependencies.

After this, go ahead and launch your project:

yarn dev
// or
npm run dev

If you haven’t previously used Vercel on your computer, you will be asked to sign in when you launch the project.

You will be prompted to set up link this local project with the Vercel project. Respond Y to each prompt.

Then, you will see your project running on http://localhost:3000.

File structure

├── components
│   ├── AddTodo.js (Form to Add todo)
│   ├── Header.js (Header of our app with UserButton)
│   ├── Layout.js
│   ├── SingleTodo.js (One todo with toggle/delete methods)
│   └── TodoList.js (List to render all todos with get method)
├── lib
│   └── apolloClient.js (Apollo configuration wrapper)
├── pages
│   ├── sign-in (Clerk-powered sign in page)
│   │   └── [[...index]].js
│   ├── sign-up (Clerk-powered sign up page)
│   │   └── [[...index]].js
│   ├── user (Clerk-powered user profile page)
│   │   └── [[...index]].js
│   ├── _app.js (where Clerk is configured)
│   ├── index.js (first page you see)
│   └── todos.js (page we will work on)
├── public (images)
├── styles (all css styles for our app)
│   ├── globals.css
│   ├── Header.module.css
│   └── Home.module.css
├── .env.local (environmental variables pulled from Vercel)
├── postcss.config.js (postcss config, needed for Tailwind)
├── package.json (where your packages live)
├── README.md
├── tailwind.config.js
└── yarn.lock

Activate Hasura integration

Hasura is one of the integrations that Clerk offers, with many more coming the future. To use it, you need to enable it. Go to your Clerk Dashboard, click on your application -> Development -> Integrations and activate Hasura.

Before leaving the dashboard, go to Home and copy your Frontend API, you'll need to to create the link between Clerk and Hasura.

With your project already running, it's time to go back to Hasura and start setting up the database.

Set up Hasura Cloud

Go back to Hasura, click the cog wheel, click "Env vars" and then "New Env Var".

Pick HASURA_GRAPHQL_JWT_SECRET from the list and then add this, replacing %FRONTEND_API% with the Frontend API you copied from Clerk.

{"jwk_url":"https://%FRONTEND_API%/v1/.well-known/jwks.json"}

Click "Add" and then, click "Launch Console".

This will bring us to GraphiQL. GraphiQL is the GraphQL integrated development environment (IDE). It's a powerful tool you can use to interact with the API.

After GraphiQL opens, the first thing you need to do is to create a table. Start by clicking Data on the top navbar:

For this tutorial, we recommend creating a Heroku database for free:

If you don't have a Heroku account, now is the time to create one.

Follow the steps and the database will automatically be created and linked for you.

After the database is created, click "Public" and then "Create Table".

Fill the table like this and "Add Table".

This not only creates our table, but also triggers Hasura to create a GraphQL backend.

After creating the table, the next step is to restrict who can access the data. By default, Hasura is configured for all fields to be public. You need to set permissions and fix that.

Set table permissions

You need to create a new role called "user" and edit each of the four possible permissions they have. If you are familiar with CRUD (Create, Read, Update, Delete), this is basically the same thing.

Insert (Create)

For Insert permissions, choose that the user can only set the title of a to-do when a new one is created. There others all have default values:

id is autogenerated (set during table creation)
completed starts as false
created_at is autogenerated to now() (set during table creation)
user_id is set to the requesting user's ID

Since the user_id is dependent on the particular request, it must be configured as a "Column preset". Set it to X-Hasura-User-Id from the "session variable".

When you use Clerk's Hasura integration, X-Hasura-User-ID is automatically set in the session variable that gets sent to Hasura. The code to retrieve the session variable and send it to Hasura is in lib/apolloClient.js.

Select (Read)

For Select permissions, you want to configure Hasura so users can only read their own to-dos. You can verify this by "checking" if the to-do's user_id is the same as the X-Hasura-User-Id you receive from the session variable.

If the user ID's match, you can grant read permissions to every column. The exact configuration required is below:

Update

For Update permissions, you want to include the same "check" as Select, to ensure that a user can only update their own to-dos.

However, if the check is valid, you don't want the user to have permission to update every column. Instead, only grant permission to update the completed column.

Delete

For Delete permissions, you want to include the same "check" as Select, to ensure that a user can only delete their own to-dos.

That's all of the permissions we need to set! Now, let's work on the frontend.

Connect Hasura to the Frontend

Go to http://localhost:3000 and create an account on your app. Then, click "Start saving your todos" and you will see this:

These is sample data and is still static. In the next steps of the tutorial, we will connect this list to Hasura and your database, so users can create and manage their own to-dos.

Create a to-do

The first step is giving users the ability to create a to-do. We will do this from components/AddTodo.js.

If you look at the onSubmit function, you will see that nothing will currently happen when the user clicks add. You must create a GraphQL "mutation" to update the database when add is clicked.

Replace the top of your file (everything above the return statement) with this code:

import { gql, useMutation } from '@apollo/client'
import { useState } from 'react'

const ADD_TODO = gql`
  mutation AddTodo($title: String!) {
    insert_todos_one(object: { title: $title }) {
      id
      title
    }
  }
`;

const AddTodo = () => {
  const [title, setTitle] = useState("");
  const [addTodo] = useMutation(ADD_TODO, {
    onCompleted: () => setTitle(""),
  });

  const onSubmit = (e) => {
    e.preventDefault();
    addTodo({
      variables: { title },
    });
  };

  return (...

This mutation accepts a title and passes it to the insert_todos_one method that Hasura has created for us.

Now, let's go back to our frontend and try adding a todo.

You'll see notice that nothing happens on the frontend, and that's expected because we're still reading static to-dos. But, let's check the database to see if the mutation succeeded. Go back to the Hasura Cloud Console, copy and paste the following query and click the play button:

query GetTodos {
  todos {
    id
    title
    user_id
    created_at
    completed
  }
}

You should see your todo was created successfully:

Fetch to-dos

Now, we will update the frontend to read the user's to-dos from Hasura. You can do this from components/TodoList.js.

The file starts by showing static data. Update the component to instead run a GraphQL "query":

import { gql, useQuery } from "@apollo/client";

import SingleTodo from "../components/SingleTodo";

export const GET_TODOS = gql`
  query GetTodos {
    todos(order_by: { created_at: desc }) {
      id
      title
      completed
    }
  }
`;

const TodoList = () => {
  const { loading, error, data } = useQuery(GET_TODOS);

  if (loading) return "Loading...";

  if (error) return <>{console.log(error)}</>;

  return (
    <div className='overflow-hidden bg-white rounded-md shadow'>
      <ul className='divide-y divide-gray-200'>
        {data?.todos.map((todo) => (
          <SingleTodo key={todo.id} todo={todo} />
        ))}
      </ul>
    </div>
  );
};

export default TodoList;

First, we created a query that gets all to-dos (remember, the user can only see the ones attached to their own user_id). We set the query to return id, title, and completed. We order the to-dos by created_at descending, so the newest are first in the list.

useQuery returns an object so you can render different things depending on if the data is loading, if there's an error, or if the data has been retrieved.

We've configured an early return while the data is loading or if there's an error, then render the list if that is available. After saving, you should see something like this:

Let's try adding a new todo.

You should see that the form clears after clicking "Add", but the list below doesn't automatically update. However, if you manually refresh the page, you will see new to-do.

That's not the best experience and we will fix this later by implementing a cache, so your can keep your database and your frontend in sync.

Before that, let's implement toggle and delete mutations.

Delete Todo

Open components/SingleTodo.js, which is the component the renders for each individual to-do.

Update the code to add a delete mutation when the delete button is clicked:

import { gql, useMutation } from '@apollo/client'
import { GET_TODOS } from './TodoList'

const DELETE_TODO = gql`
  mutation DeleteTodo($id: uuid!) {
    delete_todos_by_pk(id: $id) {
      id
      title
    }
  }
`;

const SingleTodo = ({ todo }) => {
  const [deleteTodoMutation] = useMutation(DELETE_TODO);

  const deleteTodo = () => {
    deleteTodoMutation({
      variables: { id: todo.id },
    });
    }

   // rest of the code

Now, try deleting a todo. It works, but you get same experience as inserting. You need to refresh the page to see it.

We will fix this shortly, but first let's add toggle functionality.

Toggle Todo

Still inside components/SingleTodo.js, now you can add a new toggle mutation. Here is the updated component with both delete and toggle functionality:

import { gql, useMutation } from "@apollo/client";
import { TrashIcon } from "@heroicons/react/solid";
import { GET_TODOS } from "./TodoList";

const DELETE_TODO = gql`
  mutation DeleteTodo($id: uuid!) {
    delete_todos_by_pk(id: $id) {
      id
      title
    }
  }
`;

const TOGGLE_TODO = gql`
  mutation ToggleTodo($id: uuid!, $completed: Boolean!) {
    update_todos_by_pk(
      pk_columns: { id: $id }
      _set: { completed: $completed }
    ) {
      id
      completed
    }
  }
`;

const SingleTodo = ({ todo }) => {
  const [deleteTodoMutation] = useMutation(DELETE_TODO);
  const [toggleTodoMutation] = useMutation(TOGGLE_TODO);

  const deleteTodo = () => {
    deleteTodoMutation({
      variables: { id: todo.id },
    });
  };
  const toggleTodo = () => {
    toggleTodoMutation({
      variables: { id: todo.id, completed: !todo.completed },
    });
  };

  return (
    <li key={todo.id} className='flex justify-between px-6 py-4'>
      <div>
        <input
          id={todo.id}
          name='completed'
          type='checkbox'
          checked={todo.completed}
          onChange={toggleTodo}
          className='w-4 h-4 mr-3 text-blue-600 border-gray-300 rounded focus:ring-blue-500'
        />
        <label
          htmlFor={todo.id}
          className={todo.completed ? "line-through text-gray-400" : ""}
        >
          {todo.title}
        </label>
      </div>
      <TrashIcon
        className='w-5 h-5 text-gray-500 cursor-pointer'
        onClick={deleteTodo}
      />
    </li>
  );
};

export default SingleTodo;

Now, every CRUD operation works. But you need still need to refresh the page to see changes. Let's fix that.

Notice we are importing GET_TODOS, we'll need it for the next step.

Using Apollo Cache

The GraphQL library this tutorial uses, Apollo, implements a dynamic, local cache. Instead of reloading the full list of updates after each mutation, you can run the mutations against your local cache. Then, the to-do list on your frontend will automatically be updated.

One great feature of this cache is called the optimisticResponse. With this, you can assume that your GraphQL mutations will succeed and reflect the change in your frontend right away, instead of waiting for the success message from Hasura. The optimisticResponse is preferred for your to-do app since you're not anticipating any errors, and it results in a faster-feeling user experience.

To use the cache, you need to add the cache and optimisticResponse parameters to your mutation functions.

In your deleteTodo function:

const deleteTodo = () => {
  deleteTodoMutation({
    variables: { id: todo.id },
    optimisticResponse: true,
    update: (cache) => {
      const data = cache.readQuery({ query: GET_TODOS });
      const todos = data.todos.filter(({ id }) => id !== todo.id);
      cache.writeQuery({
        query: GET_TODOS,
        data: { todos },
      });
    },
  });
};

In your toggleTodo function:

const toggleTodo = () => {
  toggleTodoMutation({
    variables: { id: todo.id, completed: !todo.completed },
    optimisticResponse: true,
    update: (cache) => {
      const data = cache.readQuery({ query: GET_TODOS });
      const todos = data.todos.map((t) => {
        if (t.id === todo.id) {
          return { ...t, completed: !todo.completed };
        }
        return t;
      });

      cache.writeQuery({
        query: GET_TODOS,
        data: { todos },
      });
    },
  });
};

Finally, we must leverage the cache in components/AddTodo.js:

At the top of the file, add:

import { GET_TODOS } from "./TodoList";

And update your onSubmit as follows:

const onSubmit = (e) => {
  e.preventDefault();
  addTodo({
    variables: { title },
    update: (cache, { data }) => {
      const existingTodos = cache.readQuery({
        query: GET_TODOS,
      });
      cache.writeQuery({
        query: GET_TODOS,
        data: { todos: [data.insert_todos_one, ...existingTodos.todos] },
      });
    },
  });
};

Final thoughts

That's it! You now have a complete to-do list using Clerk, Hasura, and Next.js - and you didn't write any backend code. It's powerful, easy to configure, and easy to scale.

If you have enjoyed this tutorial or have questions or concerns, feel free to contact me at @nachoiacovino.