Forem: Ibrahima Ndaw

How to use React Query with React and GraphQL

Ibrahima Ndaw — Wed, 24 Mar 2021 23:15:13 +0000

React Query is a library that provides a set of hooks for fetching, caching, and updating data in your React applications. In this tutorial, we will be looking at React Query and learning how to use it in a React and GraphQL app.

What is React Query?

React Query (RQ) is a performant and powerful data synchronization library for React apps. It provides a collection of hooks for fetching and managing data. It is backend agnostic, which means you can use REST, GraphQL, or whatever APIs you like, RQ doesn’t care. React Query handles caching, background updates, and stale data out of the box with zero-configuration. The caching layer of RQ is powerful and minimal effort to configure.

React Query makes state managing easy because it allows you to fetch, mutate and cache data with almost no hassle. And can also be customized for more advanced use cases. While React Query does a lot for you, it’s not a complete replacement for client-state management libraries because RQ can’t handle UI state (state for controlling the interactive parts of our app); it’s a library for fetching and synchronization data.

However, RQ is designed to replace the boilerplate code and related wiring used to manage cache data in your client-state and replaces it with just a few lines of code. RQ has to manage asynchronous operations between your server and client and use Redux, MobX, Zustand, or even React Context to handle the UI state. This way, you will get a simplified app logic and delivers a snappy experience to your users with less code.

What we’re building

In this guide, we will be building a Blog app using React, React Query, and GraphQL. We will retrieve the data from the TakeShape GraphQL API. Let’s get started!

Setting up

Before we craft up a new React app, we need to sign up for an account on TakeShape (it’s free) then create a new project to get a GraphQL API to play with. After you create an account and create a read-only API key, open your command-line interface and run the following:

npx create-react-app rq-graphql-app

This command will create a new React app for us. Next, we need to install a couple of libraries. Browse to the project root and do the following:

npm install react-query react-router-dom graphql graphql-request react-markdown

Here’s what each of the libraries you are installing does:

react-query allows interacting with the GraphQL API and retrieve the data.
react-router-dom enables routing in our app.
graphql is a dependency for graphql-request.
graphql-request allows fetching data from a GraphQL backend.
react-markdown helps render Markdown in a React app.

With the dependencies installed, we can get our hands dirty and see React Query in action.

Folder structure

Structure your project as follows:

├── src
|  ├── components
|  |  ├── Header.js
|  |  ├── Layout.js
|  |  ├── Post.js
|  |  └── PostTemplate.js
|  ├── App.js
|  ├── useRequest.js
|  ├── index.css
|  ├── index.js
├── .env
├── package.json
└── yarn.lock

Take special note of the useRequest.js file. It is a custom hook that uses RQ to retrieve the data from the TakeShape GraphQL API. This file is where the magic happens; it helps interact with the API to fetch the blog posts. You can alternatively use the RQ hooks in your components, but it’s nice to have a custom hook to avoid repeating ourselves.

Next, let’s configure our app to use React Query.

Setting up React Query

// index.js
import React from "react";
import ReactDOM from "react-dom";
import { QueryClient, QueryClientProvider } from "react-query";

import App from "./App";
import "./styles.css";

const queryClient = new QueryClient();

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </React.StrictMode>,
  rootElement
);

In order to use the hooks of RQ to interact with our GraphQl API, we need to wrap our top-level app component with the RQ library query provider.

Using React Query

// useRequest.js
import { useQuery } from "react-query";
import { GraphQLClient, gql } from "graphql-request";

const API_URL = `https://api.takeshape.io/project/${process.env.PROJECT_ID}/v3/graphql`;

const graphQLClient = new GraphQLClient(API_URL, {
  headers: {
    Authorization: `Bearer ${process.env.API_KEY}`
  }
});

export function useGetPosts() {
  return useQuery("get-posts", async () => {
    const { getPostList } = await graphQLClient.request(gql`
      query {
        getPostList {
          items {
            _id
            title
            description
            content
          }
        }
      }
    `);
    return getPostList;
  });
}

export function useGetPost(postId) {
  return useQuery(["get-post", postId], async () => {
    const { getPost } = await graphQLClient.request(
      gql`
        query getPost($postId: ID!) {
          getPost(_id: $postId) {
            _id
            content
            description
            title
          }
        }
      `,
      { postId }
    );
    return getPost;
  });
}

In useRequest.js, we start by importing the useQuery hook and graphl-request. Next, we declare the API_URL constant with the credentials provided by TakeShape. For each request, we need to include an authorization header with the API key from TakeShape in order to authenticate to the GraphQL API . Using GraphQLClient allows us to set the API key on each request.

To get all blog posts from the API, we use the useGetPosts function. The useQuery hook expects a key (get-posts) and a GraphQL query. The hook can receive more options, but for this example, we just need these two. Once the fetch is done, we return the data. React Query will append some data to the returned value, which allows handling loading and error states.

Next, useGetPost, receives the id of the post to fetch. To pass in the id to the GraphQL query, we need to add it as a second argument to the request() method. With this, the data is fetched and then returned.

The custom hook is ready to use. Let’s create the React components and rely on the hook to retrieve the data.

Creating the components

// components/Post.js
import React from "react";
import { Link } from "react-router-dom";
export default function Post({ article }) {
  const { _id, title, description } = article;
  return (
    <article className="Article">
      <h1>{title}</h1>
      <p>{description}</p>
      <Link to={`/single-post/${_id}`}>Read more &rarr;</Link>
    </article>
  );
}

This component is responsible for the display of a blog post preview. It receives the object as a parameter and then shows it accordingly.

// components/PostTemplate.js
import React from "react";
import ReactMarkdown from "react-markdown";
import { useParams } from "react-router-dom";
import { useGetPost } from "../useRequest";
export default function PostTemplate() {
  const { id } = useParams();
  const { data, error, isLoading, isSuccess } = useGetPost(id);

  if (error) return <h1>Something went wrong!</h1>;
  if (isLoading) return <h1>Loading...</h1>;

  return (
    isSuccess && (
      <article className="Post">
        <h1>{data.title}</h1>
        <ReactMarkdown source={data.content} />
      </article>
    )
  );
}

PostTemplate.js is a template to display a blog post. The id is pulled out from the router params and then passed in to the useGetPost hook. With this, we can now get the post using its id. It returns the data and some states provided by RQ to handle the case when something went wrong.

Showing the blog posts

// App.js
import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";

import { useGetPosts } from "./useRequest";
import Post from "./components/Post";
import PostTemplate from "./components/PostTemplate";
import Layout from "./components/Layout";

export default function App() {
  const { data, error, isLoading, isSuccess } = useGetPosts();

  if (error) return <h1>Something went wrong!</h1>;
  if (isLoading) return <h1>Loading...</h1>;

  return (
    <Router>
      <Layout>
        <Route path="/" exact>
          {isSuccess &&
            data.items.map((post) => <Post key={post._id} article={post} />)}
        </Route>
        <Route path="/single-post/:id">
          <PostTemplate />
        </Route>
      </Layout>
    </Router>
  );
}

In App.js, we import the custom hook and use it to get all blog posts from the API. Then loop through the response data and display the posts using the Post component.

We are now ready to test our example app in the browser. Open the project directory in your CLI and run:

npm start

If everything works as it should, the app will be up and running here: [http://localhost:3000/](http://localhost:3000/).

app-preview

Awesome! Our Blog app is looking nice.

React Query comes with dedicated devtools. It helps visualize all of the inner workings of React Query and will likely save you hours of debugging. To enable it, we need to enable it in index.js.

// index.js
import React from "react";
import ReactDOM from "react-dom";
import { QueryClient, QueryClientProvider } from "react-query";
import { ReactQueryDevtools } from "react-query/devtools";

import App from "./App";
import "./styles.css";

const queryClient = new QueryClient();

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  </React.StrictMode>,
  rootElement
);

Import ReactQueryDevtools from react-query and add it as a child component of the QueryClientProvider component. That’s it! The devtools are ready to use. Let’s try it in the browser.

devtools

Once you click on the React Query logo, the devtools will pop up with its neat features. Enjoy!

You can find the finished project in this CodeSandbox. Thanks for reading!

Conclusion

React Query is a useful library for managing asynchronous operations between your server and client. It continues to gain traction and is trusted in production by large companies such as Google, Facebook, Amazon, and Microsoft. Folks are using it to simplify their state management because it has great caching strategies, can synchronize and updates server state, and has less boilerplate. RQ is a go-to for your next project that requires remote data fetching.

How to use GraphQL on the Client-side with React and TypeScript

Ibrahima Ndaw — Mon, 25 Jan 2021 23:29:55 +0000

In this tutorial, we will be looking at using GraphQL on the client-side with React, TypeScript, and Apollo Client. This article is a follow-up of How to use TypeScript with GraphQL (server-side) in which we built a GraphQL API using TypeScript and TypeGraphQL. We’ll be using the API we created in that article, so if you haven’t already, you may want to catch up before diving into the client-side because. Let’s get started!

Prerequisites

This guide assumes that you have basic experience with React and TypeScript. You will learn how to use GraphQL in a React App to interact with a GraphQL API and then retrieve the data using Apollo Client. We’ll be building a Todo App that relies on the API to add and fetch the Todos.

You can preview the GraphQL API in this CodeSandbox

Setting up

To start a new React App, execute this command on the command-line-interface (CLI):

npx create-react-app react-typescript-graphql

Next, we have to install the Apollo and GraphQL libraries. The Apollo Client will allow us to communicate with a GraphQL API. Open the React App directory in your CLI and run the following command:

yarn add apollo-boost @apollo/react-hooks graphql

Or for npm

npm install apollo-boost @apollo/react-hooks graphql

Now let’s structure the project as follows:

src
| ├── components
| |  ├── AddTodo.tsx
| |  └── Todo.tsx
| ├── type
| |  └── Todo.ts
| ├── App.tsx
| ├── useRequest.ts
| ├── graphql.ts
| ├── index.ts
| └── index.css

There are two files to take special notice of:

useRequest.ts is a custom hook that helps fetch data using Apollo Client.
graphql.ts holds the GraphQL logic to interact with the API.

With this folder structure in place, we can get our hands dirty and create our TypeScript Types!

Creating the TypeScript Types

types/Todo.ts

export interface ITodo {
  id?: string;
  title: string;
  description: string;
}

export interface ITodos {
  getTodos: ITodo[];
}

export type ITodoMutation = {
  addTodo: ITodo;
};

Let’s explore what each type describes. The ITodo type describes the shape of a Todo. We use the ITodo type to create ITodos which returns an array of Todos from the API. Finally, we rely on ITodo to define the type expected by the GraphQL mutation query ITodoMutation.

Next we’ll add Apollo Client into our React App.

Connecting React to Apollo Client

index.ts

import * as React from "react";
import { render } from "react-dom";
import ApolloClient from "apollo-boost";
import { ApolloProvider } from "@apollo/react-hooks";

import App from "./App";

const client = new ApolloClient({
  uri: "https://tyoku.sse.codesandbox.io/graphql"
});

const rootElement = document.getElementById("root");
render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  rootElement
);

After importing ApolloClient, we create a new instance of it and pass in the URL of the GraphQL API. To connect it with React, we need to pass the client object to the ApolloProvider component. Apollo client can now be used to retrieve data from the API.

Next we’ll use gql and the hooks provided by Apollo Client to send the GraphQL queries to the API.

Writing the GraphQL queries

graphql.ts

import gql from "graphql-tag";

export const GET_TODOS = gql`
  {
    getTodos {
      id
      title
      description
      status
    }
  }
`;

export const ADD_TODO = gql`
  mutation AddTodo($title: String!, $description: String!) {
    addTodo(todoInput: { title: $title, description: $description }) {
      id
      title
      description
      status
    }
  }
`;

As you can see, GET_TODOS is a GraphQL Query for retrieving all Todos from the API and a GraphQL Mutation ADD_TODO for adding a new Todo. The mutation query expects a title, and a description in order to create a new Todo on the backend.

Fetching the Todos from the GraphQL API

useRequest.ts

import { DocumentNode, useQuery, useMutation } from "@apollo/react-hooks";
import { ITodos, ITodoMutation } from "./types/Todo";

export function useTodoQuery(gqlQuery: DocumentNode) {
  const { loading, error, data } = useQuery<ITodos>(gqlQuery);
  return { loading, error, data };
}

export function useTodoMutation(gqlQuery: DocumentNode) {
  const [addTodo] = useMutation<ITodoMutation>(gqlQuery);
  return [addTodo];
}

This custom hook is optional. You can skip it and use the Apollo hooks directly in your components.

In this file, we first have a function useTodoQuery that expects a GraphQL Query to fetch all Todos from the API and then returns the data. Next, we use the useTodoMutation method to create a new Todo based on the data received as a parameter.

So far, we have connected React and Apollo and created the GraphQL queries to access the API. Next, let’s build the React components to that will consume the returned data.

Creating the components

components/Todo.ts

import * as React from "react";
import { ITodo } from "../types/Todo";

type Props = {
  todo: ITodo;
};

const Todo: React.FC<Props> = ({ todo }) => {
  const { title, description } = todo;

  return (
    <div className="Card">
      <h1>{title}</h1>
      <span>{description}</span>
    </div>
  );
};

export default Todo;

The Todo component is responsible for the display of a Todo object. It receives the data of type Itodo and then uses destructuring (JavaScript expression for unpacking values from arrays or objects into distinct variables.) to pull out the title and the description of the Todo.

components/AddTodo.ts

import * as React from "react";
import { ApolloCache } from "@apollo/react-hooks";
import { FetchResult } from "apollo-boost";

import { useTodoMutation } from "../useRequest";
import { ADD_TODO, GET_TODOS } from "../graphql";
import { ITodo, ITodoMutation, ITodos } from "../types/Todo";

