SWR helper

swr-helper-sample.ts

import ky from "ky";

const baseApi = ky
  .create({
    prefixUrl: "http://localhost:8080",
    headers: { "Content-Type": "application/json" },
  });

type TodoList = {
  items: Todo[];
  total: number;
};

type Todo = {
  id: string;
  title: string;
  done: boolean;
};

const fetcher = (
  url: string
): Promise<TodoList> => {
  return baseApi
    .get(url)
    .json();
};

const useTodos = (
  options?: SWRConfiguration
) => {
  const { data, error, mutate } = useSWR<TodoList>(
    ["todos", ],
    fetcher,
    options
  );

  return {
    data,
    loading: !error && !data,
    error,
    mutate,
  };
};


const TodosPage = () => {
  const { data, loading, prevData, mutate } = withPrevData(
    useTodos({ page: 0, limit: 10 }, { refreshInterval: 5000 })
  );
  // render using data/prevData
}

swr-helper.ts

import { useEffect, useRef, useState } from "react";
import { ApiHookResult } from "./types";
import { KeyedMutator } from "swr";

export type ApiHookResult<ResType> = {
  data?: ResType;
  loading: boolean;
  error?: Error;
  mutate: KeyedMutator<ResType>;
};

/**
 * Add prevData to ApiHookResult
 * @param hookResult SWR hook result
 * @returns hookResult with prevData
 */
export const withPrevData = <T>(
  hookResult: ApiHookResult<T>
): ApiHookResult<T> & { prevData: T | undefined } => {
  const [prevData, setPrevData] = useState<T | undefined>(undefined);
  const prevDataRef = useRef<T | undefined>(undefined);
  useEffect(() => {
    setPrevData(prevDataRef.current);
    prevDataRef.current = hookResult.data;
  }, [hookResult.data]);
  return { ...hookResult, prevData };
};