marcolink

Use contentful sdk with axio fetch adapter

• https://github.com/contentful/contentful.js
• https://github.com/vespaiach/axios-fetch-adapter

install

npm install contentful
npm install @vespaiach/axios-fetch-adapter

marcolink

axios migration guide 0.x to 1.x

at the time writing this, the latest version was 1.4.0.

Resources

• unoffical migration guide

Request Interceptors

The provided type for request intercetptor functions changed:

marcolink

import { useEffect, useState } from "react";

function reduce(record: Record<string, boolean>): boolean {
  return Object.keys(record).reduce((previousValue, currentValue) => {
    if (!record[currentValue]) {
      return false;
    }
    return previousValue;
  }, true);
}

marcolink

import { CollectionProp } from 'contentful-management/types';

type CollectionFuncResponse<TItem> = Promise<CollectionProp<TItem>>;
type CollectionFunc<TItem> = (skip: number, limit: number) => CollectionFuncResponse<TItem>;

export async function getAllCollectionItems<TItem>(
  endpoint: CollectionFunc<TItem>,
  skip = 0,
  limit = 100
): Promise<Array<TItem>> {

marcolink

/*
    For very big spaces, we can create chunks of the export, and import them separately.
    To make it work, we have to keep a specific order.
 */

const fs = require('fs');
const path = require('path');

/* the order of types must be kept */
const types = [

marcolink

/*
 * https://github.com/contentful/contentful.js/blob/master/index.d.ts#L81
 */

type Entry<Fields> = {
  sys: {
    id: string
  }
  fields : Fields
}

marcolink

/*
https://www.typescriptlang.org/play?ssl=1&ssc=1&pln=16&pc=15#code/MYGwhgzhAECC0G8BQ1oAcCuAjEBLY0EALmEftAGa4CmIAJtALyIB2YAttQFzQDksvAL4p02PASIB7AMpEATrhYBzABQBKRCNRzqRDHJbQA8lgBW1YEQB0S3QAU5kqUQCeaakYoqiAC1wQ1K2BJFmI5DEtJOSsqWjoRYWEkUEgYACFoagAPImoWOhh4ZFRMHHJiUnJY+iZWDm4+NKEkJODQomgwWpZqAHc4dQBuZJDiaCxuvug0oaQR0MkQaisQSVUwNXmIReXV1Sw1IA
*/

class A {
  public static field = 'A'
  public toString() {
    return Object.getPrototypeOf(this).constructor.field
  }
}

marcolink

/**
 * @desc range 0 - 9
 */
type Digit = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9'

export declare namespace ISO8601 {
  /**
   * @desc range 00 - 24
   */
  type TimeHour = `${'0' | '1' | '2'}${'0' | '1' | '2' | '3' | '4'}`

marcolink

import * as React from "react";

function useRenderComponent<T>(Component: React.FC, initialProps?: T) {
    const [props, setProps] = React.useState<T>(initialProps);
    const updateProps = <K extends keyof T>(
        field: K,
        value: T[K]
    ) =>
        setProps((prevState: T) => ({
            ...prevState,

marcolink

Destruct custom react hooks (with typescript)

Bad

const [myValue] = useCustomHook();
//or
const [myValue, setMyValue] = useCustomHook();
//or
const [myValue, setMyValue, isMyValueValid] = useCustomHook();