realm / realm-js

Realm is a mobile database: an alternative to SQLite & key-value stores
https://realm.io
Apache License 2.0
5.74k stars 566 forks source link

react sync problems with 12.0.0-browser.2 #6860

Open jamalsoueidan opened 3 weeks ago

jamalsoueidan commented 3 weeks ago

How frequently does the bug occur?

Sometimes

Description

useQuery is not forcing react components to re-render after changing, updating a array property, sometime it works, sometime it doesnt..

I have my types that look like this and im trying to update user_ids.

export type Conversation = {
  _id: Realm.BSON.ObjectId;
  business_phone_number_id: string;
  customer_phone_number: string;
  name?: string;
  timestamp: number;
  user_ids: Realm.List<string>;
};

export const ConversationSchema = {
  name: "Conversation",
  properties: {
    _id: "objectId",
    business_phone_number_id: "string",
    customer_phone_number: "string",
    name: "string?",
    timestamp: "double",
    user_ids: "string[]",
  },
  primaryKey: "_id",
};

In one place I do this:

realm.write(() => {
    realm.create(
      "Conversation",
      {
        _id: conversation?._id,
        user_ids: selectedUserIds,
      },
      Realm.UpdateMode.Modified
    );
  });    

and where I show the data I use this hook.

I tried to use push and remove, didnt make a difference, the changes is applied in the mongodb db, but not in the view, I can see its uploading and downloading the data using realm.syncSession.

export function useGetConversation(conversationId?: string) {
  const conversations = useQuery<Conversation>(
    ConversationSchema.name,
    (collection) =>
      collection.filtered(
        "_id = $0 LIMIT(1)",
        new Realm.BSON.ObjectId(conversationId)
      ),
    [conversationId]
  );

  return conversations[0];
}

The data does not always gets updated in the view, whenever realm.write execute.

I also tried to use, doesn't work.

const conversation = realm.objectForPrimaryKey<Conversation>(
    ConversationSchema.name,
    objectId
  );

I can see the hook gets re-rendered, but not in the view.

BUT if I add after the useQuery

  console.log("updated, conversations", conversations[0].user_ids.length); // <<<<<< after the useQuery

Then react can always see that the data have changed, and will update the view.

Stacktrace & log output

No response

Can you reproduce the bug?

Always

Reproduction Steps

As shown above.

Version

12.0.0-browser.2

What services are you using?

Atlas Device Sync

Are you using encryption?

No

Platform OS and version(s)

Windows

Build environment

Which debugger for React Native: ..

Cocoapods version

No response

sync-by-unito[bot] commented 3 weeks ago

➤ PM Bot commented:

Jira ticket: RJS-2894

jamalsoueidan commented 3 weeks ago

Here you see the example. I hope it make sense. https://github.com/user-attachments/assets/66c47c04-09da-4185-b0bb-0a90c49bd1c1

jamalsoueidan commented 3 weeks ago

Here is another example, again it doesnt work first, and I keep refreshing (HMR) until it start working. https://github.com/user-attachments/assets/f203254f-ee92-4f8c-9052-31486903e02a