Skip to content

Enable to pass in a side-effect #20

@busypeoples

Description

@busypeoples

Opening an issue for documentation purposes. A PR covering this issue will follow.
Sorry @CharlesMangwa for delaying this for some time now.
Enable to pass in a callback that react-data-fetch either runs on componentDidMount or via passing down a run function f.e., enabling to define when the fetch is run in user land.
This should solve the following issues:

  • Being able to run multiple fetches serially or in parallel
  • Enable to delay or re-run a fetch when needed
  • Best case is implementing this in a fashion where we can run Tasks or Promises, leaving the
    actual implementation to user land.

The following is not the actual implementation, but an initial idea.

const dataFetch = () => {
     return fetch(SOME_URL_ENDPOINT)
      .then(response => response.json());
}

export default class App extends Component {
  render() {
    return (
      <Fetch
        loader={<Loader/>} // Replace this with your lovely handcrafted loader
        run={dataFetch}
      >
        {({ data, run /* can also be passed down and used inside a class component f.e. */ }) => (
         <div>
          <h1>Username</h1>
          <p>{data.name}</p>
         </div>
        )}
      </Fetch>
    )
  }
}

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions