Introduction

react-fetchsome is a react library that abstracts aways data fetching using fetch API.

Is it for me?

• you don't want to write loading states all over again
• you don't want to be rethinking over and over how to work with fetch API in best way
• you want consistent approach to data fetching in your whole application
• you don't need server-rendering

Install

Add it to your project with npm:

npm install --save react-fetchsome

or yarn:

yarn add react-fetchsome

Requirements

The package expects at least [email protected].

Since it depends on Fetch API it must run in browsers supporting this API or you must include a polyfill.

Features

key:

• mature resource states (loading, refetching, errors, ...)
• consistent error handling
• guided usage of fetch enforcing best practices

advanced:

• loading multiple resources

tech:

• flow typed

Basic Example

function CreatePostForm(props) {
  return (
    <div>
      New post
      <div>
        title: <input ref={titleRef} />
      </div>
      <button
        disabled={props.isLoading}
        onClick={() => {
          const title = titleRef.current && titleRef.current.value;
          props.initFetch({ title });
        }}
      >
        Create posta
      </button>
      <div>{props.isLoading ? '...' : ''}</div>
    </div>
  );
}

const resources = {
  createPost: {
    url: "https://jsonplaceholder.typicode.com/posts",
    method: "POST"
  }
};

function Example() {
  return (
    <FetchData
      env={env}
      resources={resources}
      render={(resources, meta) => {
        const { createPost } = resources;
        if (createPost.hasLoaded()) {
          return (
            <div>
              <div>Created post</div>
              <div>{JSON.stringify(createPost.data)}</div>
            </div>
          );
        }
        return (
          <CreatePostForm
            isLoading={createPost.isLoading()}
            initFetch={createPost.initFetch}
          />
        );
      }}
    />;
  )
}

Documentation

TODO.

Limitations

• no server-rendering support

Other solutions

Alternatives:

• react-refetch

Inspired by:

• relay