@app-elements/with-request

    3.0.19 • Public • Published

    withRequest

    deprecated in favour of useRequest

    Connect a Component to the result of an API request.

    Installation

    npm install --save @app-elements/with-request

    Usage

    import withRequest from '@app-elements/with-request'
     
    // Here is a view that will render the result of our API request
    const User = ({ id, name, email }) =>
      <div key={`user-${id}`}>
        <h1>{name}</h1>
        <p>{email}</p>
      </div>
     
    // Now we use withRequest to wrap the User component in a 
    // Higher order Component (HoC) that will call the User Component
    // with the result of the API request.
    const enhance = withRequest({
      // Define the url that should be called. You can pass a string, or
      // a function that's called with `props`. In this case, we'll use a
      // function so we can get the `{ id }` prop passed down by our Router.
      // Pretend the current URL is `users/3` where `3` is the `{ id }`
      endpoint: ({ id }) => `https://jsonplaceholder.typicode.com/users/${id}`
    })
     
    // Since withRequest is a HoC, it returns a function that expects
    // to be called with a Component as its only param.
    export default enhance(User)

    Configuration

    Internally, withRequest relies on a makeRequest function which is a small wrapper around XHR that returns a promise and the xhr reference. This allows withRequest to abort ongoing requests if a new one is requested. (In the future this should be swapped for Fetch and AbortController)

    Anyway, makeRequest also let's you set an apiUrl so you can make requests with just a pathname: auth/login instead of https://my-cool-api.herokuapp.com/auth/login.

    To enable this:

    import { configure } from '@app-elements/with-request/makeRequest'
     
    configure({ apiUrl: 'https://my-cool-api.herokuapp.com' })

    Props

    Prop Type Default Description
    endpoint Function or String None The url to call, or a function that returns a the url to call.
    parse Function None A function to parse the API response. If provided, will be called with the signature (result, prevResult) and whatever it returns will be cached as the result.

    Install

    npm i @app-elements/with-request

    DownloadsWeekly Downloads

    112

    Version

    3.0.19

    License

    ISC

    Unpacked Size

    10.9 kB

    Total Files

    6

    Last publish

    Collaborators

    • coryschadt
    • trustfall
    • adriaanwm
    • staydecent