@evergis/react-fetching

Fetching hooks for React

Usage

Fetching data

Create resource

export const people = createResource(
  // thunk
  () => async () => {
    const response = await fetch('https://swapi.co/api/people');
    const { results, ...meta } = await response.json();

    return {
      data: results, // entity or entity array
      meta, // response meta data
    };
  }
);

You can inject your api in thunk

export const people = createResource(
  (query?: string) => async swapi => {
    const { results, ...meta } = await swapi.getPeople(query);
    return {
      data: results,
      meta,
    };
  },
  { injected: swapi } // inject api in thunk
);

For debug you need enable debug mode and pass resource name

export const people = createResource(
  //...,
  { name: 'people', debug: true }
);

View data

Resource have use hook. This hook used to fetch data

export const People: React.FC = () => {
  const { data, error, loading } = people.use({ input: '' });
  return <PeopleView data={data} error={error} loading={loading} />;
};

// TODO mutation and other functionality