Add property to know if a resource has been loaded about mercury HOT 6 CLOSED

Currently Mercury is emitting events that would allow to identify the lifecycle of each resource. This events are:

• readDispatch - Emitted when the source read method has not still cache set, so it corresponds with the real execution of the read method. It is emitted once each time the read method is executed and there is no cache.

• readSuccess - Emitted each time the read method is called and it is resolved. No matter if result comes from cache or not.

• readError - Emitted each time the read method is called and it is rejected. No matter if result comes from cache or not.

• updateDispatch, updateSuccess, updateError, createDispatch, createSuccess, createError, deleteDispatch, deleteSuccess and deleteError are emitted too. This events are emitted based on same logic of the correspondent read method events.

Maybe a good solution could be to expose a count of how many times has been called each event at the stats object proposed above.

{
  "value": "foo-value",
  "loading": false,
  "error:" : null,
  "stats": {    
    "readDispatch": 2,
    "readSuccess": 10,
    "readError": 0
  }
}

All this event names are available as statics of Mercury sources at the actions property, so they could be used to consult the stats object:

import { booksCollection } from "./books";

booksCollection.read();

console.log(booksCollection.read.stats[booksCollection.read.actions.read.dispatch]);

A getter should be implemented for easily accessing to the "stats" property using plugins as react-mercury, as it is done with the value, error or loading property:

import { connect } from "@xbyorange/react-mercury";

export const BooksList = ({ booksList, booksLoading, booksError, booksStats }) => {
  if(booksError) {
    return (<div>Error loading books</div>);
  }
  if(booksLoading || booksStats.readSuccess < 1) {
    return (<div>Loading books...</div>);
  }
  return (
    <div>
      <ul>
        {booksList.map(book => (
          <li key={book.id}>
            {book.title}
          </li>
        ))}
      </ul>
    </div>
  );
};

export const mapDataSourceToProps = () => ({
  booksError: booksCollection.read.getters.error,
  booksList: booksCollection.read.getters.value,
  booksLoading: booksCollection.read.getters.loading,
  booksStats: booksCollection.read.getters.stats
});

export const ConnectedModule = connect(mapDataSourceToProps)(BooksList);

from mercury.

Makes sense

I think loaded could be a little confuses. Maybe we can add an object stats and into him add the counter.

For example:

{
  value: undefined,
  loading: false,
  error: null,
  stats: {
    counts: 1
  }
}

We can add other relevant information more easily.

{
  value: undefined,
  loading: false,
  error: null,
  stats: {
    counts: 1,
    responseTime: '200ms',
    CollectionsNumbers: '2',
    Collections: ['booksCollection', 'authorsCollection']
  }
}

I think following this pattern it could be more scalable.

Please, let me know your thoughts.

Maybe the second example could be applied only to a mercury-api origin (because of the responseTime property, for example) The intention is that this new information could be applied to any type of origins or even selectors. But I think it is a good idea to add the statsproperty, which is clearly more scalable. So, in this first approach, the provided data could be:

{
  "value": "foo-value",
  "loading": false,
  "error:" : null,
  "stats": {
    "loadsCount": 2
  }
}

from mercury.

@juanmagit , @manuelitox, @luisnueda, feedback about this new feature request will be welcome.

from mercury.

FYI @YichuanLin

from mercury.

Makes sense 👍

I think loaded could be a little confuses. Maybe we can add an object stats and into him add the counter.

For example:

{
  value: undefined,
  loading: false,
  error: null,
  stats: {
    counts: 1
  }
}

We can add other relevant information more easily.

{
  value: undefined,
  loading: false,
  error: null,
  stats: {
    counts: 1,
    responseTime: '200ms',
    CollectionsNumbers: '2',
    Collections: ['booksCollection', 'authorsCollection']
  }
}

I think following this pattern it could be more scalable.

Please, let me know your thoughts.

from mercury.

Correction to the previous comment:

As the stats propery will be available under a certain method, such as read, update, etc, it will not be necessary to add the method prefix to each stats property. So, for example, the stats object of the read method will be:

{
  "value": "foo-value",
  "loading": false,
  "error:" : null,
  "stats": {    
    "dispatch": 2,
    "success": 10,
    "error": 0
  }
}

from mercury.