Forem: Sergio Daniel Xalambrí

Build an Optimistic UI in React using SWR with useMutation

Sergio Daniel Xalambrí — Thu, 23 Jul 2020 08:42:28 +0000

One commont UX improvement when building User Interfaces is to add optimistic updates to the application.

Let's see how to do it easily with the SWR Hook and the useMutation hook.

We need to create a function where we will perform our mutation, let's say we are creating a new comment in an article.

async function createComment({
  authorId,
  articleId,
  body,
}: {
  authorId: number;
  articleId: number;
  body: string;
}) {
  const response = await fetch("/api/comments", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ authorId, articleId, body }),
  });

  if (!response.ok) throw new Error(response.statusText);

  return await response.json();
}

With this, we can create a useCreateComment hook, this will let use re-use our mutation together with the optimistic update.

Here we will use the cache object and mutate function from SWR to optimistically update the data cachd by SWR.

import { cache, mutate } from "swr";
import useMutation from "use-mutation";

export function useCreateComment() {
  return useMutation<{ authorId: number; articleId: number; body: string }>(
    createComment,
    {
      onMutate(input) {
        // first we keep the current data in a const
        const currentData = cache.get(["article", input.articleId]);

        mutate((cachedData) => {
          // here we are adding the input data (the new comment) to the list of
          // comments of the article
          return { ...cachedData, comments: cachedData.comments.concat(input) };
        }, false);

        // this function is our rollback function, we will use it in case the
        // mutation failed
        return () => mutate(["article", input.articleId], currentData, false);
      },

      onSuccess(data) {
        // if the mutation was a success, we update the cache of SWR to replace
        // the comment to optimistically added and add the final one returned
        // by the API
        mutate(["article", data.articleId], cachedData => {
          return {...cachedData, comments: cachedData.comments.map(comment => {
            if (comment.id) return comment;
            return data;
          })}
        });
      }

      onFailure(error, rollback) {
        console.error(error);
        // here we are calling the rallback fn returned by onMutate
        rollback();
      },
    }
  );
}

And lately, we can use it in a React component

import * as React from "react";
import { useCreateComment } from "mutations/use-create-comment";

function CommentForm({ articleId, userId }) {
  const [mutate, { status }] = useCreateComment();
  const [body, setBody] = React.useState("");

  const handleSubmit = React.useCallback<React.FormEventHandler>(
    function handleSubmit(event) {
      event.preventDefault();
      mutate({ articleId, userId, body });
    },
    [body]
  );

  return (
    <form onSubmit={handleSubmit}>
      <textarea
        value={body}
        onChange={(event) => setBody(event.target.value)}
      />
      <button>Create comment</button>
    </form>
  );
}

With this, once the user submit the form, it will first add the new commet at the bottom of the list, and then, it will try to create it, and if for some reason the request failed it will automatically rollback to use th previous data.

Usa React.Suspense para controlar la carga de imagenes

Sergio Daniel Xalambrí — Thu, 16 Jul 2020 06:53:19 +0000

Nota: Usar React.Suspense para cualquier cosa excepto carga asíncrona de components es todavía inestable.

Aunque React.Suspense es todavía inestable ya podemos empezar a usarlo con su implementación actual, en este caso podemos usarlo para controlar el estado de carga de una imagen, pero ¿Por qué es esto útil? Usando React.Suspense podemos evitar renderizar un componente hasta que sus imágenes hayan terminado de cargar, evitando así saltos en el contenido debido a que tarda mucha en cargar.

Lo primero que vamos a hacer es crear una función para interactuar con recursos, un recurso es cualquier cosa que podamos pedir de un servidor y guardar en una cache.

// Un objeto Resource tiene un método read que nos devuelve el Payload
interface Resource<Payload> {
  read: () => Payload;
}

// Y vamos a manejar tres posible estados, pendiente, exitoso y error
type status = "pending" | "success" | "error";

// createResource recibe una función asíncrona (asyncFn) que devuelve una
// promesa con el Payload del recurso que pasamos como tipo de dato
// el resultado de createResource es un objeto Resource cuyo método read
// es el mismo Payload que pasamos a createResource
function createResource<Payload>(
  asyncFn: () => Promise<Payload>
): Resource<Payload> {
  // empezamos definiendo que status es pending
  let status: status = "pending";
  // y creamos una variable para guardar el resultado de asyncFn
  let result: any;
  // después ejecutamos asyncFn de inmediato y guardamos la promesa
  const promise = asyncFn().then(
    (r: Payload) => {
      // cuando se resuelva exitosamente la promesa cambiamos el status
      // a que fue un éxito y guardamos el resultado 
      status = "success";
      result = r;
    },
    (e: Error) => {
      // si la promesa se resuelve con un error cambiamos el status a error
      // y guardamos el error como resultado
      status = "error";
      result = e;
    }
  );
  // luego devolvemos nuestro objeto Resource
  return {
    read(): Payload {
      // dentro de `read vamos verificar el status
      switch (status) {
        case "pending":
          // si está pendiente hacemos un throw de la promesa
          // hacienod esto React va a saber que nuestro componente no está
          // listo para renderizarse y lo va a suspender
          throw promise;
        case "error":
          // si el status es error hacemos un throw del error, esto permite
          // usar error boundaries para manejar el error
          throw result;
        case "success":
          // por último, si fue un éxito devolvemos el resultado
          return result;
      }
    },
  };
}

Con este createResource podríamos en realidad usar Suspense para caulquier tipo de data, pero vamos a usarlo solo para imágenes por ahora.

// Primero, vamos a crear una cache de recursos de imagenes, esto nos permite
// evitar volver a pedir una imagen que ya pedimos antes
const cache = new Map<string, any>();

// luego vamos a crear una función loadImage, esta función recibe como source
// la URL de la imagen y devuelve un Resource
function loadImage(source: string): Resource<string> {
  // lo primero que hacemos es obtener el recurso usando el source como ID
  let resource = cache.get(source);
  // y si existe lo devolvemos inmediatemente, evitando crear otro recurso
  if (resource) return resource;
  // pero si no existe creamos un nuevo recurso
  // but if it's not we create a new resource
  resource = createResource<string>(
    () =>
      // en nuestra asyncFn devolvemos una promesa
      new Promise((resolve, reject) => {
        // dentro vamos a crear una instancia de Image
        const img = new window.Image();
        // y vamos a definir el source como el atributo src
        img.src = source;
        // después vamos a escuchar el evento load y resolver la promesa pasando
        // el source como valor
        img.addEventListener("load", () => resolve(source));
        // y también escuchamos el evento error y rechazamos la promesa con un
        // error diciendo que falló la carga de la imagen y el source
        img.addEventListener("error", () =>
          reject(new Error(`Failed to load image ${source}`))
        );
      })
  );
  // antes del return, vamos a guardar el recurso en nuestra cache
  cache.set(source, resource);
  // y ahora si lo devolvemos
  return resource;
}

Con esto ya podemos empezar a usarlo, vamos a crear un componente SuspenseImage:

function SuspenseImage(
  props: React.ImgHTMLAttributes<HTMLImageElement>
): JSX.Element {
  loadImage(props.src).read();
  return <img {...props} />;
}

Este pequeño componente va a usar nuestra función loadImage para suspenderse hasta que la imagen haya terminado de cargar, ahora vamos a verlo en uso:

interface User {
  fullName: string;
  avatar: string;
}

function User({ fullName, avatar }: User) {
  return (
    <div>
      <SuspenseImage src={avatar} />
      <h2>{fullName}</h2>
    </div>
  );
}

function UserList({ users }: { users: User[] }) {
  return (
    <React.Suspense fallback={<>Loading users...</>}>
      {users.map((user) => <User key={user.id} {...user} />)}
    </React.Suspense>
  )
}

Con esto, cuando rendericemos UserList, este va a mostrar Loading users... como fallback hata que todas las imágenes hayan cargado, cuando esto ocurra va a renderizar todos los usuarios con sus avatares de una, sin dejar ningún espacio en blanco en el medio de la lista.

Como organizo mis aplicaciones de React

Sergio Daniel Xalambrí — Thu, 16 Jul 2020 06:52:36 +0000

Una de las preguntas más comunes cuando se usa React es como organizar los archivos de nuestra app. Con los años usé varias formas, tener carpetas por features, carpetas por component, un component por archivo, etc. Después de probar todas estas formas llegué a una suficientemente simple y escalable para proyectos grandes.

src/components/
  {name}.tsx
  {name}.test.tsx
src/hooks
  {name}.ts
  {name}.test.tsx
src/routes/
  {name}.tsx
  {name}.test.tsx
src/utils
  {name}.ts
  {name}.test.ts
src/index.tsx               # El entry point

🧱 Componentes

La primera carpeta es la de components, acá coloco los componentes de la aplicación. Una cosa que hago diferente de muchos desarrolladores es que no creo un nuevo archivo por cada componente de React, en un archivo normalmente escribo varios componentes, algo como esto:

import * as React from "react";
// Otros imports que pueda necesitar

function ListItem(props) { ... }

function List(props) { ... }

function Group(props) { ... }

function Button(props) { ... }

export default function MyComponent() { ... }

De esta forma todos los componentes están en el mismo archivo, esto hace mucho más fácil modificarlos, sin embargo, no quiere decir que solo tengo un archivo con todos mis components, creo un nuevo archivo en estos casos:

Quiero importarlos de forma async, en ese caso necesito un nuevo archivo
El componente se usa en varios archivos
El componente es usado por dos o más rutas
El componente es lo suficientemente complejo para que tenga sentido que tenga pruebas propias
El componente representa un feature entero (normalmente relaciondo al punto anterior)

Y, create un nuevo componente en el mismo archivo si:

Necesito reusarlo dentro del mismo archivo
Voy a usarlo dentro de una lista y tengo que usar hooks
Quiero usar hooks solo cierta parte del componente principal
Quiero poder controlar como el componente se suspende, ya que uso Suspense para data fetching, pero sin suspende al componente padre
El componente se volvió muy grande y tiene sentido dividirlo para que sea más legible

Para el caso de las pruebas, creo un único archivo por componente y punto todas las pruebas ahí, para escribirlas uso React Testing Library y sigo todas las prácticas que recominendan.

⚓️ Hooks

Creo hooks custom cada vez que necesito compartir comportamiento entre componentes y cuando estoy usando SWR para crear hooks específicos para cada recurso de mi API.

De esta forma termino con hooks como useCurrentUser or useTodos, que usan internamente SWR para hacer fetch de la data y definen la key de cache y la función fetcher dentro del mismo archivo, haciendo esto puedo compartir data entre componentes haciendo:

import { useCurrentUser } from "hooks/use-current-user";

function MyComponent() {
  const { data: currentUser } = useCurrentUser();
  // el resto del código
}

Ya que SWR evita peticiones duplicadas al API no me tengo que preocupar de que al usar varias veces mis hooks se hagan varias peticiones, lo que además me evita usar contexto.

Y hablando de contexto, lo uso, pero solo para valores mayormente estático (e.g. feature flags o assets), esto me evita problamas de que al modificar el valor en contexto se vuelva a renderizar casi toda mi aplicación.

Como con los componentes, hago pruebas de mis hooks, para esto creo un componente Tester dentro de los tests donde uso el hook y testeo ese componente directamente.

Aunque, evito escribir pruebas de hooks que solo son wrappers de SWR.

🗺️ Rutas

Nota: Cuando uso Next.js esto es reemplazado por la carpeta folders.

Rutas es una carpeta de componentes espacial, siga todas las mismas reglas que uso para crear componentes en src/components, con la única diference de que cada componente dentro de rutas representa una ruta de mi aplicación.

Los archivos dentro de esta carpeta deben tener siempre un export default, esto es necesario para poder importar de forma asíncrona las rutas en el entry point, que es donde defino mis rutas.

Estos componente a veces no importan nada de la carpeta de components, esto pasa cuando la ruta tiene todo el código que necesito, y cuando import componentes externos normalmente intento hacerlo de forma asíncrona.

También escribo pruebas para mis rutas, en su caso tiendo a hacer pruebas de integración más que pruebas unitarias, esto es porque cuando pruebo toda una página incluye varios features.

🔨 Utils

Creo funciones utilitarias todo el tiempo, me ayudan a nombrar piezas de lógica o simplement hacer más fácil de entender que está ocurriendo, especialmente cuando tiene múltiples condiciones, ya que puedo hacer algo como:

function getSomething() {
  if (condition) return value;
  if (anotherCondition) return anotherValue;
  return yetAnotherValue;
}

Sin embargo, no siempre las creo dentro de src/utils, primero las escribo dentro dentro del mismo archivo donde las necesito, que puede ser un hook, components, ruta o incluso otro util, una vez que un util es usado en tres o más archivo lo muevo a su propio archivo para evitar duplicados (WET).

También escribo pruebas para mis funciones utilitarias cuando estas son bastante largas o suficientemente complejas para necesitarlas, aunque cuando son solo wrappers de otra función o de una API de los navegadores evito agregarle pruebas.

🚪 Entry point

Finalmente, el entry point es donde importo de forma asíncrona todas mis rutas y donde importa los proveedores de context que puedas necesitas, acá defino todas las rutas y renderizo la aplicación.

Normalmente no creo un componente App ya que en la mayoría de casos con solo renderizar Router y las rutas es suficientemente para que la aplicación funcione.

Cuando uso Next.js, esto es reemplazado por pages/_app.tsx.

🖼️ Apéndice: Assets

Cuando uso assets evito importarlos directo en mi código, esto hace el build mucho más lento y el único beneficio, agregar hashes a los nombres de los assets, lo puedo lograr con otras herramientas especializadas. En mi caso trabajo con Rails como backend, así que dejo que este maneje mis assets y uso las vistas de Rails para pasar las URLs de esos assets a React agregando una etiqueta script de tipo application/json con un JSON con las URLs.

<script type="application/json" id="initial-props">
{
  "assets": {
    "logo": <%= asset_path("images/logo.png") %>
  }
}
</script>

How I Organize React Applications

Sergio Daniel Xalambrí — Thu, 16 Jul 2020 06:52:10 +0000

When using React one of the most common question is how to organize the files inside it. In my years using it I have tried multiple options, including using feature folders, folders per components, one component per file and more, after trying them all, I finally found one that is simple and scale with big projects at the same time.

src/components/
  {name}.tsx
  {name}.test.tsx
src/hooks
  {name}.ts
  {name}.test.tsx
src/routes/
  {name}.tsx
  {name}.test.tsx
src/utils
  {name}.ts
  {name}.test.ts
src/index.tsx               # The entry point

🧱 Components

The first folder is the components folder, this one contains the components of the application. One special thing I do that most React developers don't is that I don't create a new file per React component, this means in the same file I can have more than one React component, in a normal file inside components I wrote things like:

import * as React from "react";
// Possible more imports here

function ListItem(props) { ... }

function List(props) { ... }

function Group(props) { ... }

function Button(props) { ... }

export default function MyComponent() { ... }

This way, all the component I create are in the same file, this make it easier to change them, this doesn't mean all the components are always in the same file, I move components to a new file in some cases

I want to lazily import them, in that case I need a new file to import
The component is used by another component in a different file
The component is used by two or more routes
The component is too complex and it makes sense to test it in isolation
The component represents a whole feature (usualy this is related to the point above)

And I create a new component inside the same file if

I need to re-use it inside the same file
I need to use it inside a list and call hooks per each item
I want to use hooks only related for that part of the main feature of the file
I want to suspend the component, because I use suspense for data fetching, without suspending the parent component
The component its getting to big and it makes sense to split it to make it easy to read it

For the tests, I create a single test file per component and put all the tests I wrote there, to write them I use React Testing Library and I follow all the best practices they recommend.

⚓️ Hooks

I create custom hooks everytime I need to share behavior between components and when I'm using SWR to wrap it in hooks specific for each resource of my API.

This way I end up with hooks like useCurrentUser or useTodos, that use SWR internally to fetch data and define the key and fetcher function inside the same file, doing this I can easily share data between components because I can add

import { useCurrentUser } from "hooks/use-current-user";

function MyComponent() {
  const { data: currentUser } = useCurrentUser();
  // the rest of the code
}

Because SWR dedupes requests I don't need to care about using fetching many times because I call it many times, this let me avoid using Context.

And talking about context, I still use it, but only when the value stored in the context is mostly static, e.g. feature flags or assets), this way I don't have issues because the context value changed and triggered a re-render in most of the application.

As with components, I test the hooks, to do it I create a simple Tester component using the hook and I test the component.

I only avoid testing the hook when they are wrappers of SWR.

🗺️ Routes

Note: When using Next.js this is replaced by the pages folder.

Routes is a special components folder, this follow the same rules I use for components inside src/components, the only difference is that they represent a single route of my application.

The files here must always have a single export default, this is required to be able to lazily import the routes in the entry point which is where I define my routes.

These components are sometimes not importing a single component from the components folder, because they implement the whole features the page needs, and when I import external components I try to do it lazily too.

Here I also add tests, but in this case I do more integration tests rather and unit tests, this is because I'm testing the whole page with all the features inside it.

🔨 Utils

I create utility functions all the time, it helps me name piece of logics or simple make it easier to understand what is happening, specially when there are multiple conditions because I can do things like:

function getSomething() {
  if (condition) return value;
  if (anotherCondition) return anotherValue;
  return yetAnotherValue;
}

However, I don't always create them in a file inside src/utils, I first write them inside the same file it needs them, this could be a hook, component, route, or even another utility, but if my utility function is used in three or more files then I move it to a file inside the utils folder to avoid duplicating it (WET).

I also write test for the utils I code only when they are large or complex enough to need it, and when they are not only wrappers of another function, specially if they wrap a browser API.

🚪 Entry Point

Finally, the entry point is where I lazily import all the routes, I import the context providers I may need, and I define all my routes and render the whole application.

I don't really create an App component because most of the time I can directly render the Router and Route components without wrapping them in an App.

When using Next.js, this is the pages/_app.tsx file.

🖼️ Appendix: Assets

When using assets, I don't like to import them in my code, this makes the build process way slower and the only benefit, have hashes in the assets name, I can gain it using other specialized tools. In my case I work with Rails as a backend, thus I let Rails handle static assets and I use the Rails view to pass the URLs of those assets to React adding a script of type application/json with a JSON containing the URLs.

<script type="application/json" id="initial-props">
{
  "assets": {
    "logo": <%= asset_path("images/logo.png") %>
  }
}
</script>

Use SWR with Geolocation

Sergio Daniel Xalambrí — Fri, 19 Jun 2020 06:38:22 +0000

While SWR is mostly used to fetch data from an API, it could be used to read data from any source, in this case, we will create a fetcher function to get the current position in latitude and longitude of the user.

We will also subscribe to location changes and update the data SWR used to ensure we keep it up-to-date.

Running Demo

This is the final project running in CodeSandbox

Creating the Fetcher

First of all, we need to create the fetcher we will pass to SWR, this function must return a Promise resolved to the data we want SWR to cache. However, Geolocation API uses a callback, to convert it to a Promise we could return an instance of Promise and manually resolve it when we get the location.

function fetcher() {
  return new Promise((resolve, reject) => {
    function onSuccess({ coords }) {
      resolve([coords.latitude, coords.longitude]);
    }

    navigator.geolocation.getCurrentPosition(onSuccess, reject);
  });
}

As you can see, the onSuccess callback we pass to navigator.geolocation.getCurrentPosition will resolve the Promise with an array with the latitude and longitude.

Using SWR in a Component

Now we need to use our fetcher in a component. First, we need to create a component where we will call useSWR as the key we will use geolocation this key is not going to be used by the fetcher in our case, as you would typically do if you used an API endpoint, as the fetcher we will use our function from above.

function App() {
  const { data: position, mutate } = useSWR("geolocation", fetcher);

  if (!position) {
    return (
      <Map zoom={15}>
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        />
      </Map>
    );
  }

  return (
    <Map center={position} zoom={15}>
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      />
      <Marker position={position} />
    </Map>
  );
}

As you can see, we detect if the position exists and render a centered map with a marker if it exists and a non-centered map without a marker, if it does not, exists.

Note: The Map, TileLayer and Marker components come from the react-leaflet library, but could be easily replaced with Google Map components if desired. I have used this one because it does not need any API key to work.

Subscribing to Location Changes

To subscribe to changes in the current location, we could use the navigator.geolocation.watchPosition function, and this function receives a callback similar to navigator.geolocation.getCurrentPosition, we could then use the mutate function from SWR to update the cached data.

To run that function, we could use the useEffect hook of React.

React.useEffect(() => {
  const id = navigator.geolocation.watchPosition((position) => {
    mutate([position.coords.latitude, position.coords.longitude], false);
  });
  return () => navigator.geolocation.clearWatch(id);
}, [mutate]);

Notice we are getting an id from watchPosition, this id is the watcher's identification. We later use it in the returned function to unsubscribe. This let us stop calling mutate after the component unmounts.

We also call mutate without passing the key, this is because useSWR will also return a mutate function (you can see it in the step before) with the key predefined, so we only need to pass the rest of the arguments.

In our case we disable the revalidation because we can trust the data we received, there is no need to call getCurrentPosition again after a new position comes from watchPosition.

All Combined

If we combined all the code above, we will get the following code:

import React from "react";
import useSWR from "swr";
import { Map, TileLayer, Marker } from "react-leaflet"; // the Map library

// Our fetcher function
function fetcher() {
  return new Promise((resolve, reject) => {
    function onSuccess({ coords }) {
      resolve([coords.latitude, coords.longitude]);
    }

    navigator.geolocation.getCurrentPosition(onSuccess, reject);
  });
}

export default function App() {
  const { data: position, mutate } = useSWR("geolocation", fetcher);

  // Our effect is defined after useSWR and before the condition
  React.useEffect(() => {
    const id = navigator.geolocation.watchPosition((position) => {
      mutate([position.coords.latitude, position.coords.longitude], false);
    });
    return () => navigator.geolocation.clearWatch(id);
  }, [mutate]);

  if (!position) {
    return (
      <Map zoom={15}>
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        />
      </Map>
    );
  }

  return (
    <Map center={position} zoom={15}>
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      />
      <Marker position={position} />
    </Map>
  );
}

You can see the application working in the demo at the beginning of the article, if you are on Google Chrome (or another Chromium-based browser) you can mock your sensors in the DevTools to simulate being in another part of the world, and the map will update in real-time.

You can also open it in your mobile phone and go out for a walk to see how you move, the amount of distance and accuracy of your location will vary per physical device.

Sync WebApp Session Status between Tabs with SWR

Sergio Daniel Xalambrí — Fri, 15 May 2020 07:45:20 +0000

SWR revalidate on focus feature let us ensure our data update when the user comes back to our tab. Using this feature we could build a simple synchronization of the session status between all the tabs of our page, so if one log out all will automatically become log out once the user is back to that tab.

Running Demo

This is the example code in GitHub

https://github.com/sergiodxa/swr-sync-session

This is the running app in a Vercel deployment

https://swr-sync-session-example.now.sh/

How to Build It

First we need a basic login and logout implementation, and a way to know if we are logged in, to do so we build extremely simple and completely insecure login using Next.js API pages.

// pages/api/login.js
export default function login(req, res) {
  const { username } = req.body;
  if (!username) {
    res.status(401);
    res.json({ message: "Invalid user" });
  } else {
    res.setHeader("Set-Cookie", `session=${username};`);
    res.status(201);
    res.json({ message: "Logged in" });
  }
}

// pages/api/logout.js
export default function logout(req, res) {
  if (req.cookies?.session === "invalid") {
    res.status(400);
    res.json({ message: "You are not logged in!" });
  } else {
    res.setHeader("Set-Cookie", "session=invalid;");
    res.status(200);
    res.json({ message: "Logged out" });
  }
}

// pages/api/me.js
export default function me(req, res) {
  if (!req.cookies.session || req.cookies.session === "invalid") {
    res.status(401);
    res.json({ message: "Not logged in!" });
  } else {
    res.status(200);
    res.json({ name: req.cookies.session });
  }
}

Those three files will store the user's name in a cookie, if the cookie exists we are logged in, elsewhere we are not.

After we have that we create a custom hook to call useSWR against the /api/me endpoint.

import useSWR from "swr";

async function fetcher(url) {
  const res = await fetch(url);
  const data = await res.json();
  if (res.status >= 400) return { error: data.message };
  return { data };
}

export default function useMe() {
  return useSWR("/api/me", fetcher);
}

This useMe hook will simply fetch /api/me endpoint using our custom fetcher, this fetcher will detect if the status code is a 4xx or 5xx and return an object with an error key, if it's a 2xx it will return an object with the data our API returns.

Now let's create our pages/index.js

import Router from "next/router";
import useMe from "../hooks/use-me";
import { useState } from "react";

function login(user) {
  return fetch("/api/login", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ username: user }),
  });
}

export default function IndexPage() {
  const { data: res, mutate } = useMe();
  const [user, setUser] = useState("");

  React.useLayoutEffect(() => {
    if (res?.data) Router.replace("/private")
  }, [res])

  if (res?.data) {
    return null;
  }

  return (
    <div>
      <h1>To log in click below</h1>
      <input type="text" value={user} onChange={e => setUser(e.target.value)} />
      <button onClick={() => login(user).then(() => mutate())}>Log In</button>
    </div>
  );
}

The login function will POST the username against the login endpoint, inside the page we will use useMe, if there is no data key, we are not logged in, we will render a simple page with an input to let the user write a name and a button to login.

If there is data we will render null so we don't show anything, and inside a a layout effect we will replace the current URL with /private. We do this so the user don't see anything and is immediately redirected to our private page.

When the user click the button we will call login and after it we will call mutate without any argument as a way to revalidate the data of our useMe hook.

Lastly, in our pages/private.js we will do something similar.

import useMe from "../hooks/use-me";
import Router from "next/router";

function logout() {
  return fetch("/api/logout", { method: "POST" });
}

export default function Private() {
  const { data: res, mutate } = useMe();

  React.useLayoutEffect(() => {
    if (!res || res.error) Router.replace("/");
  }, [res])

  if (!res || res.error) {
    return null;
  }

  if (!res || !res.data) return <p>Loading...</p>;

  return (
    <div>
      <h1>Hello, {res.data.name}</h1>
      <p>If you are reading this you are logged in! Congrats!</p>
      <button onClick={() => logout().then(() => mutate())}>Log out</button>
    </div>
  );
}

The logout function will POSt against the logout endpoint, then in our page we will also call useMe, this time we use both, the data and the error, if we have data we will render a simple message with the user name we got from the API. Below the message we also have a button to logout where we will call logout and then mutate to revalidate the data of useMe.

Once the user is logged out we will stop having res.data and we will have res.error, if we have an error we will render null so the user see nothing while we replace the URL with / as a way to redirect it.

Lastly, and this is something we didn't have before, we will render a loading message if we don't have data nor an error.

After we did this, we can open our app in two tabs or two windows and login in one of them, once we change back to the other one it will automatically log in, if we wait 2 seconds we can logout and go back to the other tab/window and we will be automatically logged out.

Note: the 2 seconds is because SWR deduplicate requests against the same key in a range of time below 2 seconds, we can configure it but that's not part of this example.

Sync SWR cache with Web Storage

Sergio Daniel Xalambrí — Fri, 15 May 2020 07:42:46 +0000

SWR comes with a really great cache to help keeping data between page navigation in Single Page Apps, but when doing a hard reload of the browser we will lose every key in our cache and that from zero.

Sync by SWR call

One first way to start saving those keys is to do it in a per-SWR call basis, to do this we need to use two, not commonly used options of SWR, onSuccess and onFailure.

Let's say we have an API endpoint called /api/me that gives you the current logged in user, we could create a custom useUser hook using SWR internally to cache it and let us use it everywhere.

import useSWR from "swr";
import User from "types/user";

const key = "/api/me";

function useUser() {
  return useSWR<User>(key, fetcher);
}

Now let's save the user in localStorage.

import useSWR from "swr";
import User from "types/user";

const key = "/api/me";

function useUser() {
  return useSWR<User>(key, fetcher, {
    onSuccess(user) {
      localStorage.setItem(key, JSON.stringify(user));
    },
  });
}

With this, every time SWR successfully fetch the user it will update localStorage. Now let's add a way to delete when it fails.

import useSWR from "swr";
import User from "types/user";

const key = "/api/me"

function useUser() {
  return useSWR<User>(key, fetcher, {
    onFailure() {
      localStorage.removeItem(key)
    }
    onSuccess(user) {
      localStorage.setItem(key, JSON.stringify(user));
    },
  });
}

Now if for some reason SWR can't fetch the logged in user, e.g. because it was logged out, we will delete the key, so the next time the user reload the page it will not be already logged in.

And lately we need to prefill the cache with the localStorage data.

import useSWR, { mutate } from "swr";
import User from "types/user";

const key = "/api/me"

if (typeof window !== "undefined") {
  const data = localStorage.getItem(key);
  if (data) mutate(key, JSON.parse(data), false)
}

function useUser() {
  return useSWR<User>(key, fetcher, {
    onFailure() {
      localStorage.removeItem(key)
    }
    onSuccess(user) {
      localStorage.setItem(key, JSON.stringify(user));
    },
  });
}

Here we are checking our code is running Client-Side, this is to avoid breaking while doing SSR/SSG with tools like Next.js, then we get the possible data from localStorage and if it exists we mutate the cache key with the parsed value, the last false is to avoid any revalidation at that moment.

With all of this every time we use this hook it will have its cache prefilled with the user stored in localStorage, it will fetch the data again to revalidate it, if it's a success it will update the localStorage key and if it's a failure it will delete the localStorage key.

Sync Every key

The second way it to sync every key in Storage, to do this I built a simple library called swr-sync-storage, this lib let us pick between local and session storages. So, let's install it.

$ yarn add swr-sync-storage

Now in your main file (pages/_app.js in Next or index.js in CRA) add this

import { syncWithStorage } from "swr-sync-storage";

if (typeof window !== "undefined") {
  // to sync with localStorage
  syncWithStorage("local");

  // to sync with sessionStorage
  syncWithStorage("session");
}

If we are running Client-Side we will call one of those functions, then the lib will fill the SWR cache with any value stored in the picked Web Storage and with the prefix swr-, so you can have more keys not affecting your SWR cache.

And it will subscribe to updates in the cache, updating the Web Storage data.

Warning: Note that doing this will sync absolutely everything in your SWR cache, without a proper invalidation strategy it could cause bugs due a mismatch between the cached data in Web Storage and the new expected value.

Report Web Vitals in Next.js

Sergio Daniel Xalambrí — Mon, 11 May 2020 18:10:56 +0000

To get a report on Web Vitals while using Next.js create a pages/_app.js, if you don't already have one, and add the following line:

export function reportWebVitals(metric) {
  console.log(metric);
}

Next.js will automatically start to keep track of multiple metrics and give you back a report per metric, you can see it running in pokedex-swr.now.sh. The metrics we can track include:

Time to First Byte (TTFB)
First Contentful Paint (FCP)
Largest Contentful Paint (LCP)
First Input Delay (FID)
Cumulative Layout Shift (CLS)
Next.js-hydration
Next.js-route-change-to-render
Next.js-render

Next.js-hydration is the amount of time it takes a page to start and finish hydrating the HTML.

Next.js-route-change-to-render is the amount of time it takes a page to start rendering after a route change.

Next.js-render is the amount of time it takes a page to finish rendering after a route change.

If you want to learn more about the first five follow the links above.

Once you have the report you can start tracking them however your prefer, if you are using Google Analytics you could replace the console.log with:

export function reportWebVitals({ id, name, label, value }) {
  ga("send", "event", {
    eventCategory: `Next.js ${label} metric`,
    eventAction: name,
    eventValue: Math.round(name === "CLS" ? value * 1000 : value), // values must be integers
    eventLabel: id, // id unique to current page load
    nonInteraction: true, // avoids affecting bounce rate.
  });
}

Now we will start sending those metric to Google Analytics and keep track of them, we could then use them to detect slow pages and fix them.

Use React.Suspense to wait for an image to load

Sergio Daniel Xalambrí — Sat, 09 May 2020 09:39:25 +0000

Note: React.Suspense for anything other than components lazy-loading is still unstable.

While React.Suspense is still unstable we can already start using it with its current implementation, in this case we can use it to handle the loading state of an image, why is this useful? This way we can avoid rendering a component until the image or images required have finished loading.

The first thing we need to do is to create a function to interact with resources, a resource is anything we could fetch and cache.

// A Resource is an object with a read method returning the payload
interface Resource<Payload> {
  read: () => Payload;
}

type status = "pending" | "success" | "error";

// this function let use get a new function using the asyncFn we pass
// this function also receives a payload and return us a resource with
// that payload assigned as type
function createResource<Payload>(
  asyncFn: () => Promise<Payload>
): Resource<Payload> {
  // we start defining our resource is on a pending status
  let status: status = "pending";
  // and we create a variable to store the result
  let result: any;
  // then we immediately start running the `asyncFn` function
  // and we store the resulting promise
  const promise = asyncFn().then(
    (r: Payload) => {
      // once it's fulfilled we change the status to success
      // and we save the returned value as result
      status = "success";
      result = r;
    },
    (e: Error) => {
      // once it's rejected we change the status to error
      // and we save the returned error as result
      status = "error";
      result = e;
    }
  );
  // lately we return an error object with the read method
  return {
    read(): Payload {
      // here we will check the status value
      switch (status) {
        case "pending":
          // if it's still pending we throw the promise
          // throwing a promise is how Suspense know our component is not ready
          throw promise;
        case "error":
          // if it's error we throw the error
          throw result;
        case "success":
          // if it's success we return the result
          return result;
      }
    },
  };
}

After we have that we can technically fetch using Suspense any data, but let's use it to fetch only images.

//  First we need a type of cache to avoid creating resources for images
//  we have already fetched in the past
const cache = new Map<string, any>();

// then we create our loadImage function, this function receives the source
// of the image and returns a resource
function loadImage(source: string): Resource<string> {
  // here we start getting the resource from the cache
  let resource = cache.get(source);
  // and if it's there we return it immediately
  if (resource) return resource;
  // but if it's not we create a new resource
  resource = createResource<string>(
    () =>
      // in our async function we create a promise
      new Promise((resolve, reject) => {
        // then create a new image element
        const img = new window.Image();
        // set the src to our source
        img.src = source;
        // and start listening for the load event to resolve the promise
        img.addEventListener("load", () => resolve(source));
        // and also the error event to reject the promise
        img.addEventListener("error", () =>
          reject(new Error(`Failed to load image ${source}`))
        );
      })
  );
  // before finishing we save the new resource in the cache
  cache.set(source, resource);
  // and return return it
  return resource;
}

Now we can start using it, let's create a simple SuspenseImage component:

function SuspenseImage(
  props: React.ImgHTMLAttributes<HTMLImageElement>
): JSX.Element {
  loadImage(props.src).read();
  return <img {...props} />;
}

This short component will use our loadImage function to suspend itself until the image has finished loading, let's use it now:

interface User {
  fullName: string;
  avatar: string;
}

function User({ fullName, avatar }: User) {
  return (
    <div>
      <SuspenseImage src={avatar} />
      <h2>{fullName}</h2>
    </div>
  );
}

function UserList({ users }: { users: User[] }) {
  return (
    <React.Suspense fallback={<>Loading users...</>}>
      {users.map((user) => <User key={user.id} {...user} />)}
    </React.Suspense>
  )
}

Now when we render our UserList it will keep rendering the Loading users... fallback until all the user has loaded the image, once that has happened it will render all the users with their avatar at once without leaving any empty space in the middle.

Use a scoped registry with Yarn

Sergio Daniel Xalambrí — Sat, 09 May 2020 09:13:00 +0000

When working with private packages we have a few options to use as our registry

npm registry
GitHub registry
Custom registry (e.g. Verdaccio)

If we decide to use the npm registry, and pay for it, we can continue using Yarn and npm without changes. And what if we use another one? And if we want to keep using the npm registry for non-scoped packages?

Enter .yarnrc, create this file inside the project root and write this:

"@company:registry" "https://npm.pkg.github.com"

Now every time you install a package with the @company scope (e.g. @company/design-system) Yarn will use the GitHub registry to download it instead of the public npm registry.

You can use any scope and any URL as a registry, if you setup your own Verdaccio registry under registry.company.com you can add:

"@company:registry" "https://registry.company.com"

And the best thing is that you can have more than one:

"@frontend:registry" "https://npm.pkg.github.com"
"@backend:registry" "https://registry.company.com"

Setup a redirect inside a project deployed to Vercel

Sergio Daniel Xalambrí — Sat, 09 May 2020 09:12:36 +0000

If you have had a website for a certain time most probably your links have been shared in different websites, and most of those are website you can go and update in case you decide to move a page to another URL.

Vercel makes solving this problem easy, first create a now.json file, if you don't already have one, and put this content inside:

{
  "redirects": [{ "source": "/essays(.*)", "destination": "/articles$1" }]
}

The redirects key is an array with all of our redirects, inside we write an object per redirect we want to setup, and define the keys source and destination.

The source is a string with the pathname the user will access before its redirected, in this case I have that sergiodxa.com/essays redirects me to the destination, and the destination is another string with the target URL the user will be redirected, in my case that ise sergiodxa.com/articles, if you go, right now, to https://sergiodxa.com/essays/vercel/setup-redirect it will take you to this same page you are reading right now.

The (.*) let us tell to Vercel we want to catch whatever comes after /essays, that let use detect URLs like /essays/vercel/setup-redirect and not only /essays, this is a RegEx and whatever matches inside the parenthesis will be available for use to use in the destination.

And going there, the $1 means the first element detected and caught between parenthesis by the source, this is what let use append whatever the user write after /essay and /article so we can correctly redirect the user.

Purge unused CSS with TailwindCSS

Sergio Daniel Xalambrí — Sat, 09 May 2020 09:12:13 +0000

TailwindCSS now comes with built-in support to purge the unused CSS, to use this creeate, if you don't already have, a tailwind.config.js file in your project root, inside it export an object, using CommonJS syntax, and there define a property purge with an array of the globs to use to find which files are using Tailwind.

module.exports = {
  purge: [
    "./src/**/*.{ts,tsx}"
  ],
};

In our example we are searching for any .ts or .tsx file inside any level of folders inside the src folder in the root.

We could also disable it by passing false instead of an array.

module.exports = {
  purge: false
};

This is helpful if we are purging them using another tool.