feat: add fallbackData option (#12)

* test: create tests for fallbackData option * feat: implement fallbackData option * docs: document fallbackData option
edumudu · Aug 9, 2022 · 708b7c6 · 708b7c6
1 parent caefe9b
commit 708b7c6
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 1 deletion.
diff --git a/docs/options.md b/docs/options.md
@@ -23,5 +23,6 @@ const { data, error, isValidating, mutate } = useSWR(key, fetcher, options)
 - `revalidateOnReconnect = true` - Automatically revalidate when the browser regains a network connection
 - `revalidateIfStale = true` - Automatically revalidate if there is stale data
 - `dedupingInterval = 2000` - dedupe requests with the same key in this time span in milliseconds
+- `fallbackData` - initial data to be returned (note: This is per-composable, but also be passed in global config)
 - `onSuccess(data, key, config)` - callback function when a request finishes successfully
 - `onError(err, key, config)` - callback function when a request returns an error
diff --git a/lib/composables/swr/index.ts b/lib/composables/swr/index.ts
@@ -20,6 +20,7 @@ export const useSWR = <Data = any, Error = any>(
     revalidateOnReconnect,
     revalidateIfStale,
     dedupingInterval,
+    fallbackData,
     onSuccess,
     onError,
   } = mergedConfig;
@@ -31,7 +32,7 @@ export const useSWR = <Data = any, Error = any>(
 
   const error = valueInCache.value ? toRef(valueInCache.value, 'error') : ref<Error>();
   const isValidating = valueInCache.value ? toRef(valueInCache.value, 'isValidating') : ref(true);
-  const data = valueInCache.value ? toRef(valueInCache.value, 'data') : ref();
+  const data = valueInCache.value ? toRef(valueInCache.value, 'data') : ref(fallbackData);
   const fetchedIn = valueInCache.value ? toRef(valueInCache.value, 'fetchedIn') : ref(new Date());
 
   const fetchData = async () => {

diff --git a/lib/composables/swr/swr.spec.ts b/lib/composables/swr/swr.spec.ts
@@ -531,4 +531,41 @@ describe('useSWR', () => {
       expect.objectContaining(mergedConfig),
     );
   });
+
+  it('should return fallbackData as initial value', () => {
+    const fallbackData = 'fallback';
+
+    const { data } = useInjectedSetup(
+      () => configureGlobalSWR({ cacheProvider }),
+      () => useSWR(defaultKey, defaultFetcher, { fallbackData }),
+    );
+
+    expect(data.value).toBe(fallbackData);
+  });
+
+  it('should return global fallbackData as initial value', () => {
+    const fallbackData = 'fallback';
+
+    const { data } = useInjectedSetup(
+      () => configureGlobalSWR({ cacheProvider, fallbackData }),
+      () => useSWR(defaultKey, defaultFetcher),
+    );
+
+    expect(data.value).toBe(fallbackData);
+  });
+
+  it('should return stale data fallbackData and stale data are present', async () => {
+    const fallbackData = 'fallback';
+    const cahedData = 'cached value';
+
+    setDataToCache(defaultKey, { data: cahedData });
+
+    const { data } = useInjectedSetup(
+      () => configureGlobalSWR({ cacheProvider, fallbackData }),
+      () => useSWR(defaultKey, defaultFetcher),
+    );
+
+    await flushPromises();
+    expect(data.value).toBe(cahedData);
+  });
 });
diff --git a/lib/types/lib.ts b/lib/types/lib.ts
@@ -61,6 +61,11 @@ export type SWRConfig<Data = any, Err = any> = {
    */
   dedupingInterval: number;
 
+  /**
+   * initial data to be returned (note: ***This is per-composable***)
+   */
+  fallbackData?: Data;
+
   /**
    * called when a request finishes successfully
    */