Watermelondb: Question: withObservables for dynamic changes

[bsr203]

Hi,
I am assuming this is the basic feature Watermelon supports, but not sure what I am doing wrong. I want the list of posts to be displayed filtered on toId which is passed as a prop.

const TABLE = "posts";

const enhance = withObservables(['toId'],
  ({ database, toId }) => {
    return {
      messages: database.collections
        .get(TABLE)
        .query(Q.where('to_id', Q.eq(toId)))
        .observe()
    };
  }
);

the filtering works, but if I insert a new post (say through listening websocket response), like

export async function insertLocal(db, post) {
  return db.collections.get(TABLE).create(p => {
    p.toId = post.toId;
    // ....
  });
}

the new record is not showing upon the filtered list above. What changes do I make it so that any insertion is displayed on UI.

I looked at the example, but I do not have a parent entity (post) like here

 withObservables(['post'], ({ post }) => ({
    comments: post.comments.observe(),
  })),

thanks
bsr

[radex]

Your code looks correct to my eyes. It should work fine.

Maybe something else in your compentn is stoppign the re-render? Add a console.log maybe to see if the function passed to withObservables gets called and has the right value. Or if the toId prop is passed correctly and actually changes value...

[Necromant1k]

@bsr203 Hi! Did you found the solution? Facing with the same issue

Few questions to @radex
1) Is that possible to track if any records were inserted or were updated?
Something like collection.addListener('change', myfunc) ?

So this way i can do something else on new record.

Currently i've tried to use

const observer = await database.collections.get(TABLE).query().observe();
observer.subscribe(onChangeFunc, error => console.log(error));

I got log info Subscribed to changes in a users query, but when new record inserted onChangeFunc never triggered

2) How should we modify code in your example to subscribe for new blog posts?
So assume we have somewhere function which automatically adding blogs to DB. Currently we can track changes only when we have parent - post.comments.observer, but we can't track it with simple database.collections.get(TABLE).query().observe()

Thanks!

[rkrajewski]

@bsr203 Did you find a solution? Just to be sure - is everything correct with toId field definition in the model?

Is that possible to track if any records were inserted or were updated?

Yes @Necromant1k , it's possible and your solution should work just fine. You can debug, has any record been inserted/updated correctly by checking it manually with await database.collections.get('users').query().fetch() - maybe there is a problem with inserting/updating in other part of code.

[Necromant1k]

@rkrajewski Hmm you right! Something wrong with inserting. I tried to await for fetch and got this error

[DB] Executed batch of 1 operations (first: create on users) in 7.114999999990687ms
[DB] Loaded 16 users in 2.7049999999580905ms
Possible Unhandled Promise Rejection (id: 1):
Diagnostic error: Record ID users#2rfc1gep6pjee7ce was sent over the bridge, but it's not cached

This also happens for Updating or Deleting.
Did i miss something?

Here is my create function

const getCollection = () => database.collections.get('users');
const createUser = rawData => getCollection().create(user => normalizeData(user, rawData));

Note: by awaiting for .create(user => { ... } i'm getting new user which was created

[Necromant1k]

@rkrajewski Ok. Issue gone. I was passing database property to my component with Router, but once i replaced it with withDatabase it started work just fine.
Thanks for your help!

[bsr203]

@rkrajewski I was logged and toId was passing through the prop correctly. sorry, I it may take me few more days to get back to the code and closing as it is working for others. I will update as soon as I can. thanks.