[59] fallback option per hook

README.md

@@ -112,6 +112,7 @@ useSWR(() => "_", {
     cache: new LRU<string, CacheItem>(5e3),
     onSuccess: noop,
     onError: noop,
+    fallback: {},
     revalidateOnFocus: true,
     revalidateOnOnline: true,
 });
@@ -133,6 +134,7 @@ The options are merged with context, [read more](#context)
 | `onError`            | A callback that gets the error when it gets updated with a truthy error |                                                                                  `noop` |
 | `revalidateOnFocus`  |          Automatically revalidate when window has gotten focus          |                                                                                  `true` |
 | `revalidateOnOnline` |           Automatically revalidate when connection came back            |                                                                                  `true` |
+| `fallback`           |    A simple object in which you can provide initial values for keys     |                                                                                    `{}` |
 
 # Options with context
 
@@ -258,6 +260,9 @@ Currently only 1 option is available:
 
 For SSR there is another context `SWRFallback` which as you can guess by the name let's you add fallback data for specific keys
 
+> [!NOTE]
+> As of 4.1.0 you can do the same with passing fallback to the Options context
+
 Example usage:
 
 ```tsx
@@ -284,6 +289,8 @@ function App() {
 }
 ```
 
+This behavior can be scoped locally to a hook with the `fallback` option
+
 # useSWRInfinite
 
 A hook for infinite loading behavior

package.json

@@ -1,7 +1,7 @@
 {
     "name": "solid-swr",
     "description": "The beloved swr package ported over to solid",
-    "version": "4.0.9",
+    "version": "4.1.0",
     "type": "module",
     "main": "./dist/index.js",
     "types": "./dist/index.d.ts",

src/lib/context/fallback.ts

@@ -1,5 +1,5 @@
 import { createContext } from "solid-js";
 
-type Fallback = Record<string, any>;
+import { Fallback } from "~/types";
 
 export const SWRFallback = createContext<Fallback>({});

src/lib/hooks/useOptions.ts

@@ -36,6 +36,8 @@ export default function useOptions<Res, Err>(
 
             revalidateOnFocus: true,
             revalidateOnOnline: true,
+
+            fallback: {},
         } satisfies Required<Options<Res, Err>>,
         context,
         options

src/lib/index.ts

@@ -58,15 +58,17 @@ export default function useSWR<Res = unknown, Err = unknown>(
     _options: Options<Res, Err> = {}
 ) {
     const options = useOptions<Res, Err>(_options);
-    const fallback = useContext(SWRFallback);
+    const fallbackContext = useContext(SWRFallback);
+
+    const getFallback = (key: string) => options.fallback[key] ?? fallbackContext[key];
 
     const peekCache = (k: string | undefined): CacheItem<Res> | undefined => {
         if (k === undefined) return undefined;
 
         const fromCache = options.cache.get(k);
         if (fromCache) return fromCache;
 
-        const fromFallback = fallback[k] as Res | undefined;
+        const fromFallback = getFallback(k) as Res | undefined;
         if (fromFallback) return { busy: false, data: fromFallback };
 
         return undefined;

src/lib/types/index.d.ts

@@ -24,6 +24,8 @@ export type FetcherArg = {
 
 export type Fetcher<T> = (key: ExistentKey, arg: FetcherArg) => Promise<T>;
 
+export type Fallback = Record<string, any>;
+
 export type Options<Res, Err> = {
     /**
      * The function responsible for throwing errors and returning data
@@ -55,6 +57,11 @@ export type Options<Res, Err> = {
      */
     cache?: CacheImplements<Res>;
 
+    /**
+     * A local SWRFallback option, pass initial data to a single hook
+     */
+    fallback?: Fallback;
+
     /**
      * Automatically revalidate when window has gotten focus
      * @default true

src/tests/options.test.ts

@@ -196,3 +196,17 @@ it.each(["onError", "onSuccess"] as const)(
         expect(callback).toBeCalledWith({ a: { b: "foo" } });
     }
 );
+
+it("fallback passed locally works", () => {
+    const fetcher = vi.fn(async (k: string) => {
+        await waitForMs();
+        return k;
+    });
+
+    const { result } = renderHook(useSWR, [
+        () => "foo",
+        { fetcher, fallback: { foo: "foo" } },
+    ]);
+
+    expect(result.data.v).toBe("foo");
+});