Rewrite data fetching

Author: ije

framework/react/context.ts

@@ -4,6 +4,7 @@ import { createContext } from "react";
 export type RouterContextProps = {
   url: URL;
   params: Record<string, string>;
+  ssrHeadCollection?: string[];
   createPortal?: (children: ReactNode, container: Element, key?: null | string) => ReactPortal;
 };
 
@@ -12,15 +13,39 @@ export const RouterContext = createContext<RouterContextProps>({
   params: {},
 });
 
-export type DataContextProps = {
-  dataUrl: string;
-  dataCache: Map<string, { data?: unknown; dataCacheTtl?: number; dataExpires?: number }>;
-  ssrHeadCollection?: string[];
+export type HttpMethod = "get" | "post" | "put" | "patch" | "delete";
+
+export type UpdateStrategy<T = unknown> = "none" | "replace" | {
+  optimisticUpdate?: (data: T) => T;
+  onFailure?: (error: Error) => void;
+  replace?: boolean;
+};
+
+export type Mutation<T> = {
+  [key in "post" | "put" | "patch" | "delete"]: (
+    data?: unknown,
+    updateStrategy?: UpdateStrategy<T>,
+  ) => Promise<Response>;
+};
+
+export type DataContextProps<T = unknown> = {
+  suspenseData?: { current?: T };
+  data: T;
+  isMutating: HttpMethod | boolean;
+  mutation: Mutation<T>;
+  reload: (signal?: AbortSignal) => Promise<void>;
 };
 
 export const DataContext = createContext<DataContextProps>({
-  dataUrl: "/",
-  dataCache: new Map(),
+  data: undefined,
+  isMutating: false,
+  mutation: {
+    post: () => Promise.resolve(new Response(null)),
+    put: () => Promise.resolve(new Response(null)),
+    patch: () => Promise.resolve(new Response(null)),
+    delete: () => Promise.resolve(new Response(null)),
+  },
+  reload: () => Promise.resolve(undefined),
 });
 
 export type ForwardPropsContextProps = {

framework/react/data.ts

@@ -1,63 +1,59 @@
-import { useCallback, useContext, useEffect, useMemo, useState } from "react";
+import type { FC, PropsWithChildren } from "react";
+import { createElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import FetchError from "../core/fetch_error.ts";
+import type { DataContextProps, HttpMethod, UpdateStrategy } from "./context.ts";
 import { DataContext } from "./context.ts";
 
-export type HttpMethod = "get" | "post" | "put" | "patch" | "delete";
-
-export type UpdateStrategy<T> = "none" | "replace" | {
-  optimisticUpdate?: (data: T) => T;
-  onFailure?: (error: Error) => void;
-  replace?: boolean;
+export type RouteData = {
+  data?: unknown;
+  dataCacheTtl?: number;
+  dataExpires?: number;
 };
 
-export const useData = <T = unknown>(): {
-  data: T;
-  isMutating: HttpMethod | boolean;
-  mutation: typeof mutation;
-  reload: (signal?: AbortSignal) => Promise<void>;
-} => {
-  const { dataUrl, dataCache } = useContext(DataContext);
+export type DataProviderProps = PropsWithChildren<{
+  dataUrl: string;
+  dataCache: Map<string, RouteData>;
+}>;
+
+export const DataProvider: FC<DataProviderProps> = ({ dataUrl, dataCache, children }) => {
+  const suspenseData = useRef<unknown>();
   const [data, setData] = useState(() => {
     const cached = dataCache.get(dataUrl);
     if (cached) {
-      if (cached.data instanceof Error) {
-        throw cached.data;
-      }
       if (typeof cached.data === "function") {
         const data = cached.data();
         if (data instanceof Promise) {
-          throw data.then((data) => {
-            cached.data = data;
+          return data.then((data) => {
+            suspenseData.current = data;
           }).catch((error) => {
-            cached.data = error;
+            suspenseData.current = error;
           });
         }
         throw new Error(`Data for ${dataUrl} has invalid type [function].`);
       }
-      return cached.data as T;
+      return cached.data;
     }
     throw new Error(`Data for ${dataUrl} is not found`);
   });
   const [isMutating, setIsMutating] = useState<HttpMethod | boolean>(false);
-  const action = useCallback(async (method: HttpMethod, fetcher: Promise<Response>, update: UpdateStrategy<T>) => {
+  const action = useCallback(async (method: HttpMethod, fetcher: Promise<Response>, update: UpdateStrategy) => {
     const updateIsObject = update && typeof update === "object" && update !== null;
     const optimistic = updateIsObject && typeof update.optimisticUpdate === "function";
     const replace = update === "replace" || (updateIsObject && !!update.replace);
 
-    setIsMutating(method);
-
-    let rollbackData: T | undefined = undefined;
+    let rollbackData: unknown = undefined;
     if (optimistic) {
       const optimisticUpdate = update.optimisticUpdate!;
-      setData((prev) => {
+      setData((prev: unknown) => {
         if (prev !== undefined) {
           rollbackData = prev;
-          return optimisticUpdate(clone(prev));
+          return optimisticUpdate(shallowClone(prev));
         }
         return prev;
       });
     }
 
+    setIsMutating(method);
     const res = await fetcher;
     if (res.status >= 400) {
       if (optimistic) {
@@ -130,16 +126,16 @@ export const useData = <T = unknown>(): {
   }, [dataUrl]);
   const mutation = useMemo(() => {
     return {
-      post: (data?: unknown, update?: UpdateStrategy<T>) => {
+      post: (data?: unknown, update?: UpdateStrategy) => {
         return action("post", send("post", dataUrl, data), update ?? "none");
       },
-      put: (data?: unknown, update?: UpdateStrategy<T>) => {
+      put: (data?: unknown, update?: UpdateStrategy) => {
         return action("put", send("put", dataUrl, data), update ?? "none");
       },
-      patch: (data?: unknown, update?: UpdateStrategy<T>) => {
+      patch: (data?: unknown, update?: UpdateStrategy) => {
         return action("patch", send("patch", dataUrl, data), update ?? "none");
       },
-      delete: (data?: unknown, update?: UpdateStrategy<T>) => {
+      delete: (data?: unknown, update?: UpdateStrategy) => {
         return action("delete", send("delete", dataUrl, data), update ?? "none");
       },
     };
@@ -149,19 +145,40 @@ export const useData = <T = unknown>(): {
     const now = Date.now();
     const cache = dataCache.get(dataUrl);
     let ac: AbortController | null = null;
-    if (cache === undefined || cache.dataExpires === undefined || cache.dataExpires < now) {
+    if (
+      cache === undefined ||
+      (cache.data !== undefined && (cache.dataExpires === undefined || cache.dataExpires < now))
+    ) {
       ac = new AbortController();
       reload(ac.signal).finally(() => {
         ac = null;
       });
     } else if (cache.data !== undefined) {
-      setData(cache.data as never);
+      setData(cache.data);
     }
 
     return () => ac?.abort();
   }, [dataUrl]);
 
-  return { data, isMutating, mutation, reload };
+  return createElement(
+    DataContext.Provider,
+    { value: { suspenseData, data, isMutating, mutation, reload } },
+    children,
+  );
+};
+
+export const useData = <T = unknown>(): Omit<DataContextProps<T>, "suspenseData"> => {
+  const { suspenseData, data, ...rest } = useContext(DataContext) as DataContextProps<T>;
+  if (data instanceof Promise) {
+    if (suspenseData?.current instanceof Error) {
+      throw suspenseData.current;
+    }
+    if (suspenseData?.current !== undefined) {
+      return { ...rest, data: suspenseData.current };
+    }
+    throw data;
+  }
+  return { data, ...rest };
 };
 
 function send(method: HttpMethod, href: string, data: unknown) {
@@ -189,8 +206,12 @@ function send(method: HttpMethod, href: string, data: unknown) {
   return fetch(href, { method, body, headers, redirect: "manual" });
 }
 
-function clone<T>(obj: T): T {
-  // deno-lint-ignore ban-ts-comment
-  // @ts-ignore
-  return typeof structuredClone === "function" ? structuredClone(obj) : JSON.parse(JSON.stringify(obj));
+function shallowClone<T>(obj: T): T {
+  if (obj === null || typeof obj !== "object") {
+    return obj;
+  }
+  if (Array.isArray(obj)) {
+    return [...obj] as unknown as T;
+  }
+  return { ...obj };
 }

framework/react/head.ts

@@ -1,10 +1,10 @@
 import type { FC, ReactNode } from "react";
 import { Children, createElement, Fragment, isValidElement, useContext, useEffect, useMemo } from "react";
 import util from "../../lib/util.ts";
-import { DataContext } from "./context.ts";
+import { RouterContext } from "./context.ts";
 
 export const Head: FC<{ children?: ReactNode }> = (props) => {
-  const { ssrHeadCollection } = useContext(DataContext);
+  const { ssrHeadCollection } = useContext(RouterContext);
   const [els, forwardNodes] = useMemo(() => parse(props.children), [
     props.children,
   ]);