diff --git a/docs/CheckForApplicationUpdate.md b/docs/CheckForApplicationUpdate.md index 64c42ca6fa7..f8c173a905b 100644 --- a/docs/CheckForApplicationUpdate.md +++ b/docs/CheckForApplicationUpdate.md @@ -47,6 +47,7 @@ export const App = () => ( | `disabled` | Optional | boolean | `false` in `production` mode | Whether the automatic check is disabled | | `notification` | Optional | ReactElement | | The notification to display to the user when an update is available | | `url` | Optional | string | current URL | The URL to download to check for code update | +| `fetchOptions` | Optional | `RequestInit | undefined` | `undefined` | The options passed to `fetch` when checking for an update | ## `interval` @@ -138,6 +139,12 @@ export const MyLayout = ({ children, ...props }: LayoutProps) => ( ); ``` +## `fetchOptions` + +You can also customize the request [options](https://developer.mozilla.org/en-US/docs/Web/API/fetch#options) passed along to fetch function when detecting updates. + +Tip: Depending on your server-side HTTP cache settings, you may want to set the fetchOptions to `{ cache: "no-cache" }` to check if the resource has changed. + ## Internationalization You can customize the texts of the default notification by overriding the following keys: diff --git a/packages/ra-core/src/util/useCheckForApplicationUpdate.ts b/packages/ra-core/src/util/useCheckForApplicationUpdate.ts index 02b7f6a531d..e61825ba739 100644 --- a/packages/ra-core/src/util/useCheckForApplicationUpdate.ts +++ b/packages/ra-core/src/util/useCheckForApplicationUpdate.ts @@ -10,6 +10,7 @@ import { useEvent } from './useEvent'; * @param {UseCheckForApplicationUpdateOptions} options The options * @param {Function} options.onNewVersionAvailable The function to call when a new version of the application is available. * @param {string} options.url Optional. The URL to download to check for code update. Defaults to the current URL. + * @param {RequestInit} options.fetchOptions Optional. The options passed to fetch function when checking for update. * @param {number} options.interval Optional. The interval in milliseconds between two checks. Defaults to 3600000 (1 hour). * @param {boolean} options.disabled Optional. Whether the check should be disabled. Defaults to false. */ @@ -18,6 +19,7 @@ export const useCheckForApplicationUpdate = ( ) => { const { url = window.location.href, + fetchOptions, interval: delay = ONE_HOUR, onNewVersionAvailable: onNewVersionAvailableProp, disabled = process.env.NODE_ENV !== 'production', @@ -28,18 +30,19 @@ export const useCheckForApplicationUpdate = ( useEffect(() => { if (disabled) return; - getHashForUrl(url).then(hash => { + getHashForUrl(url, fetchOptions).then(hash => { if (hash != null) { currentHash.current = hash; } }); - }, [disabled, url]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [disabled, url, JSON.stringify(fetchOptions)]); useEffect(() => { if (disabled) return; const interval = setInterval(() => { - getHashForUrl(url) + getHashForUrl(url, fetchOptions) .then(hash => { if (hash != null && currentHash.current !== hash) { // Store the latest hash to avoid calling the onNewVersionAvailable function multiple times @@ -53,12 +56,20 @@ export const useCheckForApplicationUpdate = ( }); }, delay); return () => clearInterval(interval); - }, [delay, onNewVersionAvailable, disabled, url]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [ + delay, + onNewVersionAvailable, + disabled, + url, + // eslint-disable-next-line react-hooks/exhaustive-deps + JSON.stringify(fetchOptions), + ]); }; -const getHashForUrl = async (url: string) => { +const getHashForUrl = async (url: string, fetchOptions?: RequestInit) => { try { - const response = await fetch(url); + const response = await fetch(url, fetchOptions); if (!response.ok) return null; const text = await response.text(); return hash(text); @@ -90,5 +101,6 @@ export interface UseCheckForApplicationUpdateOptions { onNewVersionAvailable: () => void; interval?: number; url?: string; + fetchOptions?: RequestInit; disabled?: boolean; } diff --git a/packages/ra-ui-materialui/src/layout/CheckForApplicationUpdate.tsx b/packages/ra-ui-materialui/src/layout/CheckForApplicationUpdate.tsx index 64ba87d3e8c..8a3000a9dde 100644 --- a/packages/ra-ui-materialui/src/layout/CheckForApplicationUpdate.tsx +++ b/packages/ra-ui-materialui/src/layout/CheckForApplicationUpdate.tsx @@ -14,6 +14,7 @@ import { ApplicationUpdatedNotification } from './ApplicationUpdatedNotification * @param {boolean} options.disabled Optional. Whether the check should be disabled. Defaults to false. * @param {string|ReactElement} props.notification The notification to display to the user. Displayed only if `updateMode` is manual. Defaults to ``. * @param {string} options.url Optional. The URL to download to check for code update. Defaults to the current URL. + * @param {RequestInit} options.fetchOptions Optional. The options passed to fetch function when checking for update. * @param {number} options.interval Optional. The interval in milliseconds between two checks. Defaults to 3600000 (1 hour). * * @example Basic usage