Notes

Erreur d'hydration avec Next.js et les numéros de téléphone

Dans un contexte d’utilisation de Next.js sur un device iOS, il est possible qu’une erreur “d’hydration” se passe si un numéro de téléphone est présent sur une page (un lien étant ajouté automatiquement).

Il existe un meta tag spécifique pour désactiver ce comportement.

<meta name="format-detection" content="telephone=no"/>

Vérifier qu'un objet est vide en JavaScript

Il semble que la manière la plus fiable de vérifier qu’un objet est vide en JavaScript (eg: égal à {}) est d’utiliser Object.keys().

Object.keys({}).length === 0
// ^ true

z.infer<typeof whatever>

Utiliser Zod et son inférence de type est une jolie manière d’avoir une réponse d’API type-safe.

Un exemple avec react-query:

const UserSchema = z.object({
  id: z.string(),
  name: z.string(),
  forename: z.string()
});

const { data } = useQuery(['users', id], () => {
  const user = await fetchUserById(id);

  // `data` is now type-safe
  return UserSchema.parse(user);
});

La méthode z.parse peut être utilisée directement dans fetchUserById et on peut aussi profiter de z.promise.

const UserPromiseSchema = z.promise(UserSchema);
type User = z.infer<typeof UserSchema>;

async function fetchUserById(id: string): Promise<User> {
  // Fetch and returns user parsed with Zod
  return UserPromiseSchema
    .parse
    // API response
    ();
}

const { data } = useQuery(['users', id], () => fetchUserById(id));

Ne reste qu’à se poser la question du coût d’alourdissement du code client.

Type union à partir d'un tableau en TypeScript

Une manière bien connue de créer un type union depuis un tableau en TypeScript.

const variants = ['primary', 'secondary', 'ghost'] as const;

type Variant = typeof variants[number];
// ^ type Variant = "primary" | "secondary" | "ghost"