Skip to content

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

@ianstormtaylor

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?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions