FunctionuseLoadDataState

  • useLoadDataState<T>(onLoad): [state: LoadDataState<T>, handleRefresh: (() => void), setResult: React.Dispatch<React.SetStateAction<T>>]

  • This function is a react hook for managing the state involved with loading data.

    Example

    import { useLoadDataState } from '@oneblink/apps-react'
    const fetchData = async () => {
      const response = await fetch(`https://some-website.com/api?data=data`)

      if (!response.ok) {
        const text = await response.text()
        throw new Error(text)
      }

      return await response.json()
    }

    const MyComponent = () => {
      const [state, refresh, setResult] = useLoadDataState(fetchData)

      switch (state.status) {
        case 'LOADING':
          return <Loading />
        case 'ERROR':
          return <Error message={state.error} />
        case 'SUCCESS':
        // RENDER UI
      }
    }

    export default MyComponent

    Type Parameters

    • T

      The type of the data returned by your onLoad function

    Parameters

    • onLoad: ((abortSignal: AbortSignal) => Promise<T>)

      The function that fetches your data. Should be a Promise that returns your data

        • (abortSignal): Promise<T>

        • Parameters

          • abortSignal: AbortSignal

          Returns Promise<T>

    Returns [state: LoadDataState<T>, handleRefresh: (() => void), setResult: React.Dispatch<React.SetStateAction<T>>]

Settings

On This Page

Example