@xyo-network/react-api 2.38.18 → 2.39.0-rc.1

package/src/components/ApiHistory/ApiHistory.stories.tsx

@@ -0,0 +1,100 @@
+/* eslint-disable import/no-internal-modules */
+import { Typography } from '@mui/material'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { useAsyncEffect } from '@xylabs/react-shared'
+import { XyoArchive } from '@xyo-network/api'
+import { useAuthState } from '@xyo-network/react-auth'
+import { AuthServiceWrapper } from '@xyo-network/react-auth-service'
+import { authDecorator, WrappedAuthComponent } from '@xyo-network/react-storybook'
+import { useEffect, useState } from 'react'
+
+import { ApiProvider, useApi } from '../../contexts'
+import { ApiHistory } from './ApiHistory'
+
+const StorybookEntry = {
+  argTypes: {
+    apiDomain: {
+      default: 'https://beta.api.archivist.xyo.network',
+    },
+  },
+  component: ApiProvider,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'archivist-api/ApiHistory/ApiHistory',
+} as ComponentMeta<WrappedAuthComponent>
+
+const DemoArchiveFetcher = () => {
+  const [myArchives, setMyArchives] = useState<XyoArchive[]>([])
+  const { api, currentToken } = useApi()
+  const { state } = useAuthState()
+  const [successfulCall, setSuccessfulCall] = useState(false)
+
+  useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    async (mounted) => {
+      if (state?.jwtToken && currentToken && state?.loggedInAccount) {
+        const archives = await api?.archives?.get()
+        if (archives && mounted()) {
+          setMyArchives(archives)
+          setSuccessfulCall(true)
+        }
+      }
+    },
+    [api, state?.jwtToken, currentToken, state?.loggedInAccount, setSuccessfulCall],
+  )
+
+  useEffect(() => {
+    if (!state?.loggedInAccount) {
+      setMyArchives([])
+      setSuccessfulCall(false)
+    }
+  }, [state?.loggedInAccount])
+
+  return (
+    <>
+      <AuthServiceWrapper />
+      <p>My Archives</p>
+      {successfulCall && (
+        <Typography color="success.main" variant="body1">
+          Successfully made authenticated request!!
+        </Typography>
+      )}
+      <ul>
+        {myArchives.map((archive, index) => (
+          <li key={index}>{archive.archive}</li>
+        ))}
+      </ul>
+      <Typography variant="h6">Responses</Typography>
+      <ApiHistory />
+    </>
+  )
+}
+
+const Template: ComponentStory<WrappedAuthComponent> = () => {
+  const { state } = useAuthState()
+  const jwtToken = state?.jwtToken
+  return (
+    <ApiProvider
+      errorHistoryMaxDepth={10}
+      successHistoryMaxDepth={10}
+      failureHistoryMaxDepth={10}
+      responseHistoryMaxDepth={10}
+      apiDomain="https://beta.api.archivist.xyo.network"
+      jwtToken={jwtToken}
+    >
+      <DemoArchiveFetcher />
+    </ApiProvider>
+  )
+}
+
+const Default = Template.bind({})
+Default.args = {}
+Default.decorators = [authDecorator]
+
+export { Default }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/ApiHistory/ApiHistory.tsx

@@ -0,0 +1,42 @@
+import { Typography, useTheme } from '@mui/material'
+import { ButtonEx } from '@xylabs/react-button'
+import { FlexBoxProps, FlexCol } from '@xylabs/react-flexbox'
+import { useState } from 'react'
+
+import { ApiCallEntry } from './ApiCallEntry'
+import { ApiCallTable } from './ApiCallTable'
+import { useBuildHistoryData } from './useBuildHistoryData'
+
+export const ApiHistory: React.FC<FlexBoxProps> = (props) => {
+  const [visible, setVisible] = useState(false)
+  const theme = useTheme()
+  const histories = useBuildHistoryData()
+
+  return (
+    <FlexCol flexGrow={1} {...props}>
+      {visible ? (
+        <>
+          <ButtonEx variant="contained" size="small" onClick={() => setVisible(false)}>
+            Hide Api History
+          </ButtonEx>
+          {histories?.map((history, index) => (
+            <FlexCol flexGrow={1} key={index}>
+              <Typography marginTop={1} variant="h6">
+                {history.heading}
+              </Typography>
+              <ApiCallTable sx={{ marginBottom: theme.spacing(4) }}>
+                {history.callHistory?.map((response, index) => (
+                  <ApiCallEntry bgColor={history.bgColor} call={response} index={index} key={index} />
+                ))}
+              </ApiCallTable>
+            </FlexCol>
+          ))}
+        </>
+      ) : (
+        <ButtonEx variant="contained" size="small" onClick={() => setVisible(true)}>
+          Show Api History
+        </ButtonEx>
+      )}
+    </FlexCol>
+  )
+}

package/src/components/ApiHistory/index.ts

@@ -0,0 +1,2 @@
+export * from './ApiCallEntry'
+export * from './ApiHistory'

package/src/components/ApiHistory/useBuildHistoryData.tsx

@@ -0,0 +1,35 @@
+import { lighten, useTheme } from '@mui/material'
+
+import { useApi } from '../../contexts'
+
+const useBuildHistoryData = () => {
+  const { errorHistory, responseHistory, successHistory, failureHistory } = useApi()
+  const theme = useTheme()
+
+  const histories = [
+    {
+      bgColor: lighten(theme.palette.success.light, 0.85),
+      callHistory: successHistory,
+      heading: 'Successes',
+    },
+    {
+      bgColor: lighten(theme.palette.error.light, 0.85),
+      callHistory: failureHistory,
+      heading: 'Failures',
+    },
+    {
+      bgColor: lighten(theme.palette.error.light, 0.85),
+      callHistory: errorHistory,
+      heading: 'Errors',
+    },
+    {
+      bgColor: lighten(theme.palette.info.light, 0.85),
+      callHistory: responseHistory,
+      heading: 'Responses',
+    },
+  ]
+
+  return histories
+}
+
+export { useBuildHistoryData }

package/src/components/index.ts

@@ -1,3 +1,3 @@
-export * from './ApiErrorAlert'
+export * from './ApiHistory'
 export * from './JsonRouteWrapper'
 export * from './ResultLoader'

package/src/contexts/ArchivistApi/ArchivistApiProvider.stories.tsx

@@ -0,0 +1,104 @@
+/* eslint-disable import/no-internal-modules */
+import { Typography } from '@mui/material'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { useAsyncEffect } from '@xylabs/react-shared'
+import { XyoArchive } from '@xyo-network/api'
+import { useAuthState } from '@xyo-network/react-auth'
+import { AuthServiceWrapper } from '@xyo-network/react-auth-service'
+import { authDecorator, WrappedAuthComponent } from '@xyo-network/react-storybook'
+import { useEffect, useState } from 'react'
+
+import { ApiProvider } from './Provider'
+import { useApi } from './use'
+
+const StorybookEntry = {
+  argTypes: {
+    apiDomain: {
+      default: 'https://beta.api.archivist.xyo.network',
+    },
+  },
+  component: ApiProvider,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'archivist-api/ArchivistApiProvider',
+} as ComponentMeta<WrappedAuthComponent>
+
+const DemoArchiveFetcher = () => {
+  const [myArchives, setMyArchives] = useState<XyoArchive[]>([])
+  const { api, currentToken, responseHistory } = useApi()
+  const { state } = useAuthState()
+  const [successfulCall, setSuccessfulCall] = useState(false)
+
+  useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    async (mounted) => {
+      if (state?.jwtToken && currentToken && state?.loggedInAccount) {
+        const archives = await api?.archives?.get()
+        if (archives && mounted()) {
+          setMyArchives(archives)
+          setSuccessfulCall(true)
+        }
+      }
+    },
+    [api, state?.jwtToken, currentToken, state?.loggedInAccount, setSuccessfulCall],
+  )
+
+  useEffect(() => {
+    if (!state?.loggedInAccount) {
+      setMyArchives([])
+      setSuccessfulCall(false)
+    }
+  }, [state?.loggedInAccount])
+
+  return (
+    <>
+      <AuthServiceWrapper />
+      <p>My Archives</p>
+      {successfulCall && (
+        <Typography color="success.main" variant="body1">
+          Successfully made authenticated request!!
+        </Typography>
+      )}
+      <ul>
+        {myArchives.map((archive, index) => (
+          <li key={index}>{archive.archive}</li>
+        ))}
+      </ul>
+      <Typography variant="h6">Responses</Typography>
+      {responseHistory?.map((response, index) => (
+        <Typography key={index} variant="body1">
+          {response.status}
+        </Typography>
+      ))}
+    </>
+  )
+}
+
+const Template: ComponentStory<WrappedAuthComponent> = () => {
+  const { state } = useAuthState()
+  const jwtToken = state?.jwtToken
+  return (
+    <ApiProvider
+      errorHistoryMaxDepth={10}
+      successHistoryMaxDepth={10}
+      failureHistoryMaxDepth={10}
+      responseHistoryMaxDepth={10}
+      apiDomain="https://beta.api.archivist.xyo.network"
+      jwtToken={jwtToken}
+    >
+      <DemoArchiveFetcher />
+    </ApiProvider>
+  )
+}
+
+const Default = Template.bind({})
+Default.args = {}
+Default.decorators = [authDecorator]
+
+export { Default }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/contexts/ArchivistApi/Context.ts

@@ -0,0 +1,5 @@
+import { createContextEx } from '@xyo-network/react-shared'
+
+import { ApiState } from './State'
+
+export const ApiContext = createContextEx<ApiState>()

package/src/contexts/ArchivistApi/Provider.tsx

@@ -0,0 +1,102 @@
+import { WithChildren } from '@xylabs/react-shared'
+import { XyoApiConfig, XyoApiError, XyoApiResponse, XyoArchivistApi } from '@xyo-network/api'
+import { useCallback, useEffect, useState } from 'react'
+
+import { ApiContext } from './Context'
+import { logWithMax } from './logWithMax'
+
+export interface ApiProviderProps extends XyoApiConfig {
+  required?: boolean
+  successHistoryMaxDepth?: number
+  responseHistoryMaxDepth?: number
+  failureHistoryMaxDepth?: number
+  errorHistoryMaxDepth?: number
+  onFailureCallback?: (statusCode?: number) => void
+}
+
+export const ApiProvider: React.FC<WithChildren<ApiProviderProps>> = ({
+  required = false,
+  successHistoryMaxDepth = 0,
+  responseHistoryMaxDepth = 0,
+  failureHistoryMaxDepth = 0,
+  errorHistoryMaxDepth = 0,
+  onFailureCallback,
+  children,
+  ...configProps
+}) => {
+  const [api, setApi] = useState<XyoArchivistApi>()
+  const [config, setConfig] = useState<XyoApiConfig>(configProps)
+
+  const [successHistory] = useState<XyoApiResponse[]>([])
+  const [responseHistory] = useState<XyoApiResponse[]>([])
+  const [failureHistory] = useState<XyoApiResponse[]>([])
+  const [errorHistory] = useState<XyoApiError[]>([])
+
+  //we are doing this with config since we want a value compare and not a ref compare
+  useEffect(() => {
+    if (JSON.stringify(config) !== JSON.stringify(configProps)) {
+      setConfig(configProps)
+    }
+  }, [config, configProps])
+
+  const logResponse = useCallback(
+    (response: XyoApiResponse) => {
+      logWithMax(responseHistory, response, responseHistoryMaxDepth)
+    },
+    [responseHistory, responseHistoryMaxDepth],
+  )
+
+  const onFailure = useCallback(
+    (response: XyoApiResponse) => {
+      onFailureCallback?.(response.status)
+      logWithMax(failureHistory, response, failureHistoryMaxDepth)
+      logResponse(response)
+    },
+    [onFailureCallback, failureHistory, failureHistoryMaxDepth, logResponse],
+  )
+
+  const onSuccess = useCallback(
+    (response: XyoApiResponse) => {
+      logWithMax(successHistory, response, successHistoryMaxDepth)
+      logResponse(response)
+    },
+    [logResponse, successHistory, successHistoryMaxDepth],
+  )
+
+  const onError = useCallback(
+    (error: XyoApiError) => {
+      logWithMax(errorHistory, error, errorHistoryMaxDepth)
+    },
+    [errorHistory, errorHistoryMaxDepth],
+  )
+
+  useEffect(() => {
+    setApi(
+      new XyoArchivistApi({
+        ...config,
+        onError,
+        onFailure,
+        onSuccess,
+      }),
+    )
+  }, [config, onError, onFailure, onSuccess])
+
+  return (
+    <ApiContext.Provider
+      value={{
+        api,
+        currentToken: config.jwtToken,
+        errorHistory,
+        failureHistory,
+        provided: true,
+        responseHistory,
+        successHistory,
+      }}
+    >
+      {api ? children : required ? null : children}
+    </ApiContext.Provider>
+  )
+}
+
+/** @deprecated use ApiProvider instead */
+export const ArchivistApiProvider = ApiProvider

package/src/contexts/ArchivistApi/State.ts

@@ -0,0 +1,13 @@
+import { XyoApiError, XyoApiResponse, XyoArchivistApi } from '@xyo-network/api'
+
+/** @deprecated */
+export type XyoApiErrorCallback = (response: XyoApiResponse) => void
+
+export interface ApiState {
+  api?: XyoArchivistApi
+  currentToken?: string
+  successHistory?: XyoApiResponse[]
+  responseHistory?: XyoApiResponse[]
+  failureHistory?: XyoApiResponse[]
+  errorHistory?: XyoApiError[]
+}

package/src/contexts/ArchivistApi/index.ts

@@ -0,0 +1,4 @@
+export * from './Context'
+export * from './Provider'
+export * from './State'
+export * from './use'

package/src/contexts/ArchivistApi/logWithMax.ts

@@ -0,0 +1,9 @@
+export const logWithMax = <T>(log: T[], item: T, max: number) => {
+  if (max > 0) {
+    log.unshift(item)
+    while (log.length > max) {
+      log.pop()
+    }
+  }
+  return log
+}

package/src/contexts/ArchivistApi/use.ts

@@ -0,0 +1,10 @@
+import { useContextEx } from '@xyo-network/react-shared'
+
+import { ApiContext } from './Context'
+
+export const useApi = (required = false) => {
+  return useContextEx(ApiContext, 'ArchivistApi', required)
+}
+
+/** @deprecated use useApi instead */
+export const useArchivistApi = useApi

package/src/contexts/RemoteArchivistProvider.tsx

@@ -0,0 +1,68 @@
+import { useAsyncEffect } from '@xylabs/react-shared'
+import { XyoArchivistApi, XyoRemoteArchivist, XyoRemoteArchivistConfig } from '@xyo-network/api'
+import { XyoArchivistWrapper } from '@xyo-network/archivist'
+import { XyoModuleResolver } from '@xyo-network/module'
+import { ArchivistProvider, useArchivist } from '@xyo-network/react-archivist'
+import { ContextExProviderProps, useDataState } from '@xyo-network/react-shared'
+import merge from 'lodash/merge'
+import { useMemo, useState } from 'react'
+
+export type RemoteArchivistProviderProps = ContextExProviderProps<{
+  config?: XyoRemoteArchivistConfig
+  resolver?: XyoModuleResolver
+  api?: XyoArchivistApi
+}>
+
+export const RemoteArchivistProvider: React.FC<RemoteArchivistProviderProps> = ({ config: configProp, api, resolver, ...props }) => {
+  const [config, setConfig] = useDataState(configProp)
+  const { archivist } = useArchivist()
+
+  //we set this every time, but it will only take if config VALUE changed
+  setConfig(config)
+
+  const wrapper = useMemo(() => (archivist ? new XyoArchivistWrapper(archivist) : undefined), [archivist])
+  const activeResolver: XyoModuleResolver | undefined = useMemo(
+    () => (resolver ?? wrapper ? new XyoModuleResolver() : undefined),
+    [resolver, wrapper],
+  )
+
+  // eslint-disable-next-line deprecation/deprecation
+  const activeApi = api ?? config?.api
+
+  if (archivist) {
+    activeResolver?.add(new XyoArchivistWrapper(archivist))
+  }
+
+  const [activeArchivist, setActiveArchivist] = useState<XyoRemoteArchivist>()
+
+  useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    async (mounted) => {
+      const activeArchivist = activeApi
+        ? await XyoRemoteArchivist.create({
+            api: activeApi,
+            config: merge(
+              {},
+              config,
+              archivist
+                ? {
+                    parents: {
+                      commit: [archivist.address],
+                      read: [archivist.address],
+                      write: [archivist.address],
+                    },
+                  }
+                : undefined,
+            ),
+            resolver: activeResolver,
+          })
+        : undefined
+      if (mounted()) {
+        setActiveArchivist(activeArchivist)
+      }
+    },
+    [activeResolver, archivist, config, activeApi],
+  )
+
+  return <ArchivistProvider archivist={activeArchivist} {...props} />
+}

package/src/contexts/index.ts

@@ -0,0 +1,2 @@
+export * from './ArchivistApi'
+export * from './RemoteArchivistProvider'

package/src/hooks/ResolvePayloadArgs.ts

@@ -1,6 +1,6 @@
-import { XyoApiError } from '@xyo-network/api'
+import { XyoError } from '@xyo-network/module'
 import { XyoPayload } from '@xyo-network/payload'
 
-export type UsePayload = [XyoPayload?, boolean?, XyoApiError?]
+export type UsePayload = [XyoPayload?, boolean?, XyoError?]
 
 export type UseHuriOrHash = [...UsePayload, boolean?]

package/src/hooks/useHuriHash.stories.tsx

@@ -4,13 +4,13 @@ import { ComponentStory, Meta } from '@storybook/react'
 import { ButtonEx } from '@xylabs/react-button'
 import { FlexCol, FlexRow } from '@xylabs/react-flexbox'
 import { Huri } from '@xyo-network/payload'
-import { ArchivistApiProvider } from '@xyo-network/react-archivist-api'
 import { NetworkMemoryProvider } from '@xyo-network/react-network'
 import { XyoSchemaCache } from '@xyo-network/utils'
 import { lazy, Suspense, useState } from 'react'
 
+import { ApiProvider } from '../contexts'
 import { FetchHuriHashOptions } from './lib'
-import { useHuriHash } from './useHuriHash'
+import { useHuriHashViaApi } from './useHuriHash'
 
 const JsonView = lazy(() => import(/* webpackChunkName: "jsonView" */ 'react-json-view'))
 
@@ -30,15 +30,15 @@ const mainHash = 'd3a3936e31ba1d835c528784ab77c1eaaeedd6e16b7aad68a88241ce539853
 
 const Wrapper: React.FC<UseHuriHashComponentProps> = (props) => (
   <NetworkMemoryProvider>
-    <ArchivistApiProvider apiDomain={apiDomain}>
+    <ApiProvider apiDomain={apiDomain}>
       <UseHuriHashComponent {...props} />
-    </ArchivistApiProvider>
+    </ApiProvider>
   </NetworkMemoryProvider>
 )
 
 const UseHuriHashComponent: React.FC<UseHuriHashComponentProps> = ({ huriOrHash, huriUri, options, reTestable }) => {
   const [trigger, setTrigger] = useState<string | Huri>(huriOrHash)
-  const [payload, notFound, , networkNotFound] = useHuriHash(trigger, huriUri, options)
+  const [payload, notFound, , networkNotFound] = useHuriHashViaApi(trigger, huriUri, options)
 
   return (
     <>

package/src/hooks/useHuriHash.tsx

@@ -3,13 +3,13 @@ import { useCallback } from 'react'
 
 import { FetchHuriHashOptions } from './lib'
 import { UseHuriOrHash } from './ResolvePayloadArgs'
-import { useLoadPayload } from './useLoadPayload'
+import { useLoadPayloadViaApi } from './useLoadPayload'
 import { useResolveHuri } from './useResolveHuri'
 
 /**
  * Resolve a hash or a huri regardless of network
  */
-const useHuriHash = (huriOrHash?: string | Huri, huriUri?: string, options?: FetchHuriHashOptions): UseHuriOrHash => {
+export const useHuriHashViaApi = (huriOrHash?: string | Huri, huriUri?: string, options?: FetchHuriHashOptions): UseHuriOrHash => {
   const hash = useCallback((huriOrHash?: string | Huri) => {
     if (huriOrHash) {
       if (typeof huriOrHash === 'string') {
@@ -26,7 +26,7 @@ const useHuriHash = (huriOrHash?: string | Huri, huriUri?: string, options?: Fet
   //AT: TODO -> Talk about this pattern
 
   // Optimistically try to grab the has from the current network and archive
-  const [payload, notFound, apiError] = useLoadPayload(providedHash)
+  const [payload, notFound, apiError] = useLoadPayloadViaApi(providedHash)
 
   // if a huriUri was passed, we can safely override the notFound from the hash only query
   const notFoundOverride = huriUri ? true : notFound
@@ -36,5 +36,3 @@ const useHuriHash = (huriOrHash?: string | Huri, huriUri?: string, options?: Fet
 
   return [payload ?? huriPayload, huriPayloadNotFound, apiError ?? huriApiError, networkNotFound]
 }
-
-export { useHuriHash }

package/src/hooks/useLoadPayload.stories.tsx

@@ -2,10 +2,10 @@
 import { ComponentStory, Meta } from '@storybook/react'
 import { ButtonEx } from '@xylabs/react-button'
 import { FlexCol } from '@xylabs/react-flexbox'
-import { ArchivistApiProvider, useArchivistApi } from '@xyo-network/react-archivist-api'
 import { lazy, Suspense, useState } from 'react'
 
-import { useLoadPayload } from './useLoadPayload'
+import { ApiProvider, useApi } from '../contexts'
+import { useLoadPayloadViaApi } from './useLoadPayload'
 
 const JsonView = lazy(() => import(/* webpackChunkName: "jsonView" */ 'react-json-view'))
 
@@ -13,15 +13,15 @@ const apiDomain = 'https://beta.api.archivist.xyo.network'
 const hash = '5605fabad11b10bb5fb86b309ca0970894eda8f22362dda1a489817723bca992'
 
 const Wrapper: React.FC<{ hash?: string }> = ({ hash }) => (
-  <ArchivistApiProvider apiDomain={apiDomain}>
+  <ApiProvider apiDomain={apiDomain}>
     <UsePayloadComponent hash={hash} />
-  </ArchivistApiProvider>
+  </ApiProvider>
 )
 
 const UsePayloadComponent: React.FC<{ hash?: string }> = ({ hash }) => {
-  const { api } = useArchivistApi()
+  const { api } = useApi()
   const [trigger, setTrigger] = useState<string>()
-  const [payload, notFound] = useLoadPayload(trigger)
+  const [payload, notFound] = useLoadPayloadViaApi(trigger)
 
   return (
     <>

package/src/hooks/useLoadPayload.tsx

@@ -1,23 +1,23 @@
 import { useAsyncEffect } from '@xylabs/react-shared'
-import { XyoApiError } from '@xyo-network/api'
+import { XyoError, XyoErrorSchema } from '@xyo-network/module'
 import { XyoPayload } from '@xyo-network/payload'
-import { useArchive } from '@xyo-network/react-archive'
-import { useArchivistApi } from '@xyo-network/react-archivist-api'
 import { useEffect, useState } from 'react'
 
+import { useArchive } from '../archive'
+import { useApi } from '../contexts'
 import { UsePayload } from './ResolvePayloadArgs'
 
-export const useLoadPayload = (hash?: string): UsePayload => {
-  const { api } = useArchivistApi()
+export const useLoadPayloadViaApi = (hash?: string): UsePayload => {
+  const { api } = useApi()
   const { archive } = useArchive()
   const [localHash, setLocalHash] = useState<string>()
   const [notFound, setNotFound] = useState<boolean>()
-  const [apiError, setApiError] = useState<XyoApiError>()
+  const [xyoError, setXyoError] = useState<XyoError>()
   const [payload, setPayload] = useState<XyoPayload>()
 
   const reset = () => {
     setPayload(undefined)
-    setApiError(undefined)
+    setXyoError(undefined)
     setNotFound(undefined)
   }
 
@@ -46,14 +46,15 @@ export const useLoadPayload = (hash?: string): UsePayload => {
             }
           }
         } catch (e) {
+          const error = e as Error
           reset()
           setNotFound(false)
-          setApiError(e as XyoApiError)
+          setXyoError({ message: error.message, schema: XyoErrorSchema, sources: [] })
           console.error(e)
         }
       }
     },
     [hash, api, archive, payload, notFound, localHash],
   )
-  return [payload, notFound, apiError]
+  return [payload, notFound, xyoError]
 }