const AddTodo: React.FC = () => {
  const [formData, setFormData] = React.useState<ITodo | {}>();
  const [addTodo] = useTodoMutation(ADD_TODO);

  const handleForm = (e: React.FormEvent<HTMLInputElement>) => {
    setFormData({
      ...formData,
      [e.currentTarget.id]: e.currentTarget.value
    });
  };

  const handleSaveTodo = (
    e: React.FormEvent,
    { title, description }: ITodo | any
  ) => {
    e.preventDefault();
    addTodo({
      variables: { title, description },
      update: (
        cache: ApolloCache<ITodoMutation>,
        { data: { addTodo } }: FetchResult<ITodoMutation>
      ) => {
        const cacheData = cache.readQuery({ query: GET_TODOS }) as ITodos;
        cache.writeQuery({
          query: GET_TODOS,
          data: {
            getTodos: [...cacheData.getTodos, addTodo]
          }
        });
      }
    });
  };

  return (
    <form className="Form" onSubmit={(e) => handleSaveTodo(e, formData)}>
      <div>
        <div>
          <label htmlFor="name">Title</label>
          <input onChange={handleForm} type="text" id="title" />
        </div>
        <div>
          <label htmlFor="description">Description</label>
          <input onChange={handleForm} type="text" id="description" />
        </div>
      </div>
      <button>Add Todo</button>
    </form>
  );
};

export default AddTodo;

After importing the useTodoMutation hook into our component, we pass in the GraphQL mutation query ADD_TODO as an argument. Next, we handle the data entered by the user with the handleForm function and useState. Once the user submits the form, we call the addTodo method to create the Todo with the mutation query. To preview the Todo created, we need to update the Apollo cache by spreading the old Todos with the new one in an array of Todos.

We are now able to create and display a list of Todos. Finally, let’s put it all together and use the components in the App.ts file.

Showing the Todos

App.ts

import * as React from "react";
import "./styles.css";

import { GET_TODOS } from "./graphql";
import { useTodoQuery } from "./useRequest";
import AddTodo from "./components/AddTodo";
import Todo from "./components/Todo";
import { ITodo } from "./types/Todo";

const App: React.FC = () => {
  const { loading, error, data } = useTodoQuery(GET_TODOS);

  if (loading) return <h1>Loading...</h1>;
  if (error) return <h1>Something went wrong!</h1>;

  return (
    <div className="App">
      <h1>My Todos</h1>
      <AddTodo />
      {data.getTodos.map((todo: ITodo) => (
        <Todo key={todo.id} todo={todo} />
      ))}
    </div>
  );
};

export default App;

In this App component, we use the useTodoQuery hook to retrieve all Todos from the GraphQL API. Next, we loop through the response data and display it using the Todo component.

With this step, the app is ready to be tested on the browser. Open the project directory in the CLI and run this command:

yarn start

npm start

If everything works as expected, you should be able to see the React app here: http://localhost:3000/.

app-preview

And that’s it! Our React app is looking good!

We’ve built a Todo App with React, TypeScript, GraphQL, and Apollo Client. You can preview the finished project in this CodeSandbox.

Conclusion

In this tutorial, we learned how to use GraphQL on the client-side with React, TypeScript, and Apollo Client. We also used the GraphQL API built with TypeGraphQL as a backend to finish up with a full-stack strongly-typed app. A very exciting stack to try on your next project!

Resources

Check out these resources to dive deeper into the content of this tutorial:

How to use TypeScript with GraphQL

Ibrahima Ndaw — Mon, 25 Jan 2021 22:01:27 +0000

GraphQL is a powerful query language that allows you to build flexible APIs. It lets you define a type system for your data, so when you execute a query, it returns only the data you need.

GraphQL can offer a better developer experience when used with TypeScript because they are both typed language. TypeScript is a typed superset of JavaScript that extends it by adding types. So, using these technologies together will certainly help you to build predictable and strongly-types APIs.

In this tutorial, I will first explain why combining such technologies, and then show you how to use TypeScript with GraphQL by building an API from scratch using TypeGraphQL.

Prerequisites

This tutorial assumes that you have some experience using TypeScript, particularly TypeScript classes and decorators. Knowledge of GraphQL will come in handy but is not mandatory.

In this guide, we will be using TypeGraphQL, which is a modern framework for building GraphQL API using Node.js and TypeScript.

Why use TypeScript with GraphQL

TypeScript is a popular programming language developed and maintained by Microsoft. It is a superset of JavaScript that uses static type-checking to make your code predictable.

Over the years, TypeScript has proven to be a valuable language for large codebases. TypeScript enhances code quality with its types, which adds many benefits, such as robustness, understandability, and predictability.

GraphQL solves the problem of over-fetching or under-fetching APIs. It provides one single endpoint for all requests using a Post method to get exactly the data you need, nothing more and nothing less. In this way, GraphQL makes your queries flexible, and your API readable and easy to learn.

TypeScript and GraphQL both rely on types to make your code understandable. However, GraphQL types can only be defined in a GraphQL schema using the method buildSchema or a file with .gql extension. The GraphQL types are not supported on GraphQL resolvers because resolvers are just regular JavaScript functions, not GraphQL code. TypeScript solves this issue because, as we mentioned earlier, it’s a superset of JavaScript. So, It can set types on the GraphQL resolvers. This is the reason why using TypeScript along with GraphQL makes sense.

GraphQL handles the types for the GraphQL schemas, and TypeScript sets the types on the GraphQL resolvers. However, because you are handling multiple languages, building strongly-typed APIs using Node.js, GraphQL, and TypeScript can be a challenge to maintain.

Maintaining consistency between your schema and resolvers is what TypeGraphQL intends to solve. TypeGraphQL allows you to use TypeScript classes and decorators to create the schema, types, and resolvers of your API. It uses TypeScript to build the entire GraphQL API.

illustration

So far, we have learned why pairing TypeScript with GraphQL can be useful and why TypeGraphQL is handy for building and maintaining GraphQL APIs that use TypeScript.

Without further ado, let’s dive into the practice part and build up the GraphQL API using TypeGraphQL.

Setting up

To use TypeScript and GraphQL, we first need to create a new Node.js app.

Open your command-line interface (CLI) and run this command:

yarn init

Or for npm

npm init

You’ll need to respond to a few configuration questions which will emit a package.json file. Next, install the dependencies needed for this tutorial.

yarn add express apollo-server-express graphql reflect-metadata type-graphql class-validator

For npm

npm install express apollo-server-express graphql reflect-metadata type-graphql class-validator

We will break these packages down later and explain what they do. For now, let’s install their types so TypeScript can understand the libraries.

yarn add -D @types/express @types/node nodemon

npm install -D @types/express @types/node nodemon

Note that we installed nodemon as well to enable live-reloading whenever a change occurs.

Here’s what each of the installed libraries do:

express is a minimalist web framework for Node.js
apollo-server-express is a middleware that allows using express in an Apollo GraphQL server.
reflect-metadata enables TypeScript decorators to add the ability to augment a class and its members when the class is defined. It’s a dependency of TypeGraphQL.
class-validator allows TypeGraphQL to use decorator and non-decorator based validation.

Next, we need to structure the project as follows:

src
| ├── resolvers
| |  └── todoResolver.ts
| └── schemas
| |  └── Todo.ts
| └── index.ts
├── tsconfig.json
├── package.json
└── yarn.lock

Here, there are four files to underline:

The entry point of the server (index.ts).
The schemas folder that contains the GraphQL Schema of the project.
The resolvers folder that holds the resolvers of the API.
The tsconfig.json file tells to TypeScript how to compile the code.

With this in place, we can now add a script to start the server in the package.json file.

"scripts": {
  "start": "nodemon --exec ts-node src/index.ts"
}

This script will start the server using nodemon. And whenever our code is updated, it will restart.

Let’s now configure the tsconfig.json.

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true
  }
}

These two properties should be set to true to be able to use TypeScript decorators in the project.

We can now build a GraphQL Schema for the API.

Build the GraphQL Schema

TypeGraphQL allows you to build a schema using TypeScript classes and decorators. It’s just syntactic sugar because under the hood TypeGraphQL will still generate regular GraphQL code. We will see the code generated later - for now, let’s create the schema.

schemas/Todo.ts

import { Field, ObjectType, InputType } from ‘type-graphql’

@ObjectType() export class Todo {
  @Field() id: number
  @Field() title: string
  @Field() description: string
  @Field() status: boolean
}

@InputType() export class TodoInput implements Partial {
  @Field() title: string
  @Field() description: string
}

At the first the syntax might look weird, however, it’s relatively simple to understand. It’s just TypeScript decorators and classes.

Here, the @ObjectType() provided by TypeGraphQL enables creating a new object or schema. The Todo class reflects the shape of a Todo object, and the TodoInput defines the expected data for adding a new Todo.

Now, let’s write the same code using GraphQL.

type Todo {
  id: ID!
  title: String!
  description: String!
  status: Boolean!
}

input TodoInput {
  title: String!
  description: String!
}

As you can see, the logic is the same. The only difference is that here, we don’t use TypeScript.

Now we’re ready to create our GraphQL resolvers.

Create the GraphQL resolver

Unlike GraphQL, TypeGraphQL puts the GraphQL query or mutation in the resolvers. The name of the function will be used as an endpoint when querying or mutating data.

resolvers/todoResolver.ts

import { Query, Resolver, Mutation, Arg } from ‘type-graphql’;
import { Todo, TodoInput } from ‘../schemas/Todo’;

@Resolver((of) => Todo) export class TodoResolver { 
    private todos: Todo[] = []

    @Query((returns) => [Todo], { nullable: true })
    async getTodos(): Promise<Todo[]> {
        return await this.todos
    }

    @Mutation((returns) => Todo)
    async addTodo(
        @Arg('todoInput') { title, description }: TodoInput
    ): Promise<Todo> {
        const todo = {
            id: Math.random(), // not really unique
            title,
            description,
            status: false,
        }

        await this.todos.push(todo)
        return todo
    }
}

Here, we use the Resolver decorator to create a new GraphQL resolver that returns a Todo. Next, we build a GraphQL query to fetch all Todos.

After that, we define a mutation query that expects a title, and a description to add a new Todo on the array of data.

By the way, you don’t need to use async/await here, because this won’t take time to complete. But, I add it here for reference when you need to deal with a real server.

Let’s now convert the code to GraphQL.

type Mutation {
  addTodo(todoInput: TodoInput!): Todo!
}

type Query {
  getTodos: [Todo!]
}

With this in place, we can build the server that uses the schema and resolver we’ve just created.

Create the Server

src/index.ts

import ‘reflect-metadata’;
import { ApolloServer } from ‘apollo-server-express’;
import * as Express from ‘express’ import { buildSchema } from ‘type-graphql’;
import { TodoResolver } from ‘./resolvers/todoResolver’;

async function main() { const schema = await buildSchema({ resolvers: [TodoResolver], emitSchemaFile: true, })

    const app = Express()

    const server = new ApolloServer({
        schema,
    })

    server.applyMiddleware({ app })

    app.listen(4000, () =>
        console.log('Server is running on http://localhost:4000/graphql')
    )

}

main()

As you can see here, we import TodoResolver, which needs to be passed as a resolver to the buildSchema method. With that, TypeGraphQL can build a new GraphQL Schema based on the Todo resolver.

Next, we pass the schema object (it contains the GraphQL schemas and resolvers) to Apollo to create the server.

Setting the property emitSchemaFile: true allows TypeGraphQL to generate a schema.gql file at build-time.

Let’s check if the app works. Run the following command:

yarn start

npm start

Visit http://localhost:4000/graphql, and then add this code block below to GraphQL Playground to create a new Todo.

mutation {
  addTodo(todoInput: { title: "Todo 1", description: "This is my todo" }) {
    title
    description
    status
  }
}

The Todo object should be created successfully!

todo-created

Now query for the newly created Todo using the following GraphQL query.

{
  getTodos {
    title
    description
    status
  }
}

You should see that all Todos have been returned.

all-todos

Great! Our app looks good.

We have now finished building a GraphQL API using TypeScript.

You can find the finished project in this Github repo

Thanks for reading

GraphQL in TakeShape

TakeShape provides a flexible GraphQL API to manage your content easily. It gives you the ability to immediately see how changes to your content model will impact your API using the API Explorer. You don’t have to build any backend on your own, everything is set up for you. TakeShape automatically generates a secure GraphQL API to expose all of your content and services.

Next steps

Check out these resources to dive deeper into the content of this tutorial:

Scalable APIs with GraphQL and Netlify Functions

Ibrahima Ndaw — Fri, 22 Jan 2021 15:36:49 +0000

In this tutorial, we will be exploring serverless functions by learning how to use them with GraphQL to build scalable APIs.

What is serverless?

A serverless function is a way for adding a backend to your app without managing a server, virtual machine, or docker container. Behind every serverless function invocation is a server hosted and managed by a cloud provider such as AWS, Google Cloud, Netlify, Vercel, and so on. The providers are abstracting away a lot of the complexity so you can focus on just what your function needs to do. Serverless functions are basically functions-as-a-service.

What we’re building

In this tutorial, we will be using Netlify Functions, which are built on top of AWS Lambda Functions. We’ll be building a Project Tracker with GraphQL, serverless functions, and Airtable. We will be using The Airtable API to create and retrieve projects. Let’s get started!

Setting up

Before we get into creating a new lambda function, we need to sign up for an Airtable account to be able to use it as a DB. After you create an account, open your command-line interface and running the following:

npm install netlify-cli -g

This command will install Netlify CLI, which we will us to create a new serverless function. Next we need to set up our project, execute the following:

mkdir functions && touch netlify.toml

The command will first create a new folder named functions then will create a new file netlify.toml at the root. Netlify uses this file to configure the resources you’ll be using, in this case functions. With this in place, add the following code below to netlify.toml.

// netlify.toml

[build]
    functions = "functions"

These two lines tell Netlify that our serverless functions live in a folder named functions. Now, open your CLI and make sure to be in the folder that contains the functions folder.

netlify functions:create serverless-graphql

The Netlify CLI will prompt you with options to choose between several ready to use templates. Choose the one named >[apollo-graphql] GraphQL function using Apollo-Server-Lambda!. It’s the starter for the serverless function that uses Apollo GraphQL. Once the project is initialized, cd into the functions folder, then install the Airtable SDK.

npm install airtable

Next, create a .env file at the root of the project and replace the variables with your credentials.

// .env

AIRTABLE_API_KEY=<your-api-key>
AIRTABLE_BASE_ID=<your-table-base-id>
AIRTABLE_TABLE_NAME=<your-table-name>

AIRTABLE_API_KEY is your API key on your Airtable account.
AIRTABLE_BASE_ID is the id of your DB table (see here).
AIRTABLE_TABLE_NAME is the name given to your table.

With our setup and configuration complete, we can dive into coding our serverless function.

Building the serverless function with GraphQL

First, structure the project like so:

functions
├── graphql.js
├── utils
|  └── airtable.js
└── package.json

As you can see, the logic to interact with Airtable is holden by the file airtable.js. The entry point of the serverless function is graphql.js.

Connecting with Airtable

Let’s add the code below to the file airtable.js.

// utils/airtable.js

const Airtable = require('airtable')

const { AIRTABLE_API_KEY, AIRTABLE_BASE_ID, AIRTABLE_TABLE_NAME } = process.env

const base = new Airtable({ apiKey: AIRTABLE_API_KEY }).base(AIRTABLE_BASE_ID)

const table = base(AIRTABLE_TABLE_NAME)

const getAllProjects = async () => {
  const allProjects = await table.select({}).firstPage()
  return allProjects.map(({ id, fields }) => transformResponse(id, fields))
}

const addProject = async ({ project }) => {
  const { name, description, date } = project
  const createProject = await table.create([
    {
      fields: {
        name,
        description,
        date,
        status: 'In progress',
      },
    },
  ])
  const { id, fields } = createProject[0]
  return transformResponse(id, fields)
}

const transformResponse = (id, fields) => ({
  id,
  name: fields.name,
  description: fields.description,
  date: fields.date,
  status: fields.status,
})

exports.getAllProjects = getAllProjects
exports.addProject = addProject

Airtable allows us to connect our app to Airtable with the credentials passed in as arguments to it. After that, we initialize the DB table with the table constant.

Next, we retrieve all projects from Airtable using the function getAllProjects(). To add a new project, we rely on the method addProject(), which receives the object to add as a parameter. Finally, we use the method table.create() to persist the data on the DB.

Now, we have the functions needed to add and fetch the projects from Airtable. Let’s use them in the file graphql.js to perform the queries.

Creating the API with GraphQL

// graphql.js

const { ApolloServer, gql } = require('apollo-server-lambda')
const { getAllProjects, addProject } = require('./utils/airtable')

const typeDefs = gql`
  type Project {
    id: ID
    name: String
    description: String
    date: String
    status: String
  }
  input ProjectInput {
    name: String
    description: String
    date: String
  }
  type Query {
    getProjects: [Project]
    addProject(project: ProjectInput): Project
  }
`

const resolvers = {
  Query: {
    getProjects: () => {
      try {
        const allRecords = getAllProjects()
        return allRecords
      } catch (error) {
        throw new Error(error)
      }
    },
    addProject: (_, args) => {
      try {
        const createProject = addProject(args)
        return createProject
      } catch (error) {}
    },
  },
}

const server = new ApolloServer({
  typeDefs,
  resolvers,
})

const handler = server.createHandler()

module.exports = { handler }

If you have experience with Apollo Server, you should already notice that the library used here (apollo-server-lambda) is different from the one used for building servers. This package uses middleware to inject our lambda serverless function to Apollo Server.

Next , we import the functions getAllProjects and addProject from airtable.js. With this, we can define a new GraphQL Schema using gql. The query getProjects has to return an array of type Project. The method addProject expects an object of type ProjectInput as a parameter and should return a value that reflects the Project type.

Any GraphQL Schema has to have a GraphQl resolver that corresponds to it. That’s why, here, we have on the resolvers object, the functions getProjects() and addProject(). The first fetch all projects from Airtable and the second add a new object to the table.

Now, we have a schema and a resolver. We need to pass in the values to the constant server to let it handle the request when the endpoint /graphql is hit.

Testing the GraphQL API

With this step, the serverless app is ready to be tested in the browser. So, begin by browsing to the root of the project and running this command:

netlify dev

Our serverless function should be up and running and accessible here:

The app will land on the GraphQL Playground. It’s a neat tool built on top of GraphiQL. It’s a GraphQL IDE for sending queries or mutations, exploring the API docs, sending HTTP headers, and more.

http://localhost:8888/.netlify/functions/graphql

Now, add this code block below to create a new project.

mutation {
  addProject(project: { name: "My first project", description: "First project's description", date: "2020-12-11" }) {
    name
    description
    date
    status
  }
}

After sending the query, you should see this:

create-post

{
  getProjects {
    id
    name
    description
    date
    status
  }
}

Once all projects are fetched, the result should look like this:

get-all-posts

Next steps

Awesome! Our serverless function is looking nice. We’ve built a GraphQL API using serverless functions and Airtable. Let’s now deploy it to Netlify!

To do so, we first need to sign up here. Then, initialize our app with git. Make sure to be at the root of the project before executing the following.

git init

Add a .gitignore file at the root of the project.

touch .gitignore

Add this code block to ignore the files listed below when adding changes to git.

// .gitignore

/functions/node_modules
/functions/.env

Add and commit changes to git.

git add -A && git commit -m 'Ready to deploy on Netlify'

Create a new repository on Github and follow the steps to push your project. Next, go to Netlify and connect your Github repo. Move the package.json file to the root of the project, then create the environment variables on Netlify.

Deploy your serverless functions. We can now preview and interact with our app here: https://graphql-airtable.netlify.app/.netlify/functions/graphql

You can find the finished project in this Github repo. Thanks for reading!

Conclusion

Serverless is an exciting piece of technology. It allows us to build up a backend quickly without the hassle of managing a server, which brings us to the JAMStack. An architecture designed to make the web faster, more secure, and easier to scale with static sites and serverless functions.

Unit Testing Your Gatsby Site with Jest and React Testing library

Ibrahima Ndaw — Thu, 21 Jan 2021 21:15:40 +0000

Testing is a crucial piece when it comes to building websites or apps. It gives you more confidence in your product, makes your code better, and helps to avoid unexpected bugs in production.

In this tutorial, we will introduce you to unit testing by showing you how to test your Gatsby site with Jest and the React Testing Library. Let's get started.

Creating a new Gatsby app

To keep us focused on testing, we’ll use an out of the box Gatsby starter template. To use a Gatsby starter, begin by opening your command-line interface (CLI) and run this command:

npx gatsby new my-blog-starter https://github.com/gatsbyjs/gatsby-starter-blog

Note - If you have the Gatsby CLI installed on your machine, you can omit *npx*.

Next we will set up the testing environment. Unlike React, Gatsby does not ship with Jest or React Testing Library, so we’ll install those now.

Setting up our testing environment

Execute the command on the CLI to install the libraries needed for testing a Gatsby site.

NPM

npm install -D jest babel-jest @testing-library/jest-dom @testing-library/react babel-preset-gatsby identity-obj-proxy

Yarn

yarn add -D jest babel-jest @testing-library/jest-dom @testing-library/react babel-preset-gatsby identity-obj-proxy

With the dependencies installed, we can now create a new folder (tests) at the root of the project. The directory structure should look like this:

    tests
    ├── jest-preprocess.js
    ├── setup-test-env.js
    └── __mocks__
        ├── file-mock.js
        └── gatsby.js

With the folder structure in place, next we configure Jest. Let's begin with jest-preprocess.js

    // tests/jest-preprocess.js
    const babelOptions = {
      presets: ["babel-preset-gatsby"],
    }
    module.exports = require("babel-jest").createTransformer(babelOptions)

This config tells Gatsby how to compile our tests with Babel because both Gatsby and Jest use modern JavaScript and JSX.

    // tests/setup-test-env.js
    import "@testing-library/jest-dom/extend-expect"

As you can see, this file allows us to import jest-dom in one place and then use it on every test file.

    // tests/__mocks__/file-mock.js
    module.exports = "test-file-stub"

If you need to mock static assets, then this file is required to do so. We won't have that use-case, but be aware of what it does.

    // tests/__mocks__/gatsby.js
    const React = require("react")
    const gatsby = jest.requireActual("gatsby")
    module.exports = {
      ...gatsby,
      graphql: jest.fn(),
      Link: jest.fn().mockImplementation(
        // these props are invalid for an `a` tag
        ({
          activeClassName,
          activeStyle,
          getProps,
          innerRef,
          partiallyActive,
          ref,
          replace,
          to,
          ...rest
        }) =>
          React.createElement("a", {
            ...rest,
            href: to,
          })
      ),
      StaticQuery: jest.fn(),
      useStaticQuery: jest.fn(),
    }

This file allows us to mock some Gatsby features in order to query data with GraphQL or use the Link component. Make sure to name the folder __mocks__ and the file gatsby.js — otherwise, Gatsby will throw errors.

With this configuration in place, we can dive into Jest and customize it to follow our needs. Let's begin by creating a jest.config.js file in the root of the project and then add this code below.

    // jest.config.js
    module.exports = {
      transform: {
        "^.+\\.jsx?$": `<rootDir>/tests/jest-preprocess.js`,
      },
      moduleNameMapper: {
        ".+\\.(css|styl|less|sass|scss)$": `identity-obj-proxy`,
        ".+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": `<rootDir>/tests/__mocks__/file-mock.js`,
      },
      testPathIgnorePatterns: [`node_modules`, `\\.cache`, `<rootDir>.*/public`],
      transformIgnorePatterns: [`node_modules/(?!(gatsby)/)`],
      globals: {
        __PATH_PREFIX__: ``,
      },
      setupFilesAfterEnv: ["<rootDir>/tests/setup-test-env.js"],
    }

This file can look confusing at first, but it's relatively easy to grasp. Let's break it down:

transform use Babel to compile the JSX code.
moduleNameMapper mock the static assets.
testPathIgnorePatterns exclude the folders listed in the array when running the tests.
transformIgnorePatterns exclude the folders listed in the array when transforming the JSX code.
globals indicate to Jest the folders to test.
setupFilesAfterEnv import jest-dom before test runs.

The last step of the config consists of tweaking the package.json file to run Jest with the CLI.

    // package.json
      "scripts": {
        "test": "jest"
      }

Phew! The setting up is complete. Let's now start writing our tests in the next section.

Writing the unit tests

Unit testing is a method that ensures that a section of an application behaves as intended.
In this article, we will be testing the SEO component and the Home page (index.js). Let's structure the folder as follows:

    src
    ├── components
    | ├── seo.js
    | ├── bio.js
    | ├── layout.js
    | └── __tests__
    | |    |   └── seo.js
    ├── pages
    | ├── 404.js
    | ├── index.js
    | └── __tests__
    | |    |   └── index.js

You can use .spec or .test to create a testing file or put the files in the __tests__ folder. Jest will only execute the files under the __tests__ folder.

    // components/seo.js
    import React from "react"
    import PropTypes from "prop-types"
    import { Helmet } from "react-helmet"
    import { useStaticQuery, graphql } from "gatsby"

    const SEO = ({ description, lang, meta, title }) => {
      const { site } = useStaticQuery(
        graphql`
          query {
            site {
              siteMetadata {
                title
                description
                social {
                  twitter
                }
              }
            }
          }
        `
      )

      const metaDescription = description || site.siteMetadata.description
      const defaultTitle = site.siteMetadata?.title

      return (
        <Helmet
          htmlAttributes={{
            lang,
          }}
          title={title}
          titleTemplate={defaultTitle ? `%s | ${defaultTitle}` : null}
          meta={[
            {
              name: `description`,
              content: metaDescription,
            },
            {
              property: `og:title`,
              content: title,
            },
            {
              property: `og:description`,
              content: metaDescription,
            },
            {
              property: `og:type`,
              content: `website`,
            },
            {
              name: `twitter:card`,
              content: `summary`,
            },
            {
              name: `twitter:creator`,
              content: site.siteMetadata?.social?.twitter || ``,
            },
            {
              name: `twitter:title`,
              content: title,
            },
            {
              name: `twitter:description`,
              content: metaDescription,
            },
          ].concat(meta)}
        />
      )
    }

    SEO.defaultProps = {
      lang: `en`,
      meta: [],
      description: ``,
    }

    SEO.propTypes = {
      description: PropTypes.string,
      lang: PropTypes.string,
      meta: PropTypes.arrayOf(PropTypes.object),
      title: PropTypes.string.isRequired,
    }

    export default SEO

Now, let's write the unit tests for the SEO component.

    // components/__tests__/seo.js
    import React from "react"
    import { render } from "@testing-library/react"
    import { useStaticQuery } from "gatsby"

    import Helmet from "react-helmet"
    import SEO from "../seo"

    describe("SEO component", () => {
      beforeAll(() => {
        useStaticQuery.mockReturnValue({
          site: {
            siteMetadata: {
              title: `Gatsby Starter Blog`,
              description: `A starter blog demonstrating what Gatsby can do.`,
              social: {
                twitter: `kylemathews`,
              },
            },
          },
        })
      })

      it("renders the tests correctly", () => {
        const mockTitle = "All posts | Gatsby Starter Blog"
        const mockDescription = "A starter blog demonstrating what Gatsby can do."
        const mockTwitterHandler = "kylemathews"

        render(<SEO title="All posts" />)
        const { title, metaTags } = Helmet.peek()

        expect(title).toBe(mockTitle)
        expect(metaTags[0].content).toBe(mockDescription)
        expect(metaTags[5].content).toBe(mockTwitterHandler)
        expect(metaTags.length).toBe(8)
      })
    })

We start by importing React Testing Library, which allows rendering the component and giving access to DOM elements. After that, we mock the GraphQL query with useStaticQuery to provide the data to the SEO component.

Next, we rely on the render method to render the component and pass in the title as props. With this, we can use Helmet.peek() to pull the metadata from the mocked GraphQL query.

Finally, we have four test cases:

It tests if the title from the metadata is equal to All posts | Gatsby Starter Blog.
It checks if the description from the metadata is equal to A starter blog demonstrating what Gatsby can do..
It tests if the twitter from the metadata is equal to kylemathews.
It checks if the length of the metaTags array is equal to 8.

To run the tests, we have to execute this command on the CLI.

npm test

Or, for yarn

yarn test

All tests should pass as expected by showing some nice green sticks on the CLI.

    // pages/index.js

    import React from "react"
    import { Link, graphql } from "gatsby"

    import Bio from "../components/bio"
    import Layout from "../components/layout"
    import SEO from "../components/seo"

    const BlogIndex = ({ data, location }) => {
      const siteTitle = data.site.siteMetadata?.title || `Title`
      const posts = data.allMarkdownRemark.nodes
      if (posts.length === 0) {
        return (
          <Layout location={location} title={siteTitle}>
            <SEO title="All posts" />
            <Bio />
            <p>
              No blog posts found. Add markdown posts to "content/blog" (or the
              directory you specified for the "gatsby-source-filesystem" plugin in
              gatsby-config.js).
            </p>
          </Layout>
        )
      }

      return (
        <Layout location={location} title={siteTitle}>
          <SEO title="All posts" />
          <Bio />
          <ol style={{ listStyle: `none` }}>
            {posts.map(post => {
              const title = post.frontmatter.title || post.fields.slug
              return (
                <li key={post.fields.slug}>
                  <article
                    className="post-list-item"
                    itemScope
                    itemType="http://schema.org/Article"
                  >
                    <header>
                      <h2>
                        <Link
                          data-testid={post.fields.slug + "-link"}
                          to={post.fields.slug}
                          itemProp="url"
                        >
                          <span itemProp="headline">{title}</span>
                        </Link>
                      </h2>
                      <small>{post.frontmatter.date}</small>
                    </header>
                    <section>
                      <p
                        data-testid={post.fields.slug + "-desc"}
                        dangerouslySetInnerHTML={{
                          __html: post.frontmatter.description || post.excerpt,
                        }}
                        itemProp="description"
                      />
                    </section>
                  </article>
                </li>
              )
            })}
          </ol>
        </Layout>
      )
    }

    export default BlogIndex
    export const pageQuery = graphql`
      query {
        site {
          siteMetadata {
            title
          }
        }
        allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
          nodes {
            excerpt
            fields {
              slug
            }
            frontmatter {
              date(formatString: "MMMM DD, YYYY")
              title
              description
            }
          }
        }
      }
    `

Notice that here, we use data-testid on some elements to be able to select them from the testing file. Let's write the unit tests for the home page.

    //pages/__tests__/index.js
    import React from "react"
    import { render } from "@testing-library/react"
    import { useStaticQuery } from "gatsby"

    import BlogIndex from "../index"

    describe("BlogIndex component", () => {
      beforeEach(() => {
        useStaticQuery.mockReturnValue({
          site: {
            siteMetadata: {
              title: `Gatsby Starter Blog`,
              description: `A starter blog demonstrating what Gatsby can do.`,
              social: {
                twitter: `kylemathews`,
              },
            },
          },
        })
      })
      it("renders the tests correctly", async () => {
        const mockData = {
          site: {
            siteMetadata: {
              author: "John Doe",
            },
          },
          allMarkdownRemark: {
            nodes: [
              {
                excerpt: "This is my first excerpt",
                fields: {
                  slug: "first-slug",
                },
                frontmatter: {
                  date: "Nov 11, 2020",
                  title: "My awesome first blog post",
                  description: "My awesome first blog description",
                },
              },
              {
                excerpt: "This is my second excerpt",
                fields: {
                  slug: "second-slug",
                },
                frontmatter: {
                  date: "Nov 12, 2020",
                  title: "My awesome second blog post",
                  description: "My awesome second blog description",
                },
              },
            ],
          },
        }

        const { getByTestId } = render(
          <BlogIndex data={mockData} location={window.location} />
        )

        const { nodes } = mockData.allMarkdownRemark
        const post1 = "first-slug-link"
        const post2 = "second-slug-desc"

        expect(getByTestId(post1)).toHaveTextContent(nodes[0].frontmatter.title)
        expect(getByTestId(post2)).toHaveTextContent(
          nodes[1].frontmatter.description
        )
        expect(nodes.length).toEqual(2)
      })
    })

As you can see, we start by mocking the GraphQL query. Next, we create the dummy data and then pass in the object to the BlogIndex component.

After that, we pull out getTestId from the render method, which enables us to select elements from the DOM. With this in place, we can now explain what the tests do:

It tests if the title of the Link component of the first article is equal to My awesome first blog post
It test if the description of the second article is equal to My awesome second blog description.
It tests if the array of articles is equal to 2.

Now, execute this command on the CLI.

npm test

Or, for yarn

yarn test

All unit tests should pass.
With this final step, we are now able to test our Gatsby site with Jest and React Testing Library. You can find the finished project in this Github repo.

Conclusion

In this tutorial, we learned how to test a Gatsby site with Jest and React Testing Library. Testing is often seen as a tedious process, but the more you dig into it, the more value you get on your app.

Data fetching in Next.js — How To Use SWR

Ibrahima Ndaw — Wed, 04 Nov 2020 17:07:15 +0000

Next.js offers several ways for fetching data since it supports both client and server-side rendering. One is by using SWR, which is a set of React hooks for remote data fetching.

In this tutorial, we will be looking at SWR, a library that makes things easier, such as caching, pagination, revalidation, and so on. We will also build a Next app (client-side) that retrieves data from JSON Placeholder using SWR.

What is SWR?
Setting up
Fetching the data with useSWR
Creating the components
Paginating the data with useSWRInfinite

Let's get started!

What is SWR?

SWR stands for stale-while-revalidate. It's a lightweight library created by the same team behind Next.js. It allows fetching, caching, or refetching data in realtime with React Hooks. SWR proceeds in three steps: first, it returns the cache (stale), then fetch the data from the server (revalidation), and finally come with the up-to-date data. This way, SWR increases your user experience by letting you show something to your user while retrieving the new data from the server.

SWR is backend agnostic, meaning that you can use it to retrieve data from any server that supports HTTP requests. It has as well good support for TypeScript and server-side rendering.

That said, we can get hands dirty and setting up a new Next.js app to use the SWR features.

Setting up

To set up a new app, we'll go for Create Next App.
Begin by opening your command-line interface (CLI) and running this command:

    npx create-next-app next-swr-app

Install SWR package:

    npm install swr

Next, structure the folder like so:

├── components
| └── Post.js
├── pages
| └── index.js
├── useRequest.js
└── package.json

Let's break down the file structure:

Post.js is the component responsible for the display of the post object.
index.js is the home page of our app.
useRequest.js is a custom hook that helps fetch the data using SWR.

With this folder structure in place, we can start retrieving the remote data from JSON Placeholder in the next section.

Fetching the data with `useSWR`

To fetch remote data with SWR, we can use either useSWR or useSWRInfinite. However, there are some differences between the hooks. The first is used for just data fetching, while the second hook enables retrieving and paginating data. You can use useSWRInfinite to add infinite scroll or pagination in your Next.js app in no-time.

Now, let's explore the file useRequest.js:

import useSWR from "swr"

const fetcher = url => fetch(url).then(res => res.json())
const baseUrl = "https://jsonplaceholder.typicode.com"

export const useGetPosts = path => {
  if (!path) {
    throw new Error("Path is required")
  }

  const url = baseUrl + path

  const { data: posts, error } = useSWR(url, fetcher)

  return { posts, error }
}

Using this custom hook for fetching data is optional. You can alternatively use the SWR hooks directly in your components.

The fetcher function enables us to send the HTTP request to the server and then parse the response data to JSON. The fetch method comes from the unfetch package that ships with Next.js.

Next, we use the useGetPosts function to send the query with the useSWR hook. It expects to receive as arguments the url of the server and a fetcher function to execute the query. Once the data is retrieved, we return the fetched posts and an error state.

With this custom hook ready to use, we can now create the components to display the posts fetched.

Creating the components

components/Post.js

export default function Post({ post }) {
  const { title, body, id } = post
  return (
    <div className="Card">
      <h1 className="Card--title">
        {id}. {title}
      </h1>
      <p className="Card--body">{body}</p>
    </div>
  )
}

As you can see, we have a simple component that receives the post to display as a parameter. Then, we use destructuring to pull out the elements from the object in order to show the post.

App.js

import { useGetPosts } from "../useRequest"
import Post from "../components/Post"

export default function IndexPage() {
  const { posts, error } = useGetPosts("/posts")

  if (error) return <h1>Something went wrong!</h1>
  if (!posts) return <h1>Loading...</h1>

  return (
    <div className="container">
      <h1>My Posts</h1>
      {posts.map(post => (
        <Post post={post} key={post.id} />
      ))}
    </div>
  )
}

Here, we start by importing the useGetPosts hook and then pass in the path as an argument to perform the request. It returns the posts to show and an error state.

After that, we use the Post component to display the array of data. If any error occurs, we handle it accordingly with the error provided by SWR.

With this step forward, we can check if everything works in the browser. To do so, open the project on the CLI and run the following command:

  yarn dev

Or for npm

  npm run dev

Let's visit on the browser http://localhost:3000

Great! Our data are successfully fetched from the server using the useSWR hook.

As we said earlier, SWR provides another hook that allows paginating data easily. Let's update our app with useSWRInfinite.

Paginating the data with `useSWRInfinite`

It's still possible to use the useSWR hook to paginate the data, but I don't recommend that since it's extra code and SWR already offers useSWRInfinite to do it.

useRequest.js

import { useSWRInfinite } from "swr"

const fetcher = url => fetch(url).then(res => res.json())
const baseUrl = "https://jsonplaceholder.typicode.com"

export const usePaginatePosts = path => {
  if (!path) {
    throw new Error("Path is required")
  }

  const url = baseUrl + path
  const PAGE_LIMIT = 5

  const { data, error, size, setSize } = useSWRInfinite(
    index => `${url}?_page=${index + 1}&_limit=${PAGE_LIMIT}`,
    fetcher
  )

  const posts = data ? [].concat(...data) : []
  const isLoadingInitialData = !data && !error
  const isLoadingMore =
    isLoadingInitialData ||
    (size > 0 && data && typeof data[size - 1] === "undefined")
  const isEmpty = data?.[0]?.length === 0
  const isReachingEnd =
    isEmpty || (data && data[data.length - 1]?.length < PAGE_LIMIT)

  return { posts, error, isLoadingMore, size, setSize, isReachingEnd }
}

The useSWRInfinite hook expects as an argument a function that returns the request key, a fetcher function, and options. The request key (index) is what SWR uses to know what data (page) to retrieve. The initial value of the request key is 0, so we have to increment it by 1 upon each request. The second argument to define on the URL is PAGE_LIMIT, which is the number of items to fetch per request.

useSWRInfinite returns more values than that. I removed the data that I don't need here. Let's explain what these variables do:

posts is the array of the data fetched from the server.
isLoadingInitialData checks if there is still data to retrieve.
isLoadingMore checks if we're currently retrieving data.
isEmpty checks whether the array of data is empty or not.
isReachingEnd checks if the page limit is reached or not.

Next, we return the values in order to use them in our components.

App.js

import { usePaginatePosts } from "../useRequest"

import Post from "../components/Post"

export default function IndexPage() {
  const {
    posts,
    error,
    isLoadingMore,
    size,
    setSize,
    isReachingEnd,
  } = usePaginatePosts("/posts")

  if (error) return <h1>Something went wrong!</h1>
  if (!posts) return <h1>Loading...</h1>

  return (
    <div className="container">
      <h1>My Posts with useSWRInfinite</h1>
      {posts.map(post => (
        <Post post={post} key={post.id} />
      ))}
      <button
        disabled={isLoadingMore || isReachingEnd}
        onClick={() => setSize(size + 1)}
      >
        {isLoadingMore
          ? "Loading..."
          : isReachingEnd
          ? "No more posts"
          : "Load more"}
      </button>
    </div>
  )
}

Here, we first import usePaginatePosts and then pass in the API endpoint as an argument. Next, we use the values returned by the hook to display the posts and to load new data. Once the load more button clicked, SWR will send the request to the next page and then return the data. With this in place, the data now are paginated using the useSWRInfinite hook.

With this step, we can test if the pagination works by running this command on the CLI:

  yarn dev

Let's visit on the browser http://localhost:3000

And that's it! Our app is looking good!

We are done using the SWR library on the client-side with Next.js. You can find the finished project on this CodeSandbox.

You can find other great content like this on my blog or follow me on Twitter to get notified.

Thanks for reading!

A Complete Beginner's Guide to Routing in Next.js

Ibrahima Ndaw — Thu, 01 Oct 2020 18:33:44 +0000

Next.js is a React framework that ships with all the features you need for production. Next.js enables routing in your app by using the file-system-based routing. In this guide, I will show you how routing works in Next.js.

This article is part of a series about Next.js. Feel free to subscribe to my newsletter to receive the next one in your inbox.

If you're interested in learning Next.js in a comprehensive way, I highly recommend this bestseller course.

Let's dive in.

How Routing works in Next.js?
Linking between pages
Passing route parameters
Dynamic routes
Dynamic nested routes

How Routing works in Next.js?

Next.js uses the file system to enable routing in the app. Next treats automatically every file with the extensions .js, .jsx, .ts, or .tsx under the pages directory as a route. A page in Next.js is a React component that has a route based on its file name.

Consider this folder structure as an example:

├── pages
|  ├── index.js
|  ├── contact.js
|  └── my-folder
|     ├── about.js
|     └── index.js

Here, we have four pages:

index.js is the home page accessible on http://localhost:3000
contact.js is the contact page accessible on http://localhost:3000/contact
my-folder/index.js is the page located on the sub-folder my-folder accessible on http://localhost:3000/my-folder
my-folder/about.js is the about page located on the sub-folder my-folder accessible on http://localhost:3000/my-folder/about

Linking between pages

By default, Next.js pre-renders every page to makes your app fast and user-friendly. It uses the Link component provided by next/link to enable transitions between routes.

import Link from "next/link"

export default function IndexPage() {
  return (
    <div>
      <Link href="/contact">
        <a>My second page</a>
      </Link>
      <Link href="/my-folder/about">
        <a>My third page</a>
      </Link>
    </div>
  )
}

Here, we have two routes:

The first link leads to the page http://localhost:3000/contact
The second link leads to the page http://localhost:3000/my-folder/about

The Link component can receive several properties, but only the href attribute is required. Here, we use a <a></a> tag as a child component to link pages. But, you can use alternatively any element that supports the onClick event on the Link component.

Passing route parameters

Next.js allows you to pass route parameters and then get back the data using the useRouter hook or getInitialProps. It gives you access to the router object that contains the params.

index.js

import Link from "next/link"

export default function IndexPage() {
  return (
    <Link
      href={{
        pathname: "/about",
        query: { id: "test" },
      }}
    >
      <a>About page</a>
    </Link>
  )
}

As you can see here, instead of providing a string to the href attribute, we pass in an object that contains a pathname property which is the route, and a query element that holds the data.

about.js

import { useRouter } from "next/router"

export default function AboutPage() {
  const router = useRouter()
  const {
    query: { id },
  } = router
  return <div>About us: {id}</div>
}

Here, we import the useRouter hook to get the data passed in. Next, we pull it from the query object using destructuring.

If you are using server-side rendering, you have to use getInitialProps to get the data.

export default function AboutPage({ id }) {
  return <div>About us: {id}</div>
}

AboutPage.getInitialProps = ({ query: { id } }) => {
  return { id }
}

Dynamic routes

Next.js enables you to define dynamic routes in your app using the brackets ([param]). Instead of setting a static name on your pages, you can use a dynamic one.

Let's use this folder structure as an example:

├── pages
|  ├── index.js
|  ├── [slug].js
|  └── my-folder
|     ├── [id].js
|     └── index.js

Next.js will get the route parameters passed in and then use it as a name for the route.

index.js

export default function IndexPage() {
  return (
    <ul>
      <li>
        <Link href="/">
          <a>Home</a>
        </Link>
      </li>
      <li>
        <Link href="/[slug]" as="/my-slug">
          <a>First Route</a>
        </Link>
      </li>
      <li>
        <Link href="/my-folder/[id]" as="/my-folder/my-id">
          <a>Second Route</a>
        </Link>
      </li>
    </ul>
  )
}

Here, we have to define the value on the as attribute because the path is dynamic. The name of the route will be whatever you set on the as prop.

[slug].js

import { useRouter } from "next/router"

export default function DynamicPage() {
  const router = useRouter()
  const {
    query: { id },
  } = router
  return <div>The dynamic route is {id}</div>
}

You can get the route parameters as well with the useRouter hook on the client or getInitialProps on the server.

my-folder/[id].js

export default function MyDynamicPage({ example }) {
  return <div>My example is {example}</div>
}

MyDynamicPage.getInitialProps = ({ query: { example } }) => {
  return { example }
}

Here, we use getInitialProps to get the dynamic route passed in.

Dynamic nested routes

With Next.js, you can also nest dynamic routes with the brackets ([param]).

Let's consider this file structure:

├── pages
|  ├── index.js
|  └── [dynamic]
|     └── [id].js

index.js

export default function IndexPage() {
  return (
    <ul>
      <li>
        <Link href="/">
          <a>Home</a>
        </Link>
      </li>
      <li>
        <Link href="/[dynamic]/[id]" as="/my-folder/my-id">
          <a>Dynamic nested Route</a>
        </Link>
      </li>
    </ul>
  )
}

As you can see here, we set the dynamic values on the as attribute as we did in the previous example. But this time, we have to define the name of the folder and its file.

import { useRouter } from "next/router"

export default function DynamicPage() {
  const router = useRouter()
  const {
    query: { dynamic, id },
  } = router
  return (
    <div>
      Data: {dynamic} - {id}
    </div>
  )
}

Here, we pull out the route parameters from the query object with the useRouter hook.

That's it! Thanks for reading

You can find other great content like this on my blog or follow me on Twitter to get notified.

Photo by Javier Allegue Barros on Unsplash

Introduction Guide to Next.js

Ibrahima Ndaw — Tue, 22 Sep 2020 18:30:34 +0000

Next.js is a React framework that ships with all the features you need for production. It gives you the best developer experience because it comes with several functionalities that would have been installed and handled on your own in a "vanilla" React app. In this guide, I will introduce you to Next.js by first explaining what Next is and why use such a tool, and then create a basic app with it.

This article is part of a series about Next.js. So feel free to subscribe to my newsletter to receive the next article in your inbox, if you find value on it.

If you're interested in learning Next.js in a comprehensive way, I highly recommend this bestseller course.

Let's dive in.

What is Next.js?

Next.js is a framework built with React, Node.js, Babel, and Webpack. It comes by default with handy features that are not available in a "vanilla" React App.

Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.

Next.js allows you to export your website statically to HTML or render it on the server. It splits your code automatically, which makes your bundle size small and your app fast, because, in the end, only the JavaScript needed will be loading on the browser.

Next.js enables routing in your app by using the file-system-based routing. It will automatically use files located on the pages folder as a route, meaning that you even do not need to add an extra library to build a Multi-pages app with Next.

The Next.js framework provides a straightforward solution to build your API using API routes. You can build your entire API with GraphQL, Express, or your favorite framework and then connect it to a database using API routes. Next.js treats files under the pages/api directory as API endpoints.

Unlike React, Next has built-in support for Styled JSX, Sass, CSS modules, and more, which make Next.js app easy to style.

Creating a Next app

A Next.js app can be created manually or with Create Next App. We will go for the latter because it is the recommended way, and it will set up everything automatically for us.

So, open you your command-line interface (CLI) and run this following command:

  npx create-next-app my-app

Once the project is created, let's now explore the file structure:

File structure

├── pages
|  ├── api
|  |  └── hello.js
|  ├── index.js
|  └── _app.js
├── styles
|  ├── globals.css
|  └── Home.module.css
├── package.json
└── yarn.lock
├── README.md

As I mentioned earlier, Next.js uses the file system to enable routing in the app. Here, the index.js file is the Home page of the project. If you add a new file in the pages folder, it will be treated as a route.

Create Next App comes by default with the api folder, meaning that the hello.js file is an API endpoint. If you hit the API route http://localhost:3000/api/hello, you will get a response from the server.

Next.js uses the App component to initialize pages. The _app.js file allows you to override the default behavior of the component. If you have global styles or data that need to be sharing across your components, put them here. By the way, the underscore symbol (_) tells Next.js to not using the file as a route.

With this in place, we can now preview the project by running this command on the terminal:

  yarn dev

Or for npm

  npm run dev

Let's visit on the browser http://localhost:3000

Great! We have now finished with the introduction to Next.js. We will dive into Next.js static and dynamic routing in the next part of the series.

Thanks for reading, and see you next.

You can find other great content like this on my blog or follow me on Twitter to get notified.

How To Use Redux in your React TypeScript App

Ibrahima Ndaw — Tue, 08 Sep 2020 19:01:02 +0000

Redux is a predictable state container for JavaScript apps. It's a popular library for managing state in React apps. It can offer better developer experience when using along with TypeScript, which is a superset of JavaScript that type-checks code to make it robust and understandable.

In this guide, I will show you how to use Redux in your React TypeScript project by building an app that allows you to add, delete, and show articles.

Let's dive in

You can subscribe to my newsletter to receive the weekly free article in your inbox.

Prerequisites
Setting up
Create the types
Create the action types
Create the action creators
Create a reducer
Create a store
Create the components

Prerequisites

This tutorial assumes that you have at least a basic understanding of React, Redux, and TypeScript. So, if you're not familiar with these technologies, try to read first this practical guide to TypeScript or this React Redux tutorial - otherwise, let's get started.

Setting up

To use Redux and TypeScript, we need to create a new React app.

To do so, let's open the CLI (command-line interface) and execute this command:

  npx create-react-app my-app --template typescript

Next, let's structure the project as follows:

├── src
|  ├── components
|  |  ├── AddArticle.tsx
|  |  └── Article.tsx
|  ├── store
|  |  ├── actionCreators.ts
|  |  ├── actionTypes.ts
|  |  └── reducer.ts
|  ├── type.d.ts
|  ├── App.test.tsx
|  ├── App.tsx
|  ├── index.css
|  ├── index.tsx
|  ├── react-app-env.d.ts
|  └── setupTests.ts
├── tsconfig.json
├── package.json
└── yarn.lock

The file structure of the project is quite simple. However, there are two things to note:

The store folder that contains files related to React Redux.
The type.d.ts file that holds the TypeScript types, which can be used now in other files without importing.

That said, we can now install Redux and create our very first store.

So, let's open the project and run the following command:

  yarn add redux react-redux redux-thunk

Or when using npm

  npm install redux react-redux redux-thunk

We also have to install their types as development dependencies to help TypeScript understanding the libraries.

So, let's execute this command again on the CLI.

  yarn add -D @types/redux @types/react-redux @types/redux-thunk

Or for npm

  npm install -D @types/redux @types/react-redux @types/redux-thunk

Great! With this step forward, we can now create the TypeScript types for the project in the next section.

Create the types

TypeScript Types allows you to set types for your variables, function parameters, and so on.

type.d.ts

interface IArticle {
  id: number
  title: string
  body: string
}

type ArticleState = {
  articles: IArticle[]
}

type ArticleAction = {
  type: string
  article: IArticle
}

type DispatchType = (args: ArticleAction) => ArticleAction

Here, we start by declaring The interface IArticle which reflects the shape of a given article. Then, we have ArticleState, ArticleAction, and DispatchType that will serve as types for respectively the state object, the action creators, and the dispatch function provided by Redux.

That said, we now have the needed types to start using React Redux. Let's create the action types.

Create the action types

store/actionTypes.ts

export const ADD_ARTICLE = "ADD_ARTICLE"
export const REMOVE_ARTICLE = "REMOVE_ARTICLE"

We need two action types for the Redux store. One for adding articles and another for deleting.

Create the action creators

store/actionCreators.ts

import * as actionTypes from "./actionTypes"

export function addArticle(article: IArticle) {
  const action: ArticleAction = {
    type: actionTypes.ADD_ARTICLE,
    article,
  }

  return simulateHttpRequest(action)
}

export function removeArticle(article: IArticle) {
  const action: ArticleAction = {
    type: actionTypes.REMOVE_ARTICLE,
    article,
  }
  return simulateHttpRequest(action)
}

export function simulateHttpRequest(action: ArticleAction) {
  return (dispatch: DispatchType) => {
    setTimeout(() => {
      dispatch(action)
    }, 500)
  }
}

In this tutorial, I will simulate the HTTP request by delaying it for 0.5 seconds. But, feel free to use a real server if you want too.

Here, the function addArticle will dispatch an action for adding a new article, and the method removeArticle will do the opposite and hence, delete the object passed in as an argument.

Create a reducer

A reducer is a pure function that receives the state of the store and an action as parameters and then returns the updated state.

store/reducer.ts

import * as actionTypes from "./actionTypes"

const initialState: ArticleState = {
  articles: [
    {
      id: 1,
      title: "post 1",
      body:
        "Quisque cursus, metus vitae pharetra Nam libero tempore, cum soluta nobis est eligendi",
    },
    {
      id: 2,
      title: "post 2",
      body:
        "Harum quidem rerum facilis est et expedita distinctio quas molestias excepturi sint",
    },
  ],
}

As you can see here, we declare an initial state to have some articles to show when the page loads. The state object needs to match the type ArticleState - otherwise, TypeScript will throw an error.

store/reducer.ts

const reducer = (
  state: ArticleState = initialState,
  action: ArticleAction
): ArticleState => {
  switch (action.type) {
    case actionTypes.ADD_ARTICLE:
      const newArticle: IArticle = {
        id: Math.random(), // not really unique
        title: action.article.title,
        body: action.article.body,
      }
      return {
        ...state,
        articles: state.articles.concat(newArticle),
      }
    case actionTypes.REMOVE_ARTICLE:
      const updatedArticles: IArticle[] = state.articles.filter(
        article => article.id !== action.article.id
      )
      return {
        ...state,
        articles: updatedArticles,
      }
  }
  return state
}

export default reducer

Next, we have the reducer function that expects the previous state and an action to be able to update the store. Here, we have two actions: one for adding and another for deleting.

With that in place, we can now handle the state with the reducer. Let's now create a store for the project.

Create a store

A Redux store is where your app's state lives.

index.tsx

import * as React from "react"
import { render } from "react-dom"
import { createStore, applyMiddleware, Store } from "redux"
import { Provider } from "react-redux"
import thunk from "redux-thunk"

import App from "./App"
import reducer from "./store/reducer"

const store: Store<ArticleState, ArticleAction> & {
  dispatch: DispatchType
} = createStore(reducer, applyMiddleware(thunk))

const rootElement = document.getElementById("root")
render(
  <Provider store={store}>
    <App />
  </Provider>,
  rootElement
)

As you can see, we import the reducer function and then pass it as an argument to the method createStore in order to create a new Redux store. The redux-thunk middleware needs to be proceeded as a second parameter as well to the method to be able to handle asynchronous code.

Next, we connect React to Redux by providing the store object as props to the Provider component.

We can now use Redux in this project and access the store. So, let's create the components to get and manipulate the data.

Create the components

components/AddArticle.tsx

import * as React from "react"

type Props = {
  saveArticle: (article: IArticle | any) => void
}

export const AddArticle: React.FC<Props> = ({ saveArticle }) => {
  const [article, setArticle] = React.useState<IArticle | {}>()

  const handleArticleData = (e: React.FormEvent<HTMLInputElement>) => {
    setArticle({
      ...article,
      [e.currentTarget.id]: e.currentTarget.value,
    })
  }

  const addNewArticle = (e: React.FormEvent) => {
    e.preventDefault()
    saveArticle(article)
  }

  return (
    <form onSubmit={addNewArticle} className="Add-article">
      <input
        type="text"
        id="title"
        placeholder="Title"
        onChange={handleArticleData}
      />
      <input
        type="text"
        id="body"
        placeholder="Description"
        onChange={handleArticleData}
      />
      <button disabled={article === undefined ? true : false}>
        Add article
      </button>
    </form>
  )
}

To add a new article, we will be using this form component. It receives the function saveArticle as a parameter, which allows adding a new article to the store. The article object should follow the type IArticle to make TypeScript happy.

components/Article.tsx

import * as React from "react"
import { Dispatch } from "redux"
import { useDispatch } from "react-redux"

type Props = {
  article: IArticle
  removeArticle: (article: IArticle) => void
}

export const Article: React.FC<Props> = ({ article, removeArticle }) => {
  const dispatch: Dispatch<any> = useDispatch()

  const deleteArticle = React.useCallback(
    (article: IArticle) => dispatch(removeArticle(article)),
    [dispatch, removeArticle]
  )

  return (
    <div className="Article">
      <div>
        <h1>{article.title}</h1>
        <p>{article.body}</p>
      </div>
      <button onClick={() => deleteArticle(article)}>Delete</button>
    </div>
  )
}

The Article component shows an article object.

The function removeArticle has to dispatch to access the store and hence delete a given article. That's the reason why we use here the useDispatch hook providing by Redux to complete the removing action.

Next, The use of useCallback helps to avoid unnecessary re-rendering by memoizing values as dependencies.

We have finally the components needed to add and show the articles. Let's now add the last piece to the puzzle by using them in the App.tsx file.

App.tsx

import * as React from "react"
import { useSelector, shallowEqual, useDispatch } from "react-redux"
import "./styles.css"

import { Article } from "./components/Article"
import { AddArticle } from "./components/AddArticle"
import { addArticle, removeArticle } from "./store/actionCreators"
import { Dispatch } from "redux"

const App: React.FC = () => {
  const articles: readonly IArticle[] = useSelector(
    (state: ArticleState) => state.articles,
    shallowEqual
  )

  const dispatch: Dispatch<any> = useDispatch()

  const saveArticle = React.useCallback(
    (article: IArticle) => dispatch(addArticle(article)),
    [dispatch]
  )

  return (
    <main>
      <h1>My Articles</h1>
      <AddArticle saveArticle={saveArticle} />
      {articles.map((article: IArticle) => (
        <Article
          key={article.id}
          article={article}
          removeArticle={removeArticle}
        />
      ))}
    </main>
  )
}

export default App

The useSelector hook enables access to the state of the store. Here, we pass shallowEqual as a second argument to the method to tell to Redux to use shallow equality when checking for changes.

Next, we rely on useDispatch to dispatch an action for adding articles in the store. Finally, we loop through the array of articles and pass each to the Article component to show it.

With that, we can now browse to the root of the project and then execute this command.

  yarn start

Or for npm

  npm start

If you open http://localhost:3000/ in the browser, you should see this:

Great! Our app looks good. With this, we have now finished using Redux in a React TypeScript app.

You can find the finished project in this CodeSandbox

You can find other great content like this on my blog or follow me on Twitter to get notified.

Thanks for reading.

React TypeScript - How To Set Types on Hooks (+cheat sheet)

Ibrahima Ndaw — Tue, 04 Aug 2020 19:15:39 +0000

TypeScript is a great language that allows type-checking your code in order to make it more robust and understandable.

In this guide, I will lead you in setting up TypeScript types on React hooks (useState, useContext, useCallback, and so on).

Set types on useState
Set types on useRef
Set types on useContext
Set types on useReducer
Set types on useMemo
Set types on useCallback

Let's dive in

Set types on useState

The useState hook allows you to manage state in your React app. It's the equivalent of this.state in a Class component.

import * as React from "react";

export const App: React.FC = () => {
 const [counter, setCounter] = React.useState<number>(0)

 return (
    <div className="App">
      <h1>Result: { counter }</h1>
      <button onClick={() => setCounter(counter + 1)}>+</button>
      <button onClick={() => setCounter(counter - 1)}>-</button>
    </div>
  );
}

To set types on useState hook, you need to pass into <> the type of the state. You can also use union type like this <number | null> if you don't have an initial state.

Set types on useRef

The useRef hook returns a mutable ref object that allows accessing DOM elements.

import * as React from "react";

export const App: React.FC = () => {
  const myRef = React.useRef<HTMLElement | null>(null)

  return (
    <main className="App" ref={myRef}>
      <h1>My title</h1>
    </main>
  );
}

As you can see, the way useRef receives types is the same as the useState hook. You just have to pass it into the <> - and, if you have multiple type annotations, just use union type as I do here.

Set types on useContext

useContext is a hook that allows accessing and consuming a given Context in a React app.

import * as React from "react";

interface IArticle {
  id: number
  title: string
}

const ArticleContext = React.createContext<IArticle[] | []>([]);

const ArticleProvider: React.FC<React.ReactNode> = ({ children }) => {
  const [articles, setArticles] = React.useState<IArticle[] | []>([
    { id: 1, title: "post 1" },
    { id: 2, title: "post 2" }
  ]);

  return (
    <ArticleContext.Provider value={{ articles }}>
      {children}
    </ArticleContext.Provider>
  );
}

const ShowArticles: React.FC = () => {
  const { articles } = React.useContext<IArticle[]>(ArticleContext);

  return (
    <div>
      {articles.map((article: IArticle) => (
        <p key={article.id}>{article.title}</p>
      ))}
    </div>
  );
};

export const App: React.FC = () => {
  return (
    <ArticleProvider>
      <h1>My title</h1>
      <ShowArticles />
    </ArticleProvider>
  );
}

Here, we start by creating the IArticle interface that is the type of our context.
Next, we use it on the createContext() method to create a new context, and then initialize it with [] - you can also use null as an initial state if you want too.

With that in place, we can now handle the state of the context and set the type on useContext in order to expect an array of type IArticle as value.

Set types on useReducer

The useReducer hook helps to manage more complex states. It's an alternative to useState - but keep in mind that they are different.

import * as React from "react";

enum ActionType {
  INCREMENT_COUNTER = "INCREMENT_COUNTER",
  DECREMENT_COUNTER = "DECREMENT_COUNTER"
}

interface IReducer {
  type: ActionType;
  count: number;
}

interface ICounter {
  result: number;
}

const initialState: ICounter = {
  result: 0
};

const countValue: number = 1;

const reducer: React.Reducer<ICounter, IReducer> = (state, action) => {
  switch (action.type) {
    case ActionType.INCREMENT_COUNTER:
      return { result: state.result + action.count };
    case ActionType.DECREMENT_COUNTER:
      return { result: state.result - action.count };
    default:
      return state;
  }
};

export default function App() {
  const [state, dispatch] = React.useReducer<React.Reducer<ICounter, IReducer>>(
    reducer,
    initialState
  );

  return (
    <div className="App">
      <h1>Result: {state.result}</h1>
      <button
        onClick={() =>
          dispatch({ type: ActionType.INCREMENT_COUNTER, count: countValue })
        }> +
      </button>
      <button
        onClick={() =>
          dispatch({ type: ActionType.DECREMENT_COUNTER, count: countValue })
        }> -
      </button>
    </div>
  );
}

Here, we start by declaring the action types that allow handling the counter. Next, we set respectively two types for the reducer function and the counter state.

The reducer expects a state of type ICounter and an action of type IReducer. With that, the counter can now be handle consequently.

The useReducer hook receives the reducer function and an initial state as arguments and returns two elements: the state of the counter and the dispatch action.

To set the type for the values returned by ueReducer - just pass into the <> the type of your data.

With that in place, the counter can now be incremented or decremented through useReducer.

Set types on useMemo

The useMemo hook allows you to memorize the output of a given function. It returns a memoized value.

const memoizedValue = React.useMemo<string>(() => {
  computeExpensiveValue(a, b)
}, [a, b])

To set types on useMemo - just pass into the <> the type of data you want to memorize.
Here, the hook expects a string as a returned value.

Set types on useCallback

The useCallback hook allows you to memorize a function to prevent unnecessary re-renders. It returns a memoized callback.

type CallbackType = (...args: string[]) => void

const memoizedCallback = React.useCallback<CallbackType>(() => {
    doSomething(a, b);
  }, [a, b]);

Here, we declare the CallbackType type that is using as type on the callback we want to memorize.
It expects to receive parameters of type string and should return a value of type void.

Next, we set that type on useCallback - and if you pass a wrong type to the callback or the array of dependencies - TypeScript will yell at you.

You can find other great content like this on my blog or follow me on Twitter to get notified.

Thanks for reading

How To Build a Todo App with React, TypeScript, NodeJS, and MongoDB

Ibrahima Ndaw — Tue, 21 Jul 2020 18:15:48 +0000

In this tutorial, we will be using TypeScript on both sides (server and client) to build a Todo App from scratch with React, NodeJS, Express, and MongoDB.

So, let's start by planning the API.

API with NodeJS, Express, MongoDB and TypeScript
- Setting up
- Create a Todo Type
- Create a Todo Model
- Create API controllers
- Get, Add, Update and Delete Todos
- Create API routes
- Create a Server
Client-side with React and TypeScript
- Setting up
- Create a Todo Type
- Fetch data from the API
- Create the components
- Add Todo Form
- Display a Todo
- Fetch and Display data
Resources

Let's dive in

API with NodeJS, Express, MongoDB and TypeScript

Setting up

If you're new to this, you can start with A Practical Guide to TypeScript or How to build an API from scratch with Node JS, Express, and MongoDB to get most out of this tutorial - otherwise, let's get started.

To create a new NodeJS App, you need to run this command on the terminal.

  yarn init

It will ask for a couple of questions and then initialize the app. You can skip it by adding a -y flag to the command.

Next, structure the project as follows.

├── dist
├── node_modules
├── src
   ├── app.ts
   ├── controllers
   |  └── todos
   |     └── index.ts
   ├── models
   |  └── todo.ts
   ├── routes
   |  └── index.ts
   └── types
      └── todo.ts
├── nodemon.json
├── package.json
├── tsconfig.json

As you can see, this file structure is relatively simple. The dist directory will serve as an output folder once the code compiled to plain JavaScript.
We also have an app.ts file that is the entry point of the server.
The controllers, types, and routes are also in their respective folder names.

Now, we need to configure the tsconfig.json file to help the compiler along following our preferences.

tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "dist/js",
    "rootDir": "src",
    "strict": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["src/types/*.ts", "node_modules", ".vscode"]
}

Here we have four main properties to underline:

outDir: It tells the compiler to put the compiled code into the dist/js folder.
rootDir: It informs TypeScript to compile every .ts file located in the src folder.
include: It tells the compiler to include files that are in the src directory and sub-directory.
exclude: It will exclude the files or folders passed in the array during compile-time.

We can now install the dependencies to enable TypeScript in the project. Because by default, this app will use JavaScript.

There are two ways of using TypeScript in a NodeJS app. Either locally in the project or globally in our machine. I will go for the latter for personal preference, but you can stick with the local way if you want too.

Now, let's execute the following command on the terminal to install TypeScript.

  yarn add typescript -g

This g flag allows installing TypeScript globally and hence make it accessible from anywhere on the computer.

Next, let's add some dependencies in order to use Express and MongoDB.

  yarn add express cors mongoose

We also need to install their types as development dependencies to help the TypeScript compiler understanding the packages.

  yarn add -D @types/node @types/express @types/mongoose @types/cors

Now, TypeScript won't yell at you anymore - it will use these types to define the libraries we've just installed.

We also need to add other dependencies to be able to compile the TypeScript code and start the server concurrently.

  yarn add -D concurrently nodemon

With that in place, we can now update the package.json file with the scripts needed to start the server.

package.json

  "scripts": {
    "build": "tsc",
    "start": "concurrently \"tsc -w\" \"nodemon dist/js/app.js\""
  }

concurrently will help to compile the TypeScript code, keep watching for changes, and also start the server simultaneously. That said, we can now launch the server - however, we have not created something meaningful yet in that regard.
So, let's fix that in the next section.

Create a Todo Type

types/todo.ts

import { Document } from "mongoose"

export interface ITodo extends Document {
  name: string
  description: string
  status: boolean
}

Here, we have a Todo interface that extends the Document type provided by mongoose that will be using later to interact with MongoDB. That said, we can now define how a Todo model should look.

Create a Todo Model

models/todo.ts

import { ITodo } from "./../types/todo"
import { model, Schema } from "mongoose"

const todoSchema: Schema = new Schema(
  {
    name: {
      type: String,
      required: true,
    },

    description: {
      type: String,
      required: true,
    },

    status: {
      type: Boolean,
      required: true,
    },
  },
  { timestamps: true }
)

export default model<ITodo>("Todo", todoSchema)

As you can see here, we start by importing the interface ITodo and some utilities from mongoose. The latter helps to define the Todo schema and also pass in ITodo as a type to the model before exporting it.

With that, we can now use the Todo model in other files to interact with the database.

Create API controllers

Get, Add, Update and Delete Todos

controllers/todos/index.ts

import { Response, Request } from "express"
import { ITodo } from "./../../types/todo"
import Todo from "../../models/todo"

const getTodos = async (req: Request, res: Response): Promise<void> => {
  try {
    const todos: ITodo[] = await Todo.find()
    res.status(200).json({ todos })
  } catch (error) {
    throw error
  }
}

Here, we first need to import some types from express because I want to type the values explicitly. If you want too, you can let TypeScript infers it for you.

Next, we use the function getTodos() to fetch data. It receives a req and res parameters and returns a promise.

And with the help of the Todo model created earlier, we can now get data from MongoDB and returns a response with the array of todos.

controllers/todos/index.ts

const addTodo = async (req: Request, res: Response): Promise<void> => {
  try {
    const body = req.body as Pick<ITodo, "name" | "description" | "status">

    const todo: ITodo = new Todo({
      name: body.name,
      description: body.description,
      status: body.status,
    })

    const newTodo: ITodo = await todo.save()
    const allTodos: ITodo[] = await Todo.find()

    res
      .status(201)
      .json({ message: "Todo added", todo: newTodo, todos: allTodos })
  } catch (error) {
    throw error
  }
}

As you can see, the function addTodo() receives the body object that contains data entered by the user.

Next, I use typecasting to avoid typos and restrict the body variable to match ITodo and then create a new Todo based on the model.

With that in place, we can now save the Todo in the DB and return a response that contains the todo created and the updated todos array.

controllers/todos/index.ts

const updateTodo = async (req: Request, res: Response): Promise<void> => {
  try {
    const {
      params: { id },
      body,
    } = req
    const updateTodo: ITodo | null = await Todo.findByIdAndUpdate(
      { _id: id },
      body
    )
    const allTodos: ITodo[] = await Todo.find()
    res.status(200).json({
      message: "Todo updated",
      todo: updateTodo,
      todos: allTodos,
    })
  } catch (error) {
    throw error
  }
}

To update a todo, we need to extract the id and the body from the req object and then pass them to findByIdAndUpdate(). This utility will find the Todo on the database and update it. And once the operation completed, we can now return the updated data to the user.

controllers/todos/index.ts

const deleteTodo = async (req: Request, res: Response): Promise<void> => {
  try {
    const deletedTodo: ITodo | null = await Todo.findByIdAndRemove(
      req.params.id
    )
    const allTodos: ITodo[] = await Todo.find()
    res.status(200).json({
      message: "Todo deleted",
      todo: deletedTodo,
      todos: allTodos,
    })
  } catch (error) {
    throw error
  }
}

export { getTodos, addTodo, updateTodo, deleteTodo }

The function deleteTodo() allows deleting a Todo from the database. Here, we pull out the id from req and pass it as an argument to findByIdAndRemove() to access the corresponding Todo and delete it from the DB.

Next, we export the functions to be able to use them in other files. That said, we can now create some routes for the API and use these methods to handle the requests.

Create API routes

routes/index.ts

import { Router } from "express"
import { getTodos, addTodo, updateTodo, deleteTodo } from "../controllers/todos"

const router: Router = Router()

router.get("/todos", getTodos)

router.post("/add-todo", addTodo)

router.put("/edit-todo/:id", updateTodo)

router.delete("/delete-todo/:id", deleteTodo)

export default router

As you can notice here, we have four routes to get, add, update, and delete todos from the database. And since we already created the functions, the only thing we have to do is importing the methods and pass them as parameters to handle the requests.

So far, we have covered a lot, but still, no server to start. So, let's fix that in the next section.

Create a Server

Before creating the server, we need to first add some environment variables that will hold the MongoDB credentials in the nodemon.json file.

nodemon.json

{
    "env": {
        "MONGO_USER": "your-username",
        "MONGO_PASSWORD": "your-password",
        "MONGO_DB": "your-db-name"
    }
}

You can get the credentials by creating a new cluster on MongoDB Atlas.

app.ts

import express, { Express } from "express"
import mongoose from "mongoose"
import cors from "cors"
import todoRoutes from "./routes"

const app: Express = express()

const PORT: string | number = process.env.PORT || 4000

app.use(cors())
app.use(todoRoutes)

const uri: string = `mongodb+srv://${process.env.MONGO_USER}:${process.env.MONGO_PASSWORD}@clustertodo.raz9g.mongodb.net/${process.env.MONGO_DB}?retryWrites=true&w=majority`
const options = { useNewUrlParser: true, useUnifiedTopology: true }
mongoose.set("useFindAndModify", false)

mongoose
  .connect(uri, options)
  .then(() =>
    app.listen(PORT, () =>
      console.log(`Server running on http://localhost:${PORT}`)
    )
  )
  .catch(error => {
    throw error
  })

Here, we start by importing the express library that allows us to access the use() method that helps to handle the Todos routes.

Next, we use the mongoose package to connect to MongoDB by appending to the URL the credentials held on the nodemon.json file.

That said, now, if we connect successfully to MongoDB, the server will start, if appropriate, an error will be throwing.

We've now done building the API with Node, Express, TypeScript, and MongoDB. Let's now start building the client-side app with React and TypeScript.

Client-side with React and TypeScript

Setting up

To create a new React app, I will go with Create React App - you can use other methods as well if you want too.

So, let's run in the terminal the following command.

  npx create-react-app my-app --template typescript

Next, install the Axios library to be able to fetch remote data.

  yarn add axios

Once the installation completed, let's structure our project as follows.

├── node_modules
├── public
├── src
|  ├── API.ts
|  ├── App.test.tsx
|  ├── App.tsx
|  ├── components
|  |  ├── AddTodo.tsx
|  |  └── TodoItem.tsx
|  ├── index.css
|  ├── index.tsx
|  ├── react-app-env.d.ts
|  ├── setupTests.ts
|  └── type.d.ts
├── tsconfig.json
├── package.json
└── yarn.lock

Here, we have a relatively simple file structure. The main thing to notice is src/type.d.ts that will hold the types. And since I will use them on almost every file, I added the extension .d.ts to make the types globally available. And now we don't need to import them anymore.

Create a Todo Type

src/type.d.ts

interface ITodo {
  _id: string
  name: string
  description: string
  status: boolean
  createdAt?: string
  updatedAt?: string
}

interface TodoProps {
  todo: ITodo
}

type ApiDataType = {
  message: string
  status: string
  todos: ITodo[]
  todo?: ITodo
}

Here, the ITodo interface needs to mirror the shape of data from the API. And since we don't have mongoose here, we need to add additional properties to match the type defined on the API.
Next, we use that same interface for the TodoProps which is the type annotation for the props that will be received by the component responsible for rendering the data.

We have now defined our types - let's now start to fetching data from the API.

Fetch data from the API

src/API.ts

import axios, { AxiosResponse } from "axios"

const baseUrl: string = "http://localhost:4000"

export const getTodos = async (): Promise<AxiosResponse<ApiDataType>> => {
  try {
    const todos: AxiosResponse<ApiDataType> = await axios.get(
      baseUrl + "/todos"
    )
    return todos
  } catch (error) {
    throw new Error(error)
  }
}

As you can see, we need to import axios to request data from the API. Next, we use the function getTodos() to get data from the server. It will return a promise of type AxiosResponse that holds the Todos fetched that needs to match the type ApiDataType.

src/API.ts

export const addTodo = async (
  formData: ITodo
): Promise<AxiosResponse<ApiDataType>> => {
  try {
    const todo: Omit<ITodo, "_id"> = {
      name: formData.name,
      description: formData.description,
      status: false,
    }
    const saveTodo: AxiosResponse<ApiDataType> = await axios.post(
      baseUrl + "/add-todo",
      todo
    )
    return saveTodo
  } catch (error) {
    throw new Error(error)
  }
}

This function receives the data entered by the user as an argument and returns a promise. Here, we need to omit the _id property because MongoDB will create it on the fly.

src/API.ts

export const updateTodo = async (
  todo: ITodo
): Promise<AxiosResponse<ApiDataType>> => {
  try {
    const todoUpdate: Pick<ITodo, "status"> = {
      status: true,
    }
    const updatedTodo: AxiosResponse<ApiDataType> = await axios.put(
      `${baseUrl}/edit-todo/${todo._id}`,
      todoUpdate
    )
    return updatedTodo
  } catch (error) {
    throw new Error(error)
  }
}

To update a Todo, we have to pass in the updated data and the _id of the object. Here, we need to change the status of the Todo, which is why I only pick the property we need before sending the request to the server.

src/API.ts

export const deleteTodo = async (
  _id: string
): Promise<AxiosResponse<ApiDataType>> => {
  try {
    const deletedTodo: AxiosResponse<ApiDataType> = await axios.delete(
      `${baseUrl}/delete-todo/${_id}`
    )
    return deletedTodo
  } catch (error) {
    throw new Error(error)
  }
}

Here, we also have a function that receives as a parameter the _id property and returns a promise.

With that in place, we can now go to the components folder and add some meaningful code to its files.

Create the components

Add Todo Form

components/AddTodo.tsx

import React, { useState } from 'react'

type Props = { 
  saveTodo: (e: React.FormEvent, formData: ITodo | any) => void 
}

const AddTodo: React.FC<Props> = ({ saveTodo }) => {
  const [formData, setFormData] = useState<ITodo | {}>()

  const handleForm = (e: React.FormEvent<HTMLInputElement>): void => {
    setFormData({
      ...formData,
      [e.currentTarget.id]: e.currentTarget.value,
    })
  }

  return (
    <form className='Form' onSubmit={(e) => saveTodo(e, formData)}>
      <div>
        <div>
          <label htmlFor='name'>Name</label>
          <input onChange={handleForm} type='text' id='name' />
        </div>
        <div>
          <label htmlFor='description'>Description</label>
          <input onChange={handleForm} type='text' id='description' />
        </div>
      </div>
      <button disabled={formData === undefined ? true: false} >Add Todo</button>
    </form>
  )
}

export default AddTodo

As you can see, here we have a functional component of type React.FC (FC stands for functional component). It receives as a prop the method saveTodo() that allow saving data to the DB.

Next, we have a formData state that needs to match the ITodo type to satisfy the compiler, that is why we pass it to useState hook. We also need to add an alternative type ({}) because the initial state will be an empty object.

And with that, we can now move forward and display the data fetched.

Display a Todo

components/TodoItem.tsx

import React from "react"

type Props = TodoProps & {
  updateTodo: (todo: ITodo) => void
  deleteTodo: (_id: string) => void
}

const Todo: React.FC<Props> = ({ todo, updateTodo, deleteTodo }) => {
  const checkTodo: string = todo.status ? `line-through` : ""
  return (
    <div className="Card">
      <div className="Card--text">
        <h1 className={checkTodo}>{todo.name}</h1>
        <span className={checkTodo}>{todo.description}</span>
      </div>
      <div className="Card--button">
        <button
          onClick={() => updateTodo(todo)}
          className={todo.status ? `hide-button` : "Card--button__done"}
        >
          Complete
        </button>
        <button
          onClick={() => deleteTodo(todo._id)}
          className="Card--button__delete"
        >
          Delete
        </button>
      </div>
    </div>
  )
}

export default Todo

Here, we need to extend the TodoProps type and append the functions updateTodo and deleteTodo to handle appropriately the props received by the component.

Now, once the Todo object passed in, we will be able to display it and add the functions needed to update or delete a Todo.

Great! we can now go to the App.tsx file and add the last piece to the puzzle.

Fetch and Display data

App.tsx

import React, { useEffect, useState } from 'react'
import TodoItem from './components/TodoItem'
import AddTodo from './components/AddTodo'
import { getTodos, addTodo, updateTodo, deleteTodo } from './API'

const App: React.FC = () => {
  const [todos, setTodos] = useState<ITodo[]>([])

  useEffect(() => {
    fetchTodos()
  }, [])

  const fetchTodos = (): void => {
    getTodos()
    .then(({ data: { todos } }: ITodo[] | any) => setTodos(todos))
    .catch((err: Error) => console.log(err))
  }

Here, we first need to import the components and utility functions held on API.ts. Next, we pass to useState an array of type ITodo and initialize it with an empty array.

The method getTodos() returns a promise - therefore, we can access the then function and update the state with the data fetched or throw an error if any occurs.

With that in place, we can now call the function fetchTodos() when the component is successfully mounted.

App.tsx

const handleSaveTodo = (e: React.FormEvent, formData: ITodo): void => {
  e.preventDefault()
  addTodo(formData)
    .then(({ status, data }) => {
      if (status !== 201) {
        throw new Error("Error! Todo not saved")
      }
      setTodos(data.todos)
    })
    .catch(err => console.log(err))
}

Once the form submitted, we use addTodo() to send the request to the server, and then if the Todo has successfully saved, we update the data otherwise an error will be thrown.

App.tsx

const handleUpdateTodo = (todo: ITodo): void => {
  updateTodo(todo)
    .then(({ status, data }) => {
      if (status !== 200) {
        throw new Error("Error! Todo not updated")
      }
      setTodos(data.todos)
    })
    .catch(err => console.log(err))
}

const handleDeleteTodo = (_id: string): void => {
  deleteTodo(_id)
    .then(({ status, data }) => {
      if (status !== 200) {
        throw new Error("Error! Todo not deleted")
      }
      setTodos(data.todos)
    })
    .catch(err => console.log(err))
}

The functions to update or delete a Todo are quite similar. They both receive a parameter, send the request, and get back a response. And then, they check if the request has been successful and handle it consequently.

App.tsx

  return (
    <main className='App'>
      <h1>My Todos</h1>
      <AddTodo saveTodo={handleSaveTodo} />
      {todos.map((todo: ITodo) => (
        <TodoItem
          key={todo._id}
          updateTodo={handleUpdateTodo}
          deleteTodo={handleDeleteTodo}
          todo={todo}
        />
      ))}
    </main>
  )
}

export default App

Here, we loop through the todos array and then pass to the TodoItem the expected data.

Now, if you browse on the folder that contains the server-side app - and executes the following command in the terminal.

yarn start

And also on the client-side app:

yarn start

You should see that our Todo app works as expected.

Great! With that final touch, we have now done building a Todo App using TypeScript, React, NodeJs, Express, and MongoDB.

You can find the Source Code here

You can find other great content like this on my blog or follow me on Twitter to get notified.

Thanks for reading.

Resources

React TypeScript Cheatsheet

Advanced TypeScript Types cheatsheet (with examples)

TypeScript Cheatsheets

Advanced TypeScript Types cheat sheet (with examples)

Ibrahima Ndaw — Mon, 15 Jun 2020 17:43:40 +0000

TypeScript is a typed language that allows you to specify the type of variables, function parameters, returned values, and object properties.

Here an advanced TypeScript Types cheat sheet with examples.

Let's dive in

Originally posted on my blog

Intersection Types
Union Types
Generic Types
Utility Types
- Partial
- Required
- Readonly
- Pick
- Omit
- Extract
- Exclude
- Record
- NonNullable
Mapped types
Type Guards
Conditional Types

Intersection Types

An intersection type is a way of combining multiple types into one. Meaning that you can merge a given type A with a type B or more and get back a single type with all properties.

type LeftType = {
  id: number
  left: string
}

type RightType = {
  id: number
  right: string
}

type IntersectionType = LeftType & RightType

function showType(args: IntersectionType) {
  console.log(args)
}

showType({ id: 1, left: "test", right: "test" })
// Output: {id: 1, left: "test", right: "test"}

As you can see, IntersectionType combines two types - LeftType and RightType and use the & sign to construct the intersection type.

Union Types

Union types allow you to have different types annotation within a given variable.

type UnionType = string | number

function showType(arg: UnionType) {
  console.log(arg)
}

showType("test")
// Output: test

showType(7)
// Output: 7

The function showType is a union type that accepts both strings and numbers as a parameter.

Generic Types

A generic type is a way of reusing part of a given type. It helps to capture the type T passed in as a parameter.

function showType<T>(args: T) {
  console.log(args)
}

showType("test")
// Output: "test"

showType(1)
// Output: 1

To construct a generic type, you need to use the brackets and pass T as a parameter.
Here, I use T (the name is up to you) and then, call the function showType twice with different type annotations because it's generic - it can be reused.

interface GenericType<T> {
  id: number
  name: T
}

function showType(args: GenericType<string>) {
  console.log(args)
}

showType({ id: 1, name: "test" })
// Output: {id: 1, name: "test"}

function showTypeTwo(args: GenericType<number>) {
  console.log(args)
}

showTypeTwo({ id: 1, name: 4 })
// Output: {id: 1, name: 4}

Here, we have another example that has an interface GenericType which receives a generic type T. And since it's reusable, we can call it with first a string, and then a number.

interface GenericType<T, U> {
  id: T
  name: U
}

function showType(args: GenericType<number, string>) {
  console.log(args)
}

showType({ id: 1, name: "test" })
// Output: {id: 1, name: "test"}

function showTypeTwo(args: GenericType<string, string[]>) {
  console.log(args)
}

showTypeTwo({ id: "001", name: ["This", "is", "a", "Test"] })
// Output: {id: "001", name: Array["This", "is", "a", "Test"]}

A generic type can receive several arguments. Here, we pass in two parameters: T and U, and then use them as type annotations for the properties. That said, we can now use the interface and provide different types as argument.

Utility Types

TypeScript provides handy built-in utilities that help to manipulate types easily. To use them, you need to pass into the <> the type you want to transform.

Partial

Partial<T>

Partial allows you to make all properties of the type T optional. It will add a ? mark next to every field.

interface PartialType {
  id: number
  firstName: string
  lastName: string
}

function showType(args: Partial<PartialType>) {
  console.log(args)
}

showType({ id: 1 })
// Output: {id: 1}

showType({ firstName: "John", lastName: "Doe" })
// Output: {firstName: "John", lastName: "Doe"}

As you can see, we have an interface PartialType which is used as type annotation for the parameters received by the function showType(). And to make the properties optional, we have to use the Partial keyword and pass in the type PartialType as an argument. That said, now all fields become optional.

Required

Required<T>

Unlike Partial, the Required utility makes all properties of the type T required.

interface RequiredType {
  id: number
  firstName?: string
  lastName?: string
}

function showType(args: Required<RequiredType>) {
  console.log(args)
}

showType({ id: 1, firstName: "John", lastName: "Doe" })
// Output: { id: 1, firstName: "John", lastName: "Doe" }

showType({ id: 1 })
// Error: Type '{ id: number: }' is missing the following properties from type 'Required<RequiredType>': firstName, lastName

The Required utility will make all properties required even if we make them optional first before using the utility. And if a property is omitted, TypeScript will throw an error.

Readonly

Readonly<T>

This utility type will transform all properties of the type T in order to make them not reassignable with a new value.

interface ReadonlyType {
  id: number
  name: string
}

function showType(args: Readonly<ReadonlyType>) {
  args.id = 4
  console.log(args)
}

showType({ id: 1, name: "Doe" })
// Error: Cannot assign to 'id' because it is a read-only property.

Here, we use the utility Readonly to make the properties of ReadonlyType not reassignable. That said, if you try to give a new value to one of these fields, an error will be thrown.

Besides that, you can also use the keyword readonly in front of a property to make it not reassignable.

interface ReadonlyType {
  readonly id: number
  name: string
}

Pick

Pick<T, K>

It allows you to create a new type from an existing model T by selecting some properties K of that type.

interface PickType {
  id: number
  firstName: string
  lastName: string
}

function showType(args: Pick<PickType, "firstName" | "lastName">) {
  console.log(args)
}

showType({ firstName: "John", lastName: "Doe" })
// Output: {firstName: "John"}

showType({ id: 3 })
// Error: Object literal may only specify known properties, and 'id' does not exist in type 'Pick<PickType, "firstName" | "lastName">'

Pick is a bit different from the previous utilities we have already seen. It expects two parameters - T is the type you want to pick elements from and K which is the property you want to select. You can also pick multiple fields by separating them with a pipe(|) symbol.

Omit

Omit<T, K>

The Omit utility is the opposite of the Pick type. And instead of selecting elements, it will remove K properties from the type T.

interface PickType {
  id: number
  firstName: string
  lastName: string
}

function showType(args: Omit<PickType, "firstName" | "lastName">) {
  console.log(args)
}

showType({ id: 7 })
// Output: {id: 7}

showType({ firstName: "John" })
// Error: Object literal may only specify known properties, and 'firstName' does not exist in type 'Pick<PickType, "id">'

This utility is similar to the way Pick works. It expects the type and the properties to omit from that type.

Extract

Extract<T, U>

Extract allows you to construct a type by picking properties that are present in two different types. The utility will extract from T all properties that are assignable to U.

interface FirstType {
  id: number
  firstName: string
  lastName: string
}

interface SecondType {
  id: number
  address: string
  city: string
}

type ExtractType = Extract<keyof FirstType, keyof SecondType>
// Output: "id"

Here, we have two types that have in common the property id. And hence by using the Extract keyword, we get back the field id since it's present in both interfaces. And if you have more than one shared field, the utility will extract all similar properties.

Exclude

Unlike Extract, the Exclude utility will construct a type by excluding properties that are already present in two different types. It excludes from T all fields that are assignable to U.

interface FirstType {
  id: number
  firstName: string
  lastName: string
}

interface SecondType {
  id: number
  address: string
  city: string
}

type ExcludeType = Exclude<keyof FirstType, keyof SecondType>

// Output; "firstName" | "lastName"

As you can see here, the properties firstName and lastName are assignable to the SecondType type since they are not present there. And by using the Extract keyword, we get back these fields as expected.

Record

Record<K,T>

This utility helps you to construct a type with a set of properties K of a given type T. Record is really handy when it comes to mapping the properties of a type to another one.

interface EmployeeType {
  id: number
  fullname: string
  role: string
}

let employees: Record<number, EmployeeType> = {
  0: { id: 1, fullname: "John Doe", role: "Designer" },
  1: { id: 2, fullname: "Ibrahima Fall", role: "Developer" },
  2: { id: 3, fullname: "Sara Duckson", role: "Developer" },
}

// 0: { id: 1, fullname: "John Doe", role: "Designer" },
// 1: { id: 2, fullname: "Ibrahima Fall", role: "Developer" },
// 2: { id: 3, fullname: "Sara Duckson", role: "Developer" }

The way Record works is relatively simple. Here, it expects a number as a type which is why we have 0, 1, and 2 as keys for the employees variable. And if you try to use a string as a property, an error will be thrown. Next, the set of properties is given by EmployeeType hence the object with the fields id, fullName, and role.

NonNullable

NonNullable<T>

It allows you to remove null and undefined from the type T.

type NonNullableType = string | number | null | undefined

function showType(args: NonNullable<NonNullableType>) {
  console.log(args)
}

showType("test")
// Output: "test"

showType(1)
// Output: 1

showType(null)
// Error: Argument of type 'null' is not assignable to parameter of type 'string | number'.

showType(undefined)
// Error: Argument of type 'undefined' is not assignable to parameter of type 'string | number'.

Here, we pass the type NonNullableType as an argument to the NonNullable utility which constructs a new type by excluding null and undefined from that type. That said, if you pass a nullable value, TypeScript will throw an error.

By the way, if you add the --strictNullChecks flag to the tsconfig file, TypeScript will apply non-nullability rules.

Mapped types

Mapped types allow you to take an existing model and transform each of its properties into a new type. Note that some utility types covered earlier are also mapped types.

type StringMap<T> = {
  [P in keyof T]: string
}

function showType(arg: StringMap<{ id: number; name: string }>) {
  console.log(arg)
}

showType({ id: 1, name: "Test" })
// Error: Type 'number' is not assignable to type 'string'.

showType({ id: "testId", name: "This is a Test" })
// Output: {id: "testId", name: "This is a Test"}

StringMap<> will transform whatever types that passed in into a string. That said, if we use it in the function showType(), the parameters received must be a string - otherwise, an error will be thrown by TypeScript.

Type Guards

Type Guards allow you to check the type of a variable or an object with an operator. It's a conditional block that returns a type using typeof, instanceof, or in.

typeof

function showType(x: number | string) {
  if (typeof x === "number") {
    return `The result is ${x + x}`
  }
  throw new Error(`This operation can't be done on a ${typeof x}`)
}

showType("I'm not a number")
// Error: This operation can't be done on a string

showType(7)
// Output: The result is 14

As you can see, we have a normal JavaScript conditional block that checks the type of the argument received with typeof. With that in place, you can now guard your type with this condition.

instanceof

class Foo {
  bar() {
    return "Hello World"
  }
}

class Bar {
  baz = "123"
}

function showType(arg: Foo | Bar) {
  if (arg instanceof Foo) {
    console.log(arg.bar())
    return arg.bar()
  }

  throw new Error("The type is not supported")
}

showType(new Foo())
// Output: Hello World

showType(new Bar())
// Error: The type is not supported

Like the previous example, this one is also a type guard that checks if the parameter received is part of the Foo class or not and handles it consequently.

in

interface FirstType {
  x: number
}
interface SecondType {
  y: string
}

function showType(arg: FirstType | SecondType) {
  if ("x" in arg) {
    console.log(`The property ${arg.x} exists`)
    return `The property ${arg.x} exists`
  }
  throw new Error("This type is not expected")
}

showType({ x: 7 })
// Output: The property 7 exists

showType({ y: "ccc" })
// Error: This type is not expected

The in operator allows you to check whether a property x exists or not on the object received as a parameter.

Conditional Types

It tests two types and selects one of them depending on the outcome of that test.

type NonNullable<T> = T extends null | undefined ? never : T

This example of the NonNullable utility type checks if the type is null or not and handle it depending on that. And as you can note, it uses the JavaScript ternary operator.

Thanks for reading.

You can find other great content like this on my blog or follow me on Twitter to get notified.

Forem: Ibrahima Ndaw

How to use React Query with React and GraphQL

What is React Query?

What we’re building

Setting up

Folder structure

Setting up React Query

Using React Query

Creating the components

Showing the blog posts

Conclusion

How to use GraphQL on the Client-side with React and TypeScript

Prerequisites

Setting up

Creating the TypeScript Types

Connecting React to Apollo Client

Writing the GraphQL queries

Fetching the Todos from the GraphQL API

Creating the components

Showing the Todos

Conclusion

Resources

How to use TypeScript with GraphQL

Prerequisites

Why use TypeScript with GraphQL

Setting up

Build the GraphQL Schema

Create the GraphQL resolver

Create the Server

GraphQL in TakeShape

Next steps

Scalable APIs with GraphQL and Netlify Functions

What is serverless?

What we’re building

Setting up

Building the serverless function with GraphQL

Creating the API with GraphQL

Testing the GraphQL API

Next steps

Conclusion

Unit Testing Your Gatsby Site with Jest and React Testing library

Creating a new Gatsby app

Setting up our testing environment

NPM

Yarn

Writing the unit tests

Conclusion

Data fetching in Next.js — How To Use SWR

What is SWR?

Setting up

Fetching the data with useSWR

Creating the components

Paginating the data with useSWRInfinite

A Complete Beginner's Guide to Routing in Next.js

How Routing works in Next.js?

Linking between pages

Passing route parameters

Dynamic routes

Dynamic nested routes

Introduction Guide to Next.js

What is Next.js?

Creating a Next app

File structure

How To Use Redux in your React TypeScript App

Prerequisites

Setting up

Create the types

Create the action types

Create the action creators

Create a reducer

Create a store

Create the components

React TypeScript - How To Set Types on Hooks (+cheat sheet)

Set types on useState

Set types on useRef

Set types on useContext

Set types on useReducer

Set types on useMemo

Set types on useCallback

How To Build a Todo App with React, TypeScript, NodeJS, and MongoDB

Fetching the data with `useSWR`

Paginating the data with `useSWRInfinite`