Upgrade to H5Web version 15.0.0

data-viewer/package.json

@@ -11,7 +11,7 @@
   "dependencies": {
     "@emotion/react": "11.13.3",
     "@emotion/styled": "11.13.0",
-    "@h5web/app": "^12.0.1",
+    "@h5web/app": "^15.0.0",
     "@mui/material": "6.1.4",
     "@mui/styled-engine-sc": "6.1.4",
     "next": "14.2.30",

data-viewer/src/components/NexusViewer.tsx

@@ -1,7 +1,7 @@
 "use client";
 import "@h5web/app/dist/styles.css";
-import { App, H5GroveProvider } from "@h5web/app";
-import { useEffect, useState } from "react";
+import { App, H5GroveProvider, createBasicFetcher } from "@h5web/app";
+import { useEffect, useMemo, useState } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 import { CircularProgress, Stack } from "@mui/material";
 import { FileQueryUrl } from "@/components/utils/FileQueryUrl";
@@ -21,6 +21,14 @@ export default function NexusViewer(props: {
   const [loading, setLoading] = useState<boolean>(true);
   const [groveApiUrl, setApiUrl] = useState<string>(props.apiUrl);
 
+  const fetcher = useMemo(() => {
+    const headers: HeadersInit = {};
+    if (token !== "") {
+      headers["Authorization"] = `Bearer ${token}`;
+    }
+    return createBasicFetcher({ headers });
+  }, [token]);
+
   useEffect(() => {
     setLoading(true);
     const loadedToken = localStorage.getItem("scigateway:token") ?? "";
@@ -91,12 +99,8 @@ export default function NexusViewer(props: {
         <H5GroveProvider
           url={groveApiUrl}
           filepath={filepath}
-          axiosConfig={{
-            params: { file: filepath },
-            headers: {
-              Authorization: `Bearer ${token}`,
-            },
-          }}
+          fetcher={fetcher}
+          resetKeys={[filepath, token, groveApiUrl]}
         >
           <App propagateErrors />
         </H5GroveProvider>