Fix fallback behaviour

Author: marcospassos

package-lock.json

@@ -42,7 +42,7 @@
     "react-dom": "^16.8.0  || ^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@croct/plug": "https://pkg.pr.new/@croct/plug@321",
+    "@croct/plug": "https://pkg.pr.new/@croct/plug@322",
     "@croct/content": "https://pkg.pr.new/@croct/content@3"
   },
   "devDependencies": {

package.json

@@ -63,9 +63,6 @@ describe('useContent (CSR)', () => {
         expect(useCroct).toHaveBeenCalled();
         expect(useLoader).toHaveBeenCalledWith({
             cacheKey: hash(`useContent:${cacheKey}:${slotId}:${preferredLocale}:${JSON.stringify(attributes)}`),
-            fallback: {
-                title: 'error',
-            },
             expiration: 50,
             loader: expect.any(Function),
         });
@@ -76,6 +73,7 @@ describe('useContent (CSR)', () => {
             .loader();
 
         expect(fetch).toHaveBeenCalledWith(slotId, {
+            fallback: {title: 'error'},
             preferredLocale: 'en',
             attributes: attributes,
         });
@@ -234,6 +232,12 @@ describe('useContent (CSR)', () => {
         const slotId = 'slot-id';
         const preferredLocale = 'en';
 
+        const fetch: Plug['fetch'] = jest.fn().mockResolvedValue({
+            content: {},
+        });
+
+        jest.mocked(useCroct).mockReturnValue({fetch: fetch} as Plug);
+
         jest.mocked(getSlotContent).mockReturnValue(content);
 
         renderHook(
@@ -245,18 +249,28 @@ describe('useContent (CSR)', () => {
 
         expect(getSlotContent).toHaveBeenCalledWith(slotId, preferredLocale);
 
-        expect(useLoader).toHaveBeenCalledWith(
-            expect.objectContaining({
-                fallback: content,
-            }),
-        );
+        jest.mocked(useLoader)
+            .mock
+            .calls[0][0]
+            .loader();
+
+        expect(fetch).toHaveBeenCalledWith(slotId, {
+            fallback: content,
+            preferredLocale: preferredLocale,
+        });
     });
 
     it('should use the provided fallback value', () => {
         const fallback = null;
         const slotId = 'slot-id';
         const preferredLocale = 'en';
 
+        const fetch: Plug['fetch'] = jest.fn().mockResolvedValue({
+            content: {},
+        });
+
+        jest.mocked(useCroct).mockReturnValue({fetch: fetch} as Plug);
+
         jest.mocked(getSlotContent).mockReturnValue(null);
 
         renderHook(
@@ -266,10 +280,14 @@ describe('useContent (CSR)', () => {
             }),
         );
 
-        expect(useLoader).toHaveBeenCalledWith(
-            expect.objectContaining({
-                fallback: fallback,
-            }),
-        );
+        jest.mocked(useLoader)
+            .mock
+            .calls[0][0]
+            .loader();
+
+        expect(fetch).toHaveBeenCalledWith(slotId, {
+            fallback: fallback,
+            preferredLocale: preferredLocale,
+        });
     });
 });

src/hooks/useContent.test.ts

@@ -8,7 +8,7 @@ import {useCroct} from './useCroct';
 import {isSsr} from '../ssr-polyfills';
 import {hash} from '../hash';
 
-export type UseContentOptions<I, F> = FetchOptions & {
+export type UseContentOptions<I, F> = FetchOptions<F> & {
     fallback?: F,
     initial?: I,
     cacheKey?: string,
@@ -21,20 +21,20 @@ function useCsrContent<I, F>(
     options: UseContentOptions<I, F> = {},
 ): SlotContent | I | F {
     const {
-        fallback,
         cacheKey,
         expiration,
+        fallback: fallbackContent,
         initial: initialContent,
         staleWhileLoading = false,
         ...fetchOptions
     } = options;
 
     const {preferredLocale} = fetchOptions;
     const defaultContent = useMemo(
-        () => getSlotContent(id, preferredLocale) as F|null ?? undefined,
+        () => getSlotContent(id, preferredLocale) as SlotContent|null ?? undefined,
         [id, preferredLocale],
     );
-
+    const fallback = fallbackContent === undefined ? defaultContent : fallbackContent;
     const [initial, setInitial] = useState<SlotContent | I | F | undefined>(
         () => (initialContent === undefined ? defaultContent : initialContent),
     );
@@ -48,9 +48,8 @@ function useCsrContent<I, F>(
             + `:${preferredLocale ?? ''}`
             + `:${JSON.stringify(fetchOptions.attributes ?? {})}`,
         ),
-        loader: () => croct.fetch(id, fetchOptions).then(({content}) => content),
+        loader: () => croct.fetch(id, {...fetchOptions, fallback: fallback}).then(({content}) => content),
         initial: initial,
-        fallback: fallback === undefined ? defaultContent : fallback,
         expiration: expiration,
     });