@plasius/react-query 1.0.3

package/src/useMutation.ts

@@ -0,0 +1,87 @@
+
+
+import { useState, useCallback } from "react";
+
+interface UseMutationOptions<TData, TError, TVariables, TContext = unknown> {
+  onMutate?: (variables: TVariables) => Promise<TContext> | TContext | void;
+  onSuccess?: (
+    data: TData,
+    variables: TVariables,
+    context: TContext | undefined
+  ) => void;
+  onError?: (
+    error: TError,
+    variables: TVariables,
+    context: TContext | undefined
+  ) => void;
+  onSettled?: (
+    data: TData | undefined,
+    error: TError | undefined,
+    variables: TVariables | undefined,
+    context: TContext | undefined
+  ) => void;
+}
+
+interface UseMutationResult<TData, TError, TVariables, TContext = unknown> {
+  mutate: (variables: TVariables) => void;
+  mutateAsync: (variables: TVariables) => Promise<TData>;
+  reset: () => void;
+  data: TData | undefined;
+  error: TError | undefined;
+  isLoading: boolean;
+  context: TContext | undefined;
+}
+
+export function useMutation<TData, TError = unknown, TVariables = void, TContext = unknown>(
+  mutationFn: (variables: TVariables) => Promise<TData>,
+  options?: UseMutationOptions<TData, TError, TVariables, TContext>
+): UseMutationResult<TData, TError, TVariables, TContext> {
+  const [data, setData] = useState<TData>();
+  const [error, setError] = useState<TError>();
+  const [isLoading, setIsLoading] = useState(false);
+  const [context, setContext] = useState<TContext | undefined>(undefined);
+
+  const mutateAsync = useCallback(async (variables: TVariables): Promise<TData> => {
+    setIsLoading(true);
+    setError(undefined);
+    try {
+      if (options?.onMutate) {
+        setContext((await options.onMutate(variables)) as TContext | undefined);
+      }
+      const result = await mutationFn(variables);
+      setData(result);
+      options?.onSuccess?.(result, variables, context);
+      options?.onSettled?.(result, undefined, variables, context);
+      return result;
+    } catch (err) {
+      const typedErr = err as TError;
+      setError(typedErr);
+      options?.onError?.(typedErr, variables, context);
+      options?.onSettled?.(undefined, typedErr, variables, context);
+      throw typedErr as Error;
+    } finally {
+      setIsLoading(false);
+    }
+  }, [mutationFn, options]);
+
+  const mutate = useCallback((variables: TVariables) => {
+    void mutateAsync(variables);
+  }, [mutateAsync]);
+
+  const reset = useCallback(() => {
+    setData(undefined);
+    setError(undefined);
+    setIsLoading(false);
+    setContext(undefined);
+  }, []);
+
+  return {
+    mutate,
+    mutateAsync,
+    reset,
+    data,
+    error,
+    isLoading,
+    context
+  };
+}

package/src/useQuery.ts

@@ -0,0 +1,60 @@
+
+
+import { useEffect, useState, useCallback } from "react";
+import {
+  getCache,
+  setCache,
+  setCacheError,
+  subscribe,
+  unsubscribe,
+} from "./globalCache.js";
+
+interface UseQueryResult<T> {
+  data: T | undefined;
+  error: unknown;
+  isLoading: boolean;
+  refetch: () => void;
+}
+
+export function useQuery<T>(key: string, fetcher: () => Promise<T>): UseQueryResult<T> {
+  const cached = getCache<T>(key);
+  const [data, setData] = useState<T | undefined>(cached.data);
+  const [error, setError] = useState<unknown>(cached.error);
+  const [isLoading, setIsLoading] = useState(!cached.data && !cached.error);
+
+  const load = useCallback(() => {
+    setIsLoading(true);
+    fetcher()
+      .then((result) => {
+        setCache(key, result);
+      })
+      .catch((err) => {
+        setCacheError(key, err);
+      });
+  }, [key, fetcher]);
+
+  useEffect(() => {
+    const listener = (data: T | undefined, error: unknown) => {
+      setData(data);
+      setError(error);
+      setIsLoading(false);
+    };
+
+    subscribe<T>(key, listener);
+
+    if (!cached.data && !cached.error) {
+      load();
+    }
+
+    return () => {
+      unsubscribe<T>(key, listener);
+    };
+  }, [key, cached.data, cached.error, load]);
+
+  return {
+    data,
+    error,
+    isLoading,
+    refetch: load,
+  };
+}

package/src/useQueryClient.ts

@@ -0,0 +1,29 @@
+import {
+  getCache,
+  setCache,
+  setCacheError,
+} from "./globalCache.js";
+
+export function useQueryClient() {
+  return {
+    getQueryData: <T>(key: string): T | undefined => {
+      const { data } = getCache<T>(key);
+      return data;
+    },
+    setQueryData: <T>(key: string, data: T): void => {
+      setCache<T>(key, data);
+    },
+    invalidateQuery: <T>(key: string, refetch?: () => Promise<T>): void => {
+      if (refetch) {
+        refetch()
+          .then((result) => setCache<T>(key, result))
+          .catch((err) => setCacheError<T>(key, err));
+      } else {
+        setCache<T>(key, undefined as unknown as T); // triggers update with undefined
+      }
+    },
+    clearQuery: (key: string): void => {
+      setCache<unknown>(key, undefined as unknown);
+    },
+  };
+}