Skip to content

Use render props instead of HOC-style connect? #207

Description

@ianstormtaylor

First off, thank you for this library, it is awesomely simple!

I've been toying with react-apollo and the new <Query> and <Mutation> components, and they are really nice in terms of making data declarative, allowing you to co-locate data requirements inside your components.

I was thinking it would be really nice is react-refetch was architected similarly. Instead of connect(mapPropsToRequests, Component), it would be cool do to:

<Refetch
  url={`/users/${id}`}
  method="GET"
>
  {(fetch) => (
	return fetch.pending ? (
      <LoadingAnimation />
    ) : fetch.rejected ? (
      <Error error={fetch.reason} />
    ) : (
      <User={fetch.data} />
    )
  )}
</Refetch>

Or even, for non-GET methods, offer a mutation API:

<Refetch
  url={`/users/${id}`}
  method="POST"
>
  {(updateUser, fetch) => (
	return fetch.rejected ? (
      <Error error={fetch.reason} />
    ) : (
      <Button isLoading={fetch.pending} onClick={updateUser}>Save</Button>
    )
  )}
</Refetch>

What do you think?

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions