DEV Community: hexrcs

🔑 Passwordless Authentication with Next.js, Prisma, and next-auth

hexrcs — Sat, 26 Sep 2020 13:51:51 +0000

Passwordless Authentication with Next.js, Prisma, and next-auth

In this post, you'll learn how to add passwordless authentication to your Next.js app using Prisma and next-auth. By the end of this tutorial, your users will be able to log in to your app with either their GitHub account or a Slack-styled magic link sent right to their Email inbox.

If you want to follow along, clone this repo and switch to the start-here branch! 😃

Check out the slick auth flow!

If you want to see the live coding version of this tutorial, check out the recording below! 👇

Step 0: Dependencies and database setup

Before we start, let's install Prisma and next-auth into the Next.js project.



npm i next-auth

npm i -D @prisma/cli @types/next-auth

I'm using TypeScript in this tutorial, so I'll also install the type definitions for next-auth

You will also need a PostgreSQL database to store all the user data and active tokens.

If you don't have access to a database yet, Heroku allows us to host PostgreSQL databases for free, super handy! You can check out this post by Nikolas Burk to see how to set it up.

If you are a Docker fan and would rather keep everything during development local, you can also check out this video I did on how to do this with Docker Compose.

Before moving on to the next step, make sure you have a PostgreSQL URI in this format:



postgresql://<USER>:<PASSWORD>@<HOST_NAME>:<PORT>/<DB_NAME>

Step 1: Initialize Prisma

Awesome! Let's generate a starter Prisma schema and a @prisma/client module into the project.



npx prisma init

Notice that a new directory prisma is created under your project. This is where all the database magic happens. 🧙‍♂️

Now, replace the dummy database URI in /prisma/.env with your own.

Project structure after running npx prisma init

Step 2: Define database schema for authentication

next-auth requires us to have specific tables in our database for it to work seamlessly. In our project, the schema file is located at /prisma/schema.prisma.

Let's use the default schema for now, but know that you can always extend or customize the data models yourself.

Note: If you have an existing database, after replacing the dummy database URI, you can run npx prisma introspect to generate the schema.prisma for your database and work from there. Then, you should add the following data models to the generated schema.prisma file.



datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

generator client {
  provider = "prisma-client-js"
}

model Account {
  id                 Int       @default(autoincrement()) @id
  compoundId         String    @unique @map(name: "compound_id")
  userId             Int       @map(name: "user_id")
  providerType       String    @map(name: "provider_type")
  providerId         String    @map(name: "provider_id")
  providerAccountId  String    @map(name: "provider_account_id")
  refreshToken       String?   @map(name: "refresh_token")
  accessToken        String?   @map(name: "access_token")
  accessTokenExpires DateTime? @map(name: "access_token_expires")
  createdAt          DateTime  @default(now()) @map(name: "created_at")
  updatedAt          DateTime  @default(now()) @map(name: "updated_at")

  @@index([providerAccountId], name: "providerAccountId")
  @@index([providerId], name: "providerId")
  @@index([userId], name: "userId")

  @@map(name: "accounts")
}

model Session {
  id           Int      @default(autoincrement()) @id
  userId       Int      @map(name: "user_id")
  expires      DateTime
  sessionToken String   @unique @map(name: "session_token")
  accessToken  String   @unique @map(name: "access_token")
  createdAt    DateTime @default(now()) @map(name: "created_at")
  updatedAt    DateTime @default(now()) @map(name: "updated_at")

  @@map(name: "sessions")
}

model User {
  id            Int       @default(autoincrement()) @id
  name          String?
  email         String?   @unique
  emailVerified DateTime? @map(name: "email_verified")
  image         String?
  createdAt     DateTime  @default(now()) @map(name: "created_at")
  updatedAt     DateTime  @default(now()) @map(name: "updated_at")

  @@map(name: "users")
}

model VerificationRequest {
  id         Int      @default(autoincrement()) @id
  identifier String
  token      String   @unique
  expires    DateTime
  createdAt  DateTime  @default(now()) @map(name: "created_at")
  updatedAt  DateTime  @default(now()) @map(name: "updated_at")

  @@map(name: "verification_requests")
}

Let's break it down a bit:

In the schema file, we defined 4 data models - Account, Session, User and VerificationRequest. The User and Account models are for storing user information, the Session model is for managing active sessions of the user, and VerificationRequest is for storing valid tokens that are generated for magic link Email sign in.

The @map attribute is for mapping the Prisma field name to a database column name, such as compoundId to compound_id, which is what next-auth needs to have it working.

snake_case is often used as a naming convention in database environments, but camelCase is how we usually name things in JavaScript and TypeScript. It's perfectly fine to name Prisma fields in snake_case, but it wouldn't look so nice. :)

Next, let's run these commands to populate the database with the tables we need.



npx prisma migrate save --experimental
npx prisma migrate up --experimental

Then, run this command to generate a Prisma client tailored to the database schema.



npx prisma generate

Now, if you open up Prisma Studio with the following command, you will be able to inspect all the tables that we just created in the database.



npx prisma studio

Prisma Studio model selection

Step 3: Configure `next-auth`

Before we start configuring next-auth, let's create another .env file in the project root to store secrets that will be used by next-auth (or rename the .env.example file from the template, if you cloned the tutorial repo).



SECRET=RAMDOM_STRING
SMTP_HOST=YOUR_SMTP_HOST
SMTP_PORT=YOUR_SMTP_PORT
SMTP_USER=YOUR_SMTP_USERNAME
SMTP_PASSWORD=YOUR_SMTP_PASSWORD
SMTP_FROM=YOUR_REPLY_TO_EMAIL_ADDRESS
GITHUB_SECRET=YOUR_GITHUB_API_CLIENT_SECRET
GITHUB_ID=YOUR_GITHUB_API_CLIENT_ID
DATABASE_URL=postgresql://johndoe:randompassword@localhost:5432/mydb?schema=public

Now, let's create a new file at /pages/api/auth/[...nextauth].ts as a "catch-all" Next.js API route for all the requests sent to your-app-url-root/api/auth (like localhost:3000/api/auth).

Inside the file, first import the essential modules from next-auth, and define an API handler which passes the request to the NextAuth function, which sends back a response that can either be an entirely generated login form page or a callback redirect. To connect next-auth to the database with Prisma, you will also need to import PrismaClient and initialize a Prisma Client instance.



import { NextApiHandler } from "next";
import NextAuth from "next-auth";
import Providers from "next-auth/providers";
import Adapters from "next-auth/adapters";

import { PrismaClient } from "@prisma/client";

const prisma = new PrismaClient();

// we will define `options` up next
const authHandler: NextApiHandler = (req, res) => NextAuth(req, res, options);
export default authHandler;

Now let's create the options object. Here, you can choose from a wide variety of builtin authentication providers. In this tutorial, we will use GitHub OAuth and "magic links" Email to authenticate the visitors.

Step 3.1: Set up GitHub OAuth

For the builtin OAuth providers like GitHub, you will need a clientId and a clientSecret, both of which can be obtained by registering a new OAuth app at Github.

First, log into your GitHub account, go to Settings, then navigate to Developer Settings, then switch to OAuth Apps.

GitHub OAuth apps

Clicking on the Register a new application button will redirect you to a registration form to fill out some information for your app. The Authorization callback URL should be the Next.js /api/auth route that we defined earlier (http://localhost:3000/api/auth).

An important thing to note here is that the Authorization callback URL field only supports 1 URL, unlike Auth0, which allows you to add additional callback URLs separated with a comma. This means if you want to deploy your app later with a production URL, you will need to set up a new GitHub OAuth app.

Registering an OAuth app

Click on the Register Application button, and then you will be able to find your newly generated Client ID and Client Secret. Copy this info into your .env file in the root directory.

Obtaining OAuth Client ID and Client Secret

Now, let's go back to /api/auth/[...nextauth].ts and create a new object called options, and source the GitHub OAuth credentials like below.



const options = {
  providers: [
    Providers.GitHub({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
  ],
};

OAuth providers typically work the same way, so if your choice is supported by next-auth, you can configure it the same way as we did with GitHub here. If there is no builtin support, you can still define a custom provider.

Step 3.2: Set up passwordless Email authentication

To allow users to authenticate with magic link Emails, you will need to have access to an SMTP server. These kinds of Emails are considered transactional Emails. If you don't have your own SMTP server or your mail provider has strict restrictions regarding outgoing Emails, I would recommend using SendGrid, or alternatively Amazon SES, Mailgun and others.

When you have your SMTP credentials ready, you can put that information into the .env file, add a Providers.Email({}) to the list of providers, and source the environment variables like below.



const options = {
  providers: [
    // Providers.GitHub ...
    Providers.Email({
      server: {
        host: process.env.SMTP_HOST,
        port: Number(process.env.SMTP_PORT),
        auth: {
          user: process.env.SMTP_USER,
          pass: process.env.SMTP_PASSWORD,
        },
      },
      from: process.env.SMTP_FROM, // The "from" address that you want to use
    }),
  ],
};

Step 3.3: Link up Prisma

The final step for setting up next-auth is to tell it to use Prisma to talk to the database. For this, we will use the Prisma adapter and add it to the options object. We will also need a secret key to sign and encrypt tokens and cookies for next-auth to work securely - this secret should also be sourced from environment variables.



const options = {
  providers: [
    // ...
  ],
  adapter: Adapters.Prisma.Adapter({ prisma }),
  secret: process.env.SECRET,
};

To summarize, your pages/api/auth/[...nextauth].ts should look like the following:



import { NextApiHandler } from "next";
import NextAuth from "next-auth";
import Providers from "next-auth/providers";
import Adapters from "next-auth/adapters";

import { PrismaClient } from "@prisma/client";

const prisma = new PrismaClient();

const authHandler: NextApiHandler = (req, res) => NextAuth(req, res, options);
export default authHandler;

const options = {
  providers: [
    Providers.GitHub({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
    Providers.Email({
      server: {
        host: process.env.SMTP_HOST,
        port: Number(process.env.SMTP_PORT),
        auth: {
          user: process.env.SMTP_USER,
          pass: process.env.SMTP_PASSWORD,
        },
      },
      from: process.env.SMTP_FROM,
    }),
  ],
  adapter: Adapters.Prisma.Adapter({
    prisma,
  }),

  secret: process.env.SECRET,
};

Step 4: Implement authentication on the frontend

In the application, you can use next-auth to check if a visitor has cookies/tokens corresponding to a valid session. If no session can be found, then it means the user is not logged in.

With next-auth, you have 2 options for checking the sessions - it can be done inside a React component using the useSession() hook, or on the backend (getServerSideProps or in API routes) with the helper function getSession().

Let's have a look at how it works.

Step 4.1: Checking user sessions with the `useSession()` hook

In order to use the hook, you'll need to wrap the component inside a next-auth provider. For the authentication flow to work anywhere in your entire Next.js app, create a new file called /pages/_app.tsx.



import { Provider } from "next-auth/client";
import { AppProps } from "next/app";

const App = ({ Component, pageProps }: AppProps) => {
  return (
    <Provider session={pageProps.session}>
      <Component {...pageProps} />
    </Provider>
  );
};

export default App;

Now, you can go to /pages/index.tsx, and import the useSession hook from the next-auth/client module. You will also need the signIn and signOutfunctions to implement the authentication interaction. ThesignIn function will redirect users to a login form, which is automatically generated by next-auth.



import { signIn, signOut, useSession } from "next-auth/client";

The useSession() hook returns an array with the first element being the user session, and the second one a boolean indicating the loading status.



// ...
const IndexPage = () => {
  const [session, loading] = useSession();

  if (loading) {
    return <div>Loading...</div>;
  }
};

If the session object is null, it means the user is not logged in. Additionally, we can obtain the user information from session.user.



// ...
if (session) {
  return (
    <div>
      Hello, {session.user.email ?? session.user.name} <br />
      <button onClick={() => signOut()}>Sign out</button>
    </div>
  );
} else {
  return (
    <div>
      You are not logged in! <br />
      <button onClick={() => signIn()}>Sign in</button>
    </div>
  );
}

The finished /pages/index.tsx file should look like the following.



import { signIn, signOut, useSession } from "next-auth/client";

const IndexPage = () => {
  const [session, loading] = useSession();

  if (loading) {
    return <div>Loading...</div>;
  }

  if (session) {
    return (
      <div>
        Hello, {session.user.email ?? session.user.name} <br />
        <button onClick={() => signOut()}>Sign out</button>
      </div>
    );
  } else {
    return (
      <div>
        You are not logged in! <br />
        <button onClick={() => signIn()}>Sign in</button>
      </div>
    );
  }
};

export default IndexPage;

Now, you can spin up the Next.js dev server with npm run dev, and play with the authentication flow!

Step 4.2: Checking user sessions with `getSession()` on the backend

To get user sessions from the backend code, inside either getServerSideProps() or an API request handler, you will need to use the getSession() async function.

Let's create a new /pages/api/secret.ts file for now like below. The same principles from the frontend apply here - if the user doesn't have a valid session, then it means they are not logged in, in which case we will return a message with a 403 status code.



import { NextApiHandler } from "next";
import { getSession } from "next-auth/client";

const secretHandler: NextApiHandler = async (req, res) => {
  const session = await getSession({ req });
  if (session) {
    res.end(
      `Welcome to the VIP club, ${session.user.name || session.user.email}!`
    );
  } else {
    res.statusCode = 403;
    res.end("Hold on, you're not allowed in here!");
  }
};

export default secretHandler;

Go visit localhost:3000/api/secret without logging in, and you will see something like in the following image.

403 error if the user is not logged in

Conclusion

And that's it, authentication is so much easier with next-auth!

I hope you have enjoyed this tutorial and have learned something useful! You can always find the starter code and the completed project in this GitHub repo.

Also, check out the Awesome Prisma list for more tutorials and starter projects in the Prisma ecosystem!

Complete Introduction to Fullstack, Type-Safe GraphQL (feat. Next.js, Nexus, Prisma)

hexrcs — Tue, 09 Jun 2020 12:51:14 +0000

Complete Introduction to Fullstack, Type-Safe GraphQL (feat. Next.js, Nexus, Prisma)

In this post, you'll learn how to build––from scratch––an entirely type-safe, fullstack web app, using GraphQL with a database attached!

To follow along with the source code, clone this repo.

🗓 Update 19/11/2020: The tutorial has been updated to use Nexus Schema as the Nexus Framework has been discontinued

Our tech stack

First, let's have a look at our tools of choice:

TypeScript - the programming language for both backend and frontend
React and Next.js - as the frontend framework and middle-end
Urql GraphQL client - the GraphQL client on the frontend
PostgreSQL - the database for the app
Apollo Server - the server framework we'll use to serve the GraphQL API
Nexus Schema - a library for building code-first GraphQL APIs
Prisma Client and prisma db push - a toolkit to change the database schema, access, and query the database (Note: prisma db push is still in a preview state at the moment)

Let's get started! 🚀

Step 0: Install VS Code extensions

Before we start, make sure that you have installed these VS Code extensions for syntax highlighting and auto-formatting - Prisma and GraphQL.

Prisma Extension for VS Code

GraphQL Extension for VS Code

Step 1: Spin up a PostgreSQL database

The first thing you'll need is a PostgreSQL database instance to interact with during development.

There are many options for this, but Heroku allows us to host PostgreSQL databases for free with minimal setup required. Check out this post by Nikolas Burk guiding you through the process!

If you have Docker installed and would rather keep your development database local, you can also check out this video I did on how to do this with Docker Compose.

You will be able to get a PostgreSQL URI in this format:

postgresql://<USER>:<PASSWORD>@<HOST_NAME>:<PORT>/<DB_NAME>

Note: if you are using Heroku, you'll get a URI with postgres instead of postgresql as the protocol. Both formats should work but we'd prefer to use postgresql.

When everything is set up properly, you're good to move on to the next step! 😃

Step 2: Create a Next.js project

Now, create a Next.js project with create-next-app and enter the directory:

npx create-next-app my-awesome-app --use-npm -e with-typescript
cd my-awesome-app

Git should be automatically initialized by create-next-app, and your project structure should look like this:

Project structure bootstrapped by create-next-app

The create-next-app might not have the latest TypeScript package pre-installed. If you want to use the latest TypeScript features, run npm install -D typescript@latest after the project is bootstrapped.

Step 3: Install Nexus with Prisma

With the Next.js project ready, open a terminal window at the root of the application and install both Nexus Schema and Prisma.

For Prisma, we need @prisma/client, @nexus/schema and nexus-plugin-prisma as a regular dependencies and @prisma/cli as a dev dependency.

Regular dependencies:

npm i @prisma/client @nexus/schema nexus-plugin-prisma

Dev dependencies:

npm i @prisma/cli

Once the dependencies are installed, initialize Prisma in the project.

npx prisma init

This command will create a prisma directory. If you have a look inside, you'll see a .env file and a schema.prisma file. The schema.prisma file will hold the database model and the .env file will hold the database connection string.

Because the database connection string contains sensitive information, it's a good practice to never commit this .env file with Git, so make sure it's also added to the .gitignore file.

Adjust the schema.prisma file to include a User model:

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

generator client {
  provider = "prisma-client-js"
}

model User {
  id   String @default(cuid()) @id
  name String
}

The schema file tells Prisma to use PostgreSQL as the database type, and the database connection URL is defined as an environment variable. It also defines a simple User data model with an id and a name field.

Your project should currently look like this:

Project structure after creating the prisma directory

Step 4: Wire up Nexus Schema with Next.js

Nexus Schema is a library that allows us to build code-first GraphQL APIs. It's our responsibility to bring along a server to serve that API. For our purposes, we'll use Apollo Server.

There are several varieties of Apollo Server that are used for various purposes. For our project, we'll want apollo-server-mirco as it's well-suited to serverless deployments.

npm install apollo-server-micro

To create a GraphQL endpoint, create a new file in your project at /pages/api/graphql.ts. Thanks to the powerful API routes in Next.js, the GraphQL server will be accessible at http://our-app-domain/api/graphql when the Next.js server is started.

In the /pages/api/graphql.ts file, write the following boilerplate code:

import { ApolloServer } from 'apollo-server-micro';

// we'll create these in a second!
import { schema } from '../../graphql/schema';
import { createContext } from './../../graphql/context';

const apolloServer = new ApolloServer({
  context: createContext,
  schema,
  tracing: process.env.NODE_ENV === 'development'
});

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

export default apolloServer.createHandler({
  path: '/api/graphql'
});

Since everything inside the /pages/api/ directory is considered as an API route, it's a good idea to implement the actual schema and resolvers outside this directory.

Now, create a new directory in the project root called /graphql/ and two files within: /graphql/schema.ts and /graphql/context.ts.

Inside /graphql/schema.ts, start by using the makeSchema function to construct a GraphQL schema with Nexus. We'll also want to use nexus-plugin-prisma with the CRUD feature enabled:

// graphql/schema.ts

import { objectType, queryType, mutationType, makeSchema } from '@nexus/schema';
import { nexusPrisma } from 'nexus-plugin-prisma';
import path from 'path';

const Query = queryType({
  definition(t) {
    t.string('hello', { resolve: () => 'hello world' });
  }
});

export const schema = makeSchema({
  types: [Query],
  plugins: [nexusPrisma({ experimentalCRUD: true })],
  outputs: {
    typegen: path.join(process.cwd(), 'generated', 'nexus-typegen.ts'),
    schema: path.join(process.cwd(), 'generated', 'schema.graphql')
  },
  typegenAutoConfig: {
    contextType: 'Context.Context',
    sources: [
      {
        source: '@prisma/client',
        alias: 'prisma'
      },
      {
        source: path.join(process.cwd(), 'graphql', 'context.ts'),
        alias: 'Context'
      }
    ]
  }
});

The call to makeSchema includes a property called plugins. This is an array of any plugins we want to use with Nexus Schema and, in our case, we want to use nexus-plugin-prisma. The configuration we have here tells the plugin to use the CRUD feature which is what allows us to have automatically-generated CRUD resolvers for our API. You can read more on the CRUD feature provided by Nexus Schema.

Next, initialize the PrismaClient within /graphql/context.ts and export a function to create the context in Apollo Server.

// graphql/context.ts

import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

export interface Context {
  prisma: PrismaClient;
}

export function createContext(): Context {
  return { prisma };
}

The file structure should now look something like this:

my-awesome-app/
├─ components/
├─ graphql/
│  ├─ context.ts
│  ├─ schema.ts
├─ interfaces/
├─ pages/
├─ prisma/
│  ├─ .env
│  ├─ schema.prisma
├─ utils/
├─ next-env.d.ts
├─ package-lock.json
├─ package.json
├─ tsconfig.json

With these files in place, run the application:

npx next dev

If you go to http://localhost:3000/api/graphql, you'll see the GraphQL Playground up and running (with our "hello world" schema)! 😃

GraphQL Playground with a hello world schema

Step 5: Implement your first GraphQL API

With the GraphQL server running in the background and the GraphQL Playground ready at http://localhost:3000/api/graphql, it's time to start implementing the API!

Step 5.1: Define an Object type

Start by defining a User object type to reflect the database schema. Once defined, add it to the types array in makeSchema.

// graphql/schema.ts

import { objectType, queryType, makeSchema } from '@nexus/schema';

const User = objectType({
  name: 'User',
  definition(t) {
    t.model.id();
    t.model.name();
  }
});

// ...

export const schema = makeSchema({
  types: [User, Query]
  // ...
});

If you are typing the code above instead of copy n' pasting, you will notice that VS Code will autocomplete the fields (id, name) that are available on the User data model defined earlier in /prisma/schema.prisma.

Tip: You can also always invoke intellisense with CTRL + SPACE, in case it doesn't automatically show up sometimes, super helpful!

Now, go back to the GraphQL Playground and toggle the Schema side panel - you will see a GraphQL object type User is generated from the code you just wrote in the /graphql/schema.ts file.

type User {
  id: String!
  name: String!
}

Step 5.2: Define the Query type

For the root Query type, Nexus provides a queryType function.

To query a list of existing users in the database, you can write a resolver for allUsers field as follows:

const Query = queryType({
  definition(t) {
    t.list.field('allUsers', {
      type: 'User',
      resolve(_parent, _args, ctx) {
        return ctx.prisma.user.findMany({});
      }
    });
  }
});

You can do whatever you want in the resolve function. The Prisma client for your database can be directly accessed as the db property on the ctx object. You can read more about the API of Prisma Client in its official documentation.

Tip: You can always use the intellisense feature in VS Code to explore the APIs of Nexus and Prisma Client!

In addition to manually writing resolvers, the Nexus-Prisma plugin conveniently exposes basic "read" operations on the database on t.crud. The following code will let you find a User (or a list of Users) from the database directly.

const Query = queryType({
  definition(t) {
    t.list.field('allUsers', {
      type: 'User',
      resolve(_parent, _args, ctx) {
        return ctx.prisma.user.findMany({});
      }
    });
    t.crud.user();
    t.crud.users();
  }
});

The code above will generate a GraphQL root Query type:

type Query {
  allUsers: [User!]
  user(where: UserWhereUniqueInput!): User
  users(
    skip: Int
    after: UserWhereUniqueInput
    before: UserWhereUniqueInput
    first: Int
    last: Int
  ): [User!]!
}

input UserWhereUniqueInput {
  id: String
}

Notice that all the related Input types are also generated for us for free! 💯

Query type is generated by Nexus

Step 5.3: Define the Mutation type

Similar to the Query type, a Mutation type can be defined with the mutationType function.

😈 Let's have some fun and create a bigRedButton mutation to destroy all user data in the database.

We also have access to the t.crud helper here, which exposes the basic "create", "update" and "delete" operations on the database. We then must add Mutation to the types array in makeSchema.

import { objectType, queryType, mutationType, makeSchema } from '@nexus/schema';

// ...

const Mutation = mutationType({
  definition(t) {
    t.field('bigRedButton', {
      type: 'String',
      async resolve(_parent, _args, ctx) {
        const { count } = await ctx.prisma.user.deleteMany({});
        return `${count} user(s) destroyed. Thanos will be proud.`;
      }
    });

    t.crud.createOneUser();
    t.crud.deleteOneUser();
    t.crud.deleteManyUser();
    t.crud.updateOneUser();
    t.crud.updateManyUser();
  }
});

// ...

export const schema = makeSchema({
  types: [User, Query, Mutation]
  // ...
});

This will generate a GraphQL schema like below:

type Mutation {
  bigRedButton: String
  createOneUser(data: UserCreateInput!): User!
  deleteOneUser(where: UserWhereUniqueInput!): User
  deleteManyUser(where: UserWhereInput): BatchPayload!
  updateOneUser(data: UserUpdateInput!, where: UserWhereUniqueInput!): User
  updateManyUser(
    data: UserUpdateManyMutationInput!
    where: UserWhereInput
  ): BatchPayload!
}

Mutation type is generated by Nexus

Now, our simple but fully-featured GraphQL API is ready! 🥳

Step 6: Initialize the database

Before you can do anything with your GraphQL API, you'll need to create tables in the database corresponding to the Prisma schema file.

This can be done by manually connecting to the database and running SQL commands, but I'll show you how to do it with the prisma db push commnand - the database tool that's part of Prisma 2.

First, save the initial changes of our schema.prisma file with the command below. At the moment, the prisma db push command is still in a preview state, so the extra flag --preview-feature flag is needed.

npx prisma db push --preview-feature

Awesome! With the database prepared, it's time to go back to http://localhost:3000/api/graphql, and have some fun with the your first GraphQL API with Nexus. Let me give you an example to play with!

mutation {
  createOneUser(data: { name: "Alice" }) {
    id
  }
}

Testing out user creation 😎

Step 7: Set up Urql GraphQL client with Next.js

We'll use Urql as the GraphQL client on the frontend, but you can use any library you like.

First, install the dependencies:

npm install graphql-tag next-urql react-is urql isomorphic-unfetch

Then, create a new file at /pages/_app.tsx. This is a special Next.js component that will be used to initialize all pages.

import React from 'react';
import { withUrqlClient, NextUrqlAppContext } from 'next-urql';
import NextApp, { AppProps } from 'next/app';
import fetch from 'isomorphic-unfetch';

// the URL to /api/graphql
const GRAPHQL_ENDPOINT = `http://localhost:3000/api/graphql`;

const App = ({ Component, pageProps }: AppProps) => {
  return <Component {...pageProps} />;
};

App.getInitialProps = async (ctx: NextUrqlAppContext) => {
  const appProps = await NextApp.getInitialProps(ctx);
  return { ...appProps };
};

export default withUrqlClient((_ssrExchange, _ctx) => ({
  url: GRAPHQL_ENDPOINT,
  fetch
}))(
  // @ts-ignore
  App
);

And that's it! Now you can use the GraphQL client in any page in your Next.js app.

Step 8: Use the GraphQL client

First, create a TSX file at /components/AllUsers.tsx. This file will have a component that performs an allUsers GraphQL query and renders the result as a list. This way, we can use the component to fetch all the user info from our PostgreSQL database.

You can create the query first, for example, with the following code. By using gql, the GraphQL VS Code extension will be able to identify the template string as a GraphQL query and apply nice syntax highlighting to it.

import React from 'react';
import gql from 'graphql-tag';
import { useQuery } from 'urql';

const AllUsersQuery = gql`
  query {
    allUsers {
      id
      name
    }
  }
`;

Since it's known that the data you are going to get is an array of User objects (thank you, GraphQL schema!), you can also define a new type:

type AllUsersData = {
  allUsers: {
    id: string;
    name: string;
  }[];
};

Next, create the React component that will be using the query.

The component encapsulates the following logic:

If the query is still in a fetching state, the text "Loading..." will be returned
If an error is occurred during the process, we will display the error
If the query is no longer fetching and there's no error, the data will be used to render a list of users

const AllUsers: React.FC = () => {
  const [result] = useQuery<AllUsersData>({
    query: AllUsersQuery
  });
  const { data, fetching, error } = result;

  if (fetching) return <p>Loading...</p>;
  if (error) return <p>Oh no... {error.message}</p>;

  return (
    <div>
      <p>There are {data?.allUsers.length} user(s) in the database:</p>
      <ul>
        {data?.allUsers.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default AllUsers;

Now, save the TSX file, and mount it onto the home page /pages/index.tsx:

import Link from 'next/link';
import Layout from '../components/Layout';
import AllUsers from '../components/AllUsers';

const IndexPage = () => (
  <Layout title="Home | Next.js + TypeScript Example">
    <h1>Hello Next.js 👋</h1>
    <p>
      <Link href="/about">
        <a>About</a>
      </Link>
    </p>
    {/* === Tada! === */}
    <AllUsers />
  </Layout>
);

export default IndexPage;

Time to spin up the Next.js dev server!

npm run dev

Voilà! The user list is rendered! 🥳

A user list is rendered on our home page

Step 9: Auto-generate `useQuery` hooks and types

Instead of manually defining all the types we expect to receive via GraphQL, we can also use a very cool package GraphQL Code Generator to generate types directly from the Nexus GraphQL endpoint. This way, you essentially only have to define the types once in the schema.prisma file as the single-source-of-truth, then all types you'll use in the application can be derived from that schema with little manual effort! 🎉

First, copy and refactor the GraphQL queries from the TSX files into the graphql directory. With the example from Step 8, create a new file at /graphql/queries.graphql.ts and copy the query from /components/AllUsers.tsx:

import gql from 'graphql-tag';

export const AllUsersQuery = gql`
  query AllUsers {
    allUsers {
      id
      name
    }
  }
`;

Separating GraphQL operations from components makes it easier to navigate the codebase.

Next, install the packages needed by graphql-code-generator as dev dependencies:

npm install -D \
    @graphql-codegen/cli \
    @graphql-codegen/typescript \
    @graphql-codegen/typescript-operations \
    @graphql-codegen/typescript-urql

Then, create a codegen.yml file in the project root with the following content:

overwrite: true
schema: 'http://localhost:3000/api/graphql' # GraphQL endpoint via the nexus dev server
documents: 'graphql/**/*.graphql.ts' # parse graphql operations in matching files
generates:
  generated/graphql.tsx: # location for generated types, hooks and components
    plugins:
      - 'typescript'
      - 'typescript-operations'
      - 'typescript-urql'
    config:
      withComponent: false # we'll use Urql client with hooks instead
      withHooks: true

The configs above will tell graphql-code-generator to pull the GraphQL schema from http://localhost:3000/api/graphql, then generate types, Urql useQuery hooks into a file located at /generated/graphql.tsx.

Cool, let the code generation begin (in watch mode)!

npx graphql-codegen --watch

You will see some nice, written-by-a-robot code in /generated/graphql.tsx. How neat!

A useAllUsersQuery hook and all the types are generated by GraphQL Code Generator

Now, you can go back to components/AllUsers.tsx, and replace the manually written AllUsersData type, the GraphQL query, and the useQuery hook, with what's in the /generated/graphql.tsx file:

import React from 'react';
import { useAllUsersQuery } from '../generated/graphql';

const AllUsers: React.FC = () => {
  const [result] = useAllUsersQuery();
  const { data, fetching, error } = result;

  if (fetching) return <p>Loading...</p>;
  if (error) return <p>Oh no... {error.message}</p>;

  return (
    <div>
      <p>There are {data?.allUsers?.length} user(s) in the database:</p>
      <ul>
        {data?.allUsers?.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default AllUsers;

Revisit the index page of the app at http://localhost:3000, everything works like a charm! 🙌

To make the development experience even better, let's optimize the NPM scripts for the project.

First, install the Concurrently NPM module, which is a great tool for running multiple CLI watchers at the same time:

npm install -D concurrently

Then, replace dev script in the package.json file with the following:

{
  // ...
  "scripts": {
    // ...
    "dev": "concurrently -r \"npx nexus dev\" \"npx next\" \"npx graphql-codegen --watch\""
    // ...
  }
  // ...
}

Now, we can use a single npm run dev command to launch Nexus, Next.js, and GraphQL Code Generator, all at the same time!

Conclusion

I hope you have enjoyed this tutorial and have learned something useful! You can find the source code in this GitHub repo.

Also, check out the Awesome Prisma list for more tutorials and starter projects in the Prisma ecosystem!

🔥 Debugging Frontend Apps inside VS Code!

hexrcs — Wed, 22 Jan 2020 09:19:15 +0000

Did you know that we can also debug client-side, frontend code right from VS Code, using its powerful built-in debugger? 🤯

In this 94-second video, we'll use the Chrome debugger extension to debug an event handler in a React app.

Although the demo is in React, the same knowledge applies to any frontend apps! 🥳

This video is part of my new 6-minute crash course series on YouTube 👉 Debugging in VS Code 🔥

Like this video?

I'm also on Twitter: @hexrcs
Check out my YouTube Channel: The Method Coder
You can find me at my homepage as well: xiaoru.li

💪 React + MobX Crash Course (in 5 pics!)

hexrcs — Tue, 03 Dec 2019 13:25:39 +0000

Originally posted on Twitter as a thread: https://twitter.com/hexrcs/status/1201593792417144833

State management in React apps can be a hard thing to do.

Are you having a hard time wrapping your head around React state management, and getting tired of writing boilerplate for Redux?

Let's check out MobX - everything becomes so simple and effortless 😃

👇 Here's a 5-minute React + MobX crash course for you! 🥳

1 - MobX Concepts

MobX is a "reactive" state management library.

We directly mutate the state. Because we use MobX to observe and track mutations, the UI will be auto-updated, like cell updates in Excel. Network requests can also auto-send when conditions are met.

Everything is automatic!

2 - Decorator and observable

We normally use the decorator syntax to mark fields in a class "MobX observables" - easy to use or read. This way, normal JS stuff gets "enhanced" (eg. a JS number becomes an observable that can be tracked).

Grouping state logic in a "store" also makes our code more modular.

3. Action and Computed

In addition to @observable, we also have:

@computed - derived state from other observable/computed that can be used just like observables. Getter syntax is required. The derivation is automatic.

@action - batched state mutations. Reactions will only be triggered by the update when the action completes.

4. Reactions

We can use autorun() or when() to watch observables and perform effects when there's update

autorun() takes a callback and runs it each time any observable used in it gets updated. (Remember to do the clean-up!)

when() only runs the callback once, when a condition is met.

5. Using MobX with React

mobx-react binding lets us use MobX with React without writing autorun functions to rerender components.

We use @observer as a decorator to a class component, or HoC wrapping a function component. This creates an observer component that tracks observables needed during render, and auto rerenders whenever an update is observed.

Summary

And that's it, everything you need to start using MobX effectively. Pretty effortless, isn't it? 😃

If you are curious how MobX works under the hood, check out this amazing talk "Reinventing MobX" by Max Gallo.

Credits

Thank you so much Michel Weststrate for creating this amazing library, and helping to review this crash course! 🙌

(Thread crash course format inspired by Chris Achard 😁 Check out his excellent React/Redux, Git crash courses!)

While you are still here, if you've got 13 more minutes and are interested in learning the new hot framework Svelte, I've also got a crash course with companion videos here 👉 Svelte Crash Course 🔥

I've also got another GraphQL Crash Course 🔥 👈 Check it out!

Like this post?

I'll be posting more on Twitter: @hexrcs
You can also find me at my homepage: xiaoru.li

🔥 GraphQL Crash Course (in 10 pics!)

hexrcs — Sun, 03 Nov 2019 10:34:24 +0000

Originally posted on Twitter as a thread: https://twitter.com/hexrcs/status/1190332090149150720

Always wanted to use GraphQL for your new projects, but never got time to learn how it works? 😃

Let's start the week with some new GraphQL knowledge in hand! 🙌

👇 Here's a 10-minute GraphQL crash course for you! 🥳

1 - How GraphQL works

GraphQL is a query language for making flexible API calls.

We describe what we want in a single request with nested fields, then we will receive a data payload of the exact shape.

No need to make many small requests to stitch data together or over-fetch unwanted parts!

2 - A GraphQL Query Exchange

GraphQL is not a library, but a language spec.

We send structured queries as POST or GET requests. The server checks if they're valid with a predefined schema, runs corresponding resolver functions to perform operations, then prepares the data to be returned to the client.

3 - The GraphQL Schema

GraphQL schema defines the structure of valid queries and the return data types of them. It's the protocol the client & server use to communicate under.

They're strongly typed, can be nested. In addition to the most common "object" types, the schema also supports unions, enums, interfaces, etc.

There are 3 operation types in GraphQL - query, mutation, or subscription. query is the most commonly used operation.

4 - Argument

Some queries allow us to pass in arguments in order to eg. filter results. The schema defines all valid arguments.

On the backend, we need to have corresponding resolvers to fulfill those conditioned queries.

NOTE: GraphQL has no builtin comparison operators or functions like > or TOP, LIMIT in SQL! Those additional features must be implemented in the resolvers. Most GraphQL frameworks however already ship with those utility resolvers.

5 - Alias

Sometimes in a query, we select the same field multiple times, but each time with a different argument (like in the pic). This will cause naming conflicts, so we need to assign aliases to the fields.

Aliases can be added to any field.

6 - Fragment

We can wrap "subfields" into a Fragment and reuse them with the spread operator in selections. Useful when we select the same fields over and over again. Think of it as a JS object for GraphQL field names that can be destructured!

The Fragment is sent to the server alongside the main operation in the query field of the HTTP request payload.

7 - Variable

Using GraphQL variables makes it easy to modularize and share/reuse our prewritten query code. We declare them at the beginning of a query, and are allowed to assign default values to them. The variables can be nested, just like a normal JSON object.

Noticed the GraphQL request payload in the pic of section 2 - A GraphQL Query Exchange? This is what the "variables" field is for.

8 - Interface

Interfaces in a GraphQL schema allow us to flexibly create and use complex data types in an OOP manner.

Types can implement (multiple) interfaces.

When the return type is an interface, we can use the on keyword to conditionally access fields of a specific implementation.

9 - Mutation Operation

Contrary to queries, a Mutation operation is used to change the serverside data - eg. to create an account, generate auth token, or add data entries.

Like queries, we can supply arguments to a mutation. The mutation also returns value, so don't forget to select the fields we need!

10 - Subscription Operation

Instead of sending queries over HTTP back and forth, GraphQL also has a Subscription operation type for creating WebSocket connections, so the server can push continuous updates to the client.

Particularly useful for real-time apps like 💹 stock market or 💬 messaging apps.

BONUS

Online Playgrounds

Many GraphQL frameworks come with a web IDE with autocompletion support and interactive schema lookups like GraphiQL or GraphQL Playground. Make use of them when debugging your queries! ✨

You can also create your own playground online with CodeSandbox by selecting the Apollo GraphQL Server sandbox.

However, if you are as lazy as me 🤪, there are also a few zero-config public GraphQL APIs to play with online 👉 https://apis.guru/graphql-apis/

Additional Resources

There's a great episode on GraphQL from the Ladybug Podcast, do check it out!

I hope you have enjoyed this GraphQL crash course! 😁 Have a great and productive week ahead! 🙌

(Thread crash course format inspired by @chrisachard 😁 Check out his excellent React/Redux, Git crash courses!)

Like this post?

I'll be posting more on Twitter: @hexrcs
You can also find me at my homepage: xiaoru.li

⏰ Svelte Crash Course (in 10 pics!)

hexrcs — Sat, 19 Oct 2019 19:58:42 +0000

Originally posted on Twitter as a thread: https://twitter.com/hexrcs/status/1185186492982943744

Huge Update: Video Version Now Available!

👉 YouTube Playlist - Only 13 minutes in total! 🥳

Always wanted to check out Svelte (aka. "the next big thing in web dev") but never got time for it? ⏰

🔥 I've got a 10-minute crash course for you! 👇

(Spoiler alert: Svelte is so intuitive and easy to use that you may feel like you already know it! 🥳)

1 - How Svelte works

Compiler: Doesn't ship a Svelte "library" to users, but build-time optimized plain JS
Components: App is made up of composable UI elements
Reactive: Event/User interaction triggers chain of state changes, auto-updating components throughout the entire app

2 - UI Is a Component Tree

A component defines how your app should interpret some abstract "state" values, so that it can turn them into DOM elements in your browser, and ultimately pixels on your screen.

3 - The Anatomy of a Svelte Component

Each .svelte file contains a single component, consisting of 3 parts:

<script> is component logic in JS
<style> is CSS styling, scoped and applied to only the current component
Svelte template, based on HTML but can use custom components and inline logic (like JSX)

4 - The Svelte Template

The Svelte template allows us to use our own custom components in addition to HTML elements. The .svelte file extension is optional if there's no ambiguity, but the first letter of a custom component MUST be in uppercase.

We can use JS expressions inside curly braces { }.

5 - Setting "Props"

A common way to "control" how a child component behaves is to pass data into it as props (properties).

To accept a prop, expose a variable with export. It's important to use let because const is not reassignable.

Setting a prop is just like doing regular HTML.

6 - Updating Component States

User actions trigger events. on: lets us listen to events and fire functions to update states. State changes will auto-update the UI.

Data generally flows from a parent to a child, but we can use bind: to simplify the state-update logic by allowing two-way data flow.

7 - `$:` Reactive Statements

"Reactive statements" are those statements marked by $:.

Svelte analyzes which variables they depend on. When any of those dependencies changes, the corresponding reactive statements will be rerun. Very useful for declaring derived states, or triggering "side effects".

8 - Reactive State "Store"

A reactive "store" makes it easy to share states across many components. It can exist in a separate JS file. To create a store, just wrap writable around a value.

In a component, we prefix store names with a $ in order to directly use or update them. Compiler magic!

9 - Conditional Rendering And Lists

We can conditionally render elements with Svelte's template via {#if} and optionally {:else}.

To render everything in a list, we have {#each}.

Remember to always close a block with {/if} or {/each}!

(Should've used <ol> in the example, but I wanted to show how index- access works.)

10 - Elegant Async/Await

It's super easy to do asynchronous stuff like API requests with Svelte.

We can simply {#await} a Promise to resolve, displaying a "loading" placeholder before the result is ready.

Note that we await the Promise in the template section, so no await keyword in <script>.

BONUS - Animated Transitions

Svelte comes with neat animated transitions built-in. Try giving your components a transition:fly property! There're also other types like fade, slide, etc. You can also use in: out: to separately define intro/outros.

Attached to the transition prop are the params.

👆 That's All, Folks!

That's it - everything you need to get started with Svelte! 😁

We covered a lot in this crash course, from the most fundamental concepts to topics that might even be considered intermediate or advanced in other frameworks (eg. API requests and animated transitions).

Now it's your turn to play with Svelte and build something cool. The Svelte REPL is a great place to start!

Have fun! 🥳

(Thread crash course format inspired by @chrisachard 😁 Check out his excellent React/Redux, Git crash courses!)

PS

Because Svelte is so expressive, I joked the other day that Svelte devs count "characters of code", instead of "lines of code"...

True that! Here are a few tweet-sized Svelte applets Tomasz Łakomy (@tlakomy) and I (@hexrcs) have been playing with -

// Detect dark theme var iframe = document.getElementById('tweet-1180150776624291846-241'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1180150776624291846&theme=dark" }

// Detect dark theme var iframe = document.getElementById('tweet-1183106114273107969-405'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1183106114273107969&theme=dark" }

So, what's the most complex Svelte app that we can fit in a tweet? 😁

Like this post?

I'll be posting more on Twitter: @hexrcs
You can also find me at my homepage: xiaoru.li

5 Visual Studio Code Tricks to Boost Your Productivity

hexrcs — Thu, 08 Aug 2019 08:48:09 +0000

VS Code is perhaps the most popular free and open-source code editor/lightweight IDE in the world right now. Here are 5 tricks guaranteed to boost your productivity!

#1 - Refactoring With "Rename Symbol"

We don't always give variables, functions or attribute keys the right name they deserve when we first come up with them. Quite often, when we are doing refactoring, we need to rename some of those to better ones.

Say we want to change a dictionary/object foo to counter in our code, but it has already been used numerous times throughout the entire project, across many different files. We also would like to change its attribute key bar to value, so that we have counter.value instead of foo.bar. How do we proceed?

A naive way to do that is to simply to do a global search-and-replace via the search panel (shift + cmd + F on macOS, or shift + ctrl + F on Windows and Linux). That can be swift, but can also be unsafe - if we happen to have another variable called food, then the simple replacement would take effect on this variable too. counterd, oops!

These named entities are called "symbols". And the most straightforward and "correct" way to do this is to use the "rename symbol" feature in VS Code. Place the cursor on the "symbols" that we want to rename, then hit F2 (also on macOS). We will be greeted with a text field next to the symbol we want to rename. This way, all references to this name throughout the entire project will be correctly renamed. If we use this on a React component, the JSX markup tag will be renamed too!

#2 - Shortcuts For Editing

An editor is not only where we type things - but also where we move chunks of text around.

Have you noticed that if you hit the standard copy/paste/cut shortcuts without selecting anything, VS Code will invoke that action on the whole line? This is great for editing entire lines of text.

There are also other shortcuts dedicated to duplicating and moving lines around.

alt + up or alt + down will simply move the line your cursor is currently placed on up or down. shift + alt + up or shift + alt + down will duplicate the line and place it above or below the current line. These shortcuts also work when you have selected multiple lines. On some Linux distros though, these combinations might conflict with the default systemwide keymapping. In that case, you will have to reassign them in VS Code's settings.

The best thing ever however, is shift + ctrl + cmd + right/left for expanding or shrinking block selection. Try it out in the middle of a nested code block and you will know what I mean! The Windows/Linux equivalent is shift + alt + right/left.

#3 - Multi Cursor Magic

One of my favorite productivity trick in VS Code is its multi cursor support. If you have used Sublime before, you already know how dope this is!

First of all, we can use alt + mouse click to insert cursors. If you made a mistake somewhere, you can use cmd + U or ctrl + U to undo the cursor insertion. If the text blocks we want to multi-select are already neatly aligned vertically, we can just use cmd + alt + up or cmd + alt + down (replace cmd with ctrl on Windows or Linux) to insert cursors directly above or below the current position.

If you want to select the next occurrence of the word (text separated by spaces or special characters) currently under cursor or text of the current selection, cmd + D will do the job.

Super neat for doing mass rename, delete or copy-paste, especially when working with markup languages!

#4 - Fast Keyboard Navigation

Navigating with the keyboard is a breeze. You can use:

ctrl + G (on macOS too) to Go To Line...
ctrl + P (replace ctrl with cmd on macOS this time!) to Go To File...
ctrl + shift + O (replace ctrl with cmd on macOS) to Go To Symbol....

Man, I love the third one! It will bring you right to where you declared that function or variable - the symbol. You can then take it from there. 😉

Another nice shortcut is ctrl + - or shift + ctrl + - on Mac (alt + left/right on Windows/Linux) to just jump back or forth to previous cursor locations, ideal if combined with those Go To shortcuts!

#5 - DIY Code Snippets

If you have been using VS Code for a while, you may have got some code snippet extensions already installed from the marketplace. Code snippets are shorthands that you can type to expand to entire pieces of code. They are also often smart enough to place your cursor right at the key positions where you can directly change the placeholder function name or similar things.

But, the code snippets that suit you the best are always going to be handmade and homebrew. Making our own code snippets for VS Code is not that hard at all!

Just go to the Code > Preferences > User Snippets on a Mac or File > Preferences > User Snippets on a Windows/Linux, and you can select a language (or global scope) you can write your own snippets!

Snippets follow this format:

{
  // ...
  "Name of the snippet": {
    "prefix": "helo", // the shorthand to invoke the snippet
    "body": [
      "print('Hello, $1');",
      "$2"
    ],
    "description": "Prints 'Hello, blahblahblah' to terminal"
  }
  // ...
}

Note that the $1, $2 etc. simply means placeholder key positions which you can use Tab key to jump to when the snippet is invoked. To move the cursor outside the snippet and make Tab key go back to normal, just press Esc.

Bonus - Install The IntelliCode Extension

Microsoft has recently launched a more advanced IntelliSense extension for VS Code, powered by machine learning. Check it out from their extension marketplace!

The extension currently supports JavaScript, TypeScript, Python, and Java. Having coded with IntelliCode since its preview release, this little extension has been a huge time + frustration saver for me! :)

Originally posted on my blog, where I publish random stuff on web dev, flutter and sometimes ML every two weeks or so.

You can also find me on Twitter @hexrcs :)

Become a Command-Line Ninja with These Shortcuts

hexrcs — Tue, 18 Jun 2019 16:28:11 +0000

I've often found myself in such a frustrating situation, where I have to replace one keyword in the middle of a looong shell command that I just copied and pasted into the terminal (from StackOverflow or course 😅). Jumping over words with Alt-Arrow doesn't work on all machines; how many left arrows and backspaces do I have to press, in order to replace that path/to/file or username in that genius command I stole from that SO answer??

Finally, I sat myself down to do some research on how to properly practice Ninjutsu in the terminal. As it turns out, roaming inside that command-line environment is not that difficult at all!

I'm primarily a Z-Shell user, so this article will be more focused on ZSH. The shortcuts we are going to see here, however, should mostly work in BASH as well (sorry I don't use FISH or other shells ).

Fun fact: shell key bindings actually defaults to "emacs mode"! You may have already discovered this if you are an emacs user. But for us mere mortals (or VIM-mortals), let's carry on and learn something new!

In fact, if you are more comfortable with VI/VIM, you can even switch to VI-bindings from the standard emacs one - use set -o vi to test it out! (You might need a plugin or two to give you hints whether you are in edit or normal mode though. Oh-My-Zsh has a plugin for this!)

Navigation

Let's jump right in with the navigation shortcuts. Here's a little list of the useful ones:

Shortcut	Action
Ctrl-A	Jump to the beginning of line
Ctrl-E	Jump to end of line
Ctrl-B	Move back by one character
Ctrl-F	Move forward by one character
Meta-B	Jump back by one word
Meta-F	Jump forward by one word

Note that what the Meta key actually is may vary on different setups (OS + terminal simulator). You might find Alt working on your system as the Meta key, or the Command key (if you are using iTerm on macOS, you can change Meta key binding in "Preferences"). However, if all fails, try pressing ESC then release (not using it as a modifier), followed by the other key - this should work universally as well.

Editing

Here's a little list of default key bindings for editing:

Shortcut	Action
Ctrl-U	Cut current line*
Meta-W	Cut everything before the cursor (multi-line!)
Ctrl-K	Cut everything after the cursor on current line
Ctrl-W	Cut the previous word
Meta-D	Cut the next word
Ctrl-Y	Paste the stuff just cut (doesn't use OS clipboard)
Ctrl-_	Undo last change

* This shortcut cuts everything before the cursor in BASH.

I never knew that I can undo in the terminal! How do you undo on Android BTW? 🤨

Searching and History

Something you might not know is that shells default to log every command that you've ever executed if you didn't opt-out. For ZSH, that logbook is kept under ~/.zsh_history (or ~/.bash_history for BASH). This is actually a pretty neat feature, allowing us to search from previous commands and reuse them anytime to save time. (If you are feeling like to go incognito, you may wanna set HISTSIZE = 1 in your .zshrc to limit the history storing to only 1 record. HISTSIZE = 0 doesn't seem to work though.)

To enter search mode, press Ctrl-R. Now type the keyword that you are looking for. Press Ctrl-R again to "find next".

You can exit the search mode anytime by trying to edit the current displaying search result, directly with the shortcuts we've mentioned above. Of course, you can abort with Ctrl-C as well!

To iterate through the previous commands though, we don't need to enter search mode - just use Ctrl-P to show the p-revious, or Ctrl-N to show the n-ext line!

More Cool Stuff

Instead of the clear command, shortcut Ctrl-L is another way to clear the screen. It also leaves the line you are working on intact, so if you are in the middle of typing a long command but suddenly find the littered terminal screen is super distracting, you can hit Ctrl-L to clean up, without having to retype the command.

Ever wanted to type multiple lines into ZSH then execute in one single setting, just like copy & pasting some multi-line shell snippets? Ctrl-V Ctrl-J will do the trick! (Ctrl-V is "quoted-insert", which inserts instead of interprets the next input; Ctrl-J prints the ASCII symbol LF, the Unix "next-line".)

Even Cooler - DIY! 😋

In ZSH, you can always obtain a list of the current key bindings with a simple bindkey command. A BASH equivalent would be bind -P.

In addition to the ability of switching to VIM mode, if are using ZSH and would like to customize your key bindings, you can easily do so by declaring stuff like bindkey "^[X" zle-command (zle, The Z-Shell Line Editor is the line editor behind our beloved ZSH). A list of zle-commands can be obtained with zle -al.

I hope you have enjoyed this post, and have learned something useful, my fellow ninja! 🥳

Originally posted on my blog, where I publish random stuff on web dev, flutter and sometimes ML every two weeks or so.

You can also find me on Twitter @hexrcs :)

Fun with JavaScript Regex

hexrcs — Fri, 24 May 2019 10:09:12 +0000

Regex, or regular expression in its full name, can feel like some kind of scary dark witchcraft if you are not familiar with it. You know those magic spells are powerful for pattern matching and string parsing, but those weird-looking question marks, slashes, and asterisks are just plain gibberish to an untrained mind.

Not all regex are equal. The regex we use in programming today comes in all kinds of syntax flavors. However, the most popular ones nowadays are mostly derivatives of Perl's regex syntax. If you have mastered one regex dialect (like the Javascript one we are going to play with today, which is 99% identical to Dart's regex syntax), picking up other dialects like Python's or Java's would be trivial. So now, let's have some regex fun!

Getting Started!

In Javascript, a "regex pattern" is a class of objects, which we can initialize either with the new keyword or a simpler regex literal (note the lack of quotation marks).

const regex0 = new RegExp(',') // regex constructor
const regex1 = /,/ // regex literal

The two RegExp objects above are equivalent - they both represent the "pattern" of a single comma.

So now we've defined a pattern, how do we use it? If what concerns us is only whether a pattern exists in a string or not, we can simply run the test method on a RegExp object.

const str0 = `1,000,000,000 is like, tres comas.`
console.log(regex1.test(str0)) // => true

If we want to find the location of the pattern's occurrence, we can run the exec method, like, executing the regex on this string.

console.log(regex1.exec(str0))
// => [ ',', index: 1, input: '1,000,000,000 is like, tres comas.' ]

That's some cool info, but it only returns the index of the first match. Hmm, maybe running exec() multiple times will do the trick, like pulling out data from an iterator?

console.log(regex1.exec(str0))
// => [ ',', index: 1, input: '1,000,000,000 is like, tres comas.' ]
console.log(regex1.exec(str0))
// => [ ',', index: 1, input: '1,000,000,000 is like, tres comas.' ]

Oops, nope! Well, we are partially right though - the exec() method is indeed stateful, and this is the correct way to iterate through matches. The problem actually lies within that regex pattern we defined.

Regex Flags

Flags let us toggle options of how the searching or matching should be carried out, and are part of the regex pattern.

What we need in the last example is a global flag g, which tells the regex engine to do a "global" search while not just stop at the first match (like the examples above). regex2 now will return null when the iteration is complete, then restart from index 0.

const regex2 = /,/g
console.log(regex2.exec(str0))
// => [ ',', index: 1, input: '1,000,000,000 is like, tres comas.' ]
console.log(regex2.exec(str0))
// => [ ',', index: 5, input: '1,000,000,000 is like, tres comas.' ]
console.log(regex2.exec(str0))
// => [ ',', index: 9, input: '1,000,000,000 is like, tres comas.' ]
// let's only run 3 times for now

There's an interesting thing to observe - each RegExp object has an attribute called lastIndex, making it stateful. However, the object itself doesn't remember which string is passed into the exec method. Right now, our regex2 object has its lastIndex set to 10 - if we swap str0 with another one, the matching will start from index 10 instead of 0.

console.log(regex2.lastIndex)
// => 10
const str1 = `This, is, cool.`
console.log(regex2.exec(str1))
// => null, because the searching starts at index 10.

Other useful flags are: i which makes the search case-insensitive, m which basically ignores newlines and does multi-line searches, and other less used ones. A new dotAll s flag has been added to the ECMAScript 2018 this year - this is a very helpful addition since the dot character (.) now finally matches all characters in the string, including the \n newline characters and co. This new flag is supported by Chrome since version 62.

Now let's see what all those question marks, slashes and asterisks are actually about!

Dealing with Wildcards

If you are familiar with terminal emulators in either UNIX- or Windows-style, you have probably dealt with Wildcards before. You know how to use rm -f *.gif on Mac or Linux to delete all GIFs in the current directory with no questions asked, use del *.gif /q on your Windows box to do the same. Well, it is important to know that wildcards in Perl-like regular expressions work in other ways.

We have only one wildcard character in Regex - the period . (aka the dot). This character pattern represents one single unknown character but doesn't match a newline character (\n), so /c.t/ matches string cat and doesn't match c\nt. It basically works like the ? wildcard you are familiar with inside command lines.

Repetition Qualifiers (aka. Quantifiers)

So how do want to match many unknown characters? This is where repetition qualifiers come in.

Asterisk * represents 0 or more characters, ? means 0 or 1 characters, and + means 1 or more characters.

So for example, essential can be matched with /es.*sential/ (0 extra characters in this case), /es.+ential/ (1 extra here), /es.?ential/ (1 extra character), or obviously /.*/. Repetition qualifier works with specific characters too, which allows /ess?enstial/ to both match essential and esential but not any other strings.

What's more, you can DIY the range of the repetition - at least n to at most m - with {n,m}, or specify the exact amount of occurrences with {n}. We can also match n to infinity (greater than or equal to n) occurrences with {n,}.

For example, essential can be matched with /es{2}ential/, 1000101 and 1000000101 can both be matched with 10{3,6}101 but 10101 can not.

Sometimes We Need to Escape

Sometimes, we need to match characters like { or * in our strings too - we can use backslash \ to escape those characters. In JavaScript, the special characters to escape are \ / [ { ( ? + * | . ^ $. Interestingly, ] } ) are not special characters, but trying to escaping them is not harmful. You can also escape normal characters, but you have to be careful since, in regex, there are character classes (like \d for all number characters) that are written like escapes but are not - you can match /\o/ with /dog/ but not /\d/!

Sets and Classes

Character class makes our life easier when we want to match characters from a specific set. For example, if we want to match numbers in an ID string, we could simply use \d to represent that number - essentially like a dot wildcard but only for numbers.

const regex = /\d+/g // the string must contain numbers
const str0 = '1234'
const str1 = 'D1234'
const str2 = 'D'

console.log(regex.test(str0)) // => true
console.log(regex.test(str1)) // => true
console.log(regex.test(str2)) // => false

We can also use a more flexible set notation [0-9] to replace \d - range 0 to 9. Following this "range" logic, for basic Latin letters we can also do [a-z] or [A-Z], or simply [a-zA-Z]. These are actually just predefined shorthands to simplify [0123456789] or [abcdef...]. If you are matching something from the extended Latin alphabet, you'll need to add the extra letters in manually. For example, [a-zA-ZüöäÜÖÄß] for German. You get the idea 😉.

You can also use ^ inside the brackets as a negation operator - it negates all the rules inside the brackets - [^0-9] will match everything except numbers.

It is important to notice that special characters like $ or . don't mean anything extra here inside the brackets - the brackets strip away all their magic, and they are simply plain special characters that may appear in normal texts.

Predefined Character Class Shorthands

As we have seen above, Javascript regex (or any other regex languages) has some predefined shorthands for common situations. Let's have a look at the code snippet below.

const regex1 = /\w/ // matches "word" characters - equivalent to [a-zA-Z0-9_]
const regex2 = /\s/ // matches "space" characters, also tabs and various unicode control code and stuff
const nregex1 = /\W/ // negated \w - matches everything other than "word" characters
const nregex2 = /\S/ // negated \s - matches everything other than "space" characters

OR operator

Like in normal programming languages, | is the OR operator. [0123456789] can also be written like [01234]|[56789] if you feel like experimenting!

Replace by groups

Other than matching patterns, regex is also super useful for replacing characters in a match. We can use JavaScript string's replace() method to do this.

Let's first construct a phone number matcher.

const str0 = '+49 123-123-1234' // a phone number...
const regex0 = /^(\+\d+)\s(\d+)-(\d+)-(\d+)/g // matches the number and put all the digits into 4 groups.
regex0.test(str0); // => true, of course!

Now, if we use the replace() method, we can use $ plus a number to represent the corresponding group that we have defined in the regex pattern inside the second (replacer) parameter.

For example, we would like to extract the country code.

str0.replace(regex0, '$1') 
// replace the match (the whole string in this case) with the first matched group, which is  (\+\d+)
// => '+49'

Or replace the last 4 numbers with 4321...

str0.replace(regex0, '$1 $2-$3-4321')
// => '+49 123-123-4321'

Fun isn't it? 😉

Originally posted on my blog, where I publish random stuff on web dev, flutter and sometimes ML every two weeks or so.

You can also find me on Twitter @hexrcs :)

DEV Community: hexrcs

🔑 Passwordless Authentication with Next.js, Prisma, and next-auth

Passwordless Authentication with Next.js, Prisma, and next-auth

Step 0: Dependencies and database setup

Step 1: Initialize Prisma

Step 2: Define database schema for authentication

Step 3: Configure next-auth

Step 3.1: Set up GitHub OAuth

Step 3.2: Set up passwordless Email authentication

Step 3.3: Link up Prisma

Step 4: Implement authentication on the frontend

Step 4.1: Checking user sessions with the useSession() hook

Step 4.2: Checking user sessions with getSession() on the backend

Conclusion

Complete Introduction to Fullstack, Type-Safe GraphQL (feat. Next.js, Nexus, Prisma)

Complete Introduction to Fullstack, Type-Safe GraphQL (feat. Next.js, Nexus, Prisma)

Our tech stack

Step 0: Install VS Code extensions

Step 1: Spin up a PostgreSQL database

Step 2: Create a Next.js project

Step 3: Install Nexus with Prisma

Step 4: Wire up Nexus Schema with Next.js

Step 5: Implement your first GraphQL API

Step 5.1: Define an Object type

Step 5.2: Define the Query type

Step 5.3: Define the Mutation type

Step 6: Initialize the database

Step 7: Set up Urql GraphQL client with Next.js

Step 8: Use the GraphQL client

Step 9: Auto-generate useQuery hooks and types

Conclusion

🔥 Debugging Frontend Apps inside VS Code!

💪 React + MobX Crash Course (in 5 pics!)

1 - MobX Concepts

2 - Decorator and observable

3. Action and Computed

4. Reactions

5. Using MobX with React

Summary

Credits

🔥 GraphQL Crash Course (in 10 pics!)

1 - How GraphQL works

2 - A GraphQL Query Exchange

3 - The GraphQL Schema

4 - Argument

5 - Alias

6 - Fragment

7 - Variable

8 - Interface

9 - Mutation Operation

10 - Subscription Operation

BONUS

Online Playgrounds

Additional Resources

⏰ Svelte Crash Course (in 10 pics!)

Huge Update: Video Version Now Available!

1 - How Svelte works

2 - UI Is a Component Tree

3 - The Anatomy of a Svelte Component

4 - The Svelte Template

5 - Setting "Props"

6 - Updating Component States

7 - $: Reactive Statements

8 - Reactive State "Store"

9 - Conditional Rendering And Lists

10 - Elegant Async/Await

BONUS - Animated Transitions

👆 That's All, Folks!

PS

5 Visual Studio Code Tricks to Boost Your Productivity

#1 - Refactoring With "Rename Symbol"

#2 - Shortcuts For Editing

#3 - Multi Cursor Magic

#4 - Fast Keyboard Navigation

#5 - DIY Code Snippets

Bonus - Install The IntelliCode Extension

Become a Command-Line Ninja with These Shortcuts

Navigation

Editing

Searching and History

Step 3: Configure `next-auth`

Step 4.1: Checking user sessions with the `useSession()` hook

Step 4.2: Checking user sessions with `getSession()` on the backend

Step 9: Auto-generate `useQuery` hooks and types

7 - `$:` Reactive Statements