Mobile Bytes #9 : Realm React for React Native

Zubair_Rajput · 2022-06-05T14:39:46.846Z

Can we setup multiple partition value in a single object?

max_you · 2022-06-05T22:53:27.290Z

Hi Andrew,

The app I’m trying to build currently needs to keep track of ordering for a set of items. My data is structured such that a Group has a Realm.List. I am using the useObject() hook to get the Group, and then I’m trying to render the Group.items in a React Native FlatList. However, I can’t use the Realm.List type as an argument to the data prop of FlatList. I have tried using the useQuery() hook to get that same list of Items, but I need to preserve ordering in the Group, so what I really need is access to the Group so I can add/remove items from Group.items.

Do you know of a way I can render a Realm.List?

max_you · 2022-06-06T00:04:20.612Z

Ah nevermind, I was able to get it working with react native’s VirtualizedList instead of using the FlatList which is more restrictive

Andrew_Meyer · 2022-06-07T05:57:14.443Z

You can create multiple RealmProviders with createRealmContext and have each using a different partition value. You will just have to export and use the hooks related to said partition.

Andrew_Meyer · 2022-06-07T06:00:58.960Z

I have written tests to do exactly what you have described. What exactly is the problem you are experiencing when trying to use a Realm.List in a FlatList? Feel free open an issue on github and provide some more information. I want to make sure that works

max_you · 2022-06-07T14:35:39.741Z

I tried again and it works using a FlatList. I had just incorrectly specified an incorrect type for my parameter in my keyExtractor prop. I had specified the type of the variable as item: Item & Realm.Object instead of just Item. This was just a mistake on my part while I’m getting familiar with using Realm still! Thank you for the help!

Joshua_Barnard · 2022-10-23T23:23:23.543Z

Hi @Andrew_Meyer,

This is a great example. Do you have something similar for implementing authentication? The example from Mongo talks uses React and I’m having trouble adapting it. A React Native example would be much appreciated.

I’ll continue to search the forums to see if such an example already exists.

Thanks,
Josh

Ikbal_Sk · 2023-05-09T10:24:54.961Z

Thanks! Good information

Julien_Curro · 2023-08-30T15:47:18.070Z

The missing part in this tutorial is how do you access the Realm instance outside of the components (unless i’m missing something not everything is a component in a React app).
When I tried the useRealm / useQuery / … hooks outside of components, I got the “Hooks can only be called inside of the body of a function component”.
And if I try to create a new Realm() outside, either I get errors because the Realm is already opened with another schema OR the realm instance close randomly (Garbage Collected?).

So I’m really curious to know how we are supposed to handle this.

Andrew_Meyer · 2023-08-30T17:57:40.631Z

@Julien_Curro Thanks for reaching out. This is doable. We have added a flag to the RealmProvider in version 0.6.0 called closeOnUnmount which can be set to false to stop the Realm from closing if you are trying to do anything with the Realm instance outside of the component. Without setting this flag, as soon as the RealmProvider goes out of scope, the realm instance instantiated therein will be closed.
It’s important to note, that with realm instances that are instantiated and point to the same realm, when one of them is closed, they all close. We will address this in a future version of the Realm JS SDK, but for now, the closeOnUnmount flag can be used to workaround this.
Another note, any of the hooks will only work within components rendered as children of the RealmProvider. Anything done with a realm instance outside of this provider must be done without hooks. This includes registering your own change listeners if you want to react to changes on data, which the hooks handle automatically.
Let us know if you have any other issues

Julien_Curro · 2023-08-30T19:14:17.399Z

I am testing the closeOnUnmount prop, but I don’t know how I am supposed to get the 2nd non-context related realm instance.

Am I supposed to use the realmRef prop ? Or should I just

Before your post I was trying with an ugly singleton like this :

import { Realm } from '@realm/react';
import { realmConfig } from "./schema";

class RealmInstance {
    private static _instance: RealmInstance;
    public realm!: Realm;
    private constructor() {}

    public static getInstance(): RealmInstance {        
        if (!RealmInstance._instance) {
            RealmInstance._instance = new RealmInstance();
            RealmInstance._instance.realm = new Realm(realmConfig);
            console.log('DB PATH:', RealmInstance._instance.realm.path)
        }
        if (RealmInstance._instance.realm.isClosed) {
            RealmInstance._instance.realm = new Realm(realmConfig);
        }

        return RealmInstance._instance;
    }
}

export default RealmInstance.getInstance().realm;

Edit: is there a discord somewhere to talk about Realm ? There’s a mongodb server, but nobody seems to know what Realm is

Andrew_Meyer · 2023-08-31T12:43:01.504Z

@Julien_Curro The singleton example you posted should work for this purpose. The realmConfig you are using here is spreadable onto <RealmProvider {...realmConfig} closeOnUnmount={false}>. If you open a Realm with the same config, you get a shared instance of the same Realm.
The only change I would suggest is to change new Realm to Realm.open. Realm.open is async and more suited for a Realm configured with sync settings.

At the moment we do not have a discord, but you are not the first to ask about this. We are currently trying to merge Realm even closer the MongoDB, so hopefully in the near future the discord is more knowledgable on these topics.

Julien_Curro · 2023-08-31T13:15:13.827Z

closeOnUnmount seems to be working and I finally simplified the singleton, since in TS I can export the instance instead of a class, it’s easier like that :

import { Realm } from '@realm/react';
import { realmConfig } from "./schema";

const RealmInstance = new Realm(realmConfig)
export default RealmInstance

Thanks for your time, and would be happy to ask other things to you on any discord you want

henna.s · 2023-08-31T13:35:49.239Z

Hello @Julien_Curro ,

Thank you for raising your questions and thanks @Andrew_Meyer for taking the time to help our fellow member

@Julien_Curro , please feel free to ask questions and share your solutions in the community forum in related categories so we have a knowledge house of information everyone can benefit from We as a community appreciate your contributions

Happy Coding!

Cheers,
Henna
Community Manager, MongoDB

Siso_Ngqolosi · 2023-09-04T11:52:43.464Z

Hey @henna.s , @Andrew_Meyer

I am using realm with device sync. Can I set up a SubscriptionProvider instead of doing the subscription directly in the screens?

<RealmProvider 
sync={{
              flexible: true,
              onError: (_, error) => {
                console.log(error);
              },
            }}
>
<SubscriptionProvider>
<TaskApp />
<SubscriptionProvider>
</RealmProvider>

Andrew_Meyer · 2023-09-04T12:17:44.693Z

@Siso_Ngqolosi This is allowed and looks like a good setup. Subscriptions are globally defined, so if you apply them in any section of you app it will effect all components using the Realm.
Let us know if you have any issues!

Julien_Curro · 2023-09-11T08:47:09.656Z

Thanks to you @Andrew_Meyer my realm setup is almost done. But there are few remainings things that I would like to ask / understand :

I read that I can use an arrow function as default value when defining the schema, is there a way in this function to access a value defined in another field ? Because since I am keeping an history of changes I need 2 IDs fields in my objets, they must be the same at creation (and then after updates only one is changing).
So I would like to make something like :

rowId: { type: 'uuid', default: () => new BSON.UUID() }
branchId: { type: 'uuid', default: () => this.rowId }, // error because _this_ is not the realm object...`

I also have a user Id in my objects, this id is retrieved from an async function, but that does not seems to be supported, any workaround for those “async” situations ?

authorId: { type: 'uuid', default: () => async () => await User.userId() ?? new UUID('00000000-0000-4000-8000-000000000000') }

What would be the equivalent of willSave / didSave methods of Core Data framework ? Previously using Core Data I was able, thanks to these methods to performs things like : updating last modification time / author, duplicate the row being saved (in order to keep my changes history). perform encryption (at least with Realm I won’t have to do that part :))
The support of object classes by Realm is also unclear for me. If I have a class “A” with a non static method “method”, why do I get an “undefined” error when performing this kind of code :

const aObjects = realm.objects<A>(A.schema.name)
aObjects[0].method()

By the way, I am wondering if it is a good architecture to have helper methods for some queries inside those model classes files because they needs the Realm Instance to perform them but in my case those files are also included by the schema.ts, which is included by the RealmInstance.ts, so I end up having a require cycle, right ?

And the last question: what is the difference between these 2 way to define Realm object classes ?

export abstract class MyRealmClass extends Realm.Object
VS
export abstract class MyRealmClass extends Realm.Object<MyRealmClass>

Thanks for your answers

Julien_Curro · 2023-09-26T20:23:54.808Z

Hello, that would really help me to have an answer on those questions

Thanks.

Andrew_Meyer · 2023-10-19T06:55:05.904Z

Hi @Julien_Curro, sorry for the late response. There is a lot here to unpack and I must have got distracted

Julien_Curro:

is there a way in this function to access a value defined in another field ?

Unfortunately no, if you need to do this, then I would not use default values for this:

const id = new BSON.UUID();
realm.create('Item', { _id: id, rowId: id });

Julien_Curro:

I also have a user Id in my objects, this id is retrieved from an async function, but that does not seems to be supported, any workaround for those “async” situations ?

No, once again, if you are trying to do something more complex for default values, then this would best be done outside of the model.

Julien_Curro:

What would be the equivalent of willSave / didSave methods of Core Data framework ?

One could register a listener to update this on change, but this could result in an infinite loop if not careful.
But in the end, we have no equivalent for these methods. You will have to do this manually.

Julien_Curro:

If I have a class “A” with a non static method “method”, why do I get an “undefined” error when performing this kind of code

That should work, but you should make the following changes:

const aObjects = realm.objects(A);
aObjects[0].method();

Julien_Curro:

I am wondering if it is a good architecture to have helper methods for some queries inside those model classes files

Seems fine to me, but you will most likely have to provide realm as an argument to these methods. The architecture seems logical if you want to reuse a complex query somewhere else.

Julien_Curro:

what is the difference between these 2 way to define Realm object classes ?

export abstract class MyRealmClass extends Realm.Object
VS
export abstract class MyRealmClass extends Realm.Object<MyRealmClass>

We have experimental support for creating realm objects using the constructor of the class rather than realm.create.

realm.write(() => {
const newObject = new Object(realm, { _id: "123", name: "charles" });
})

The second definition will ensure the return type from new Object is correctly typed. If you omit this, then it will be typed as Realm.Object<unknown> instead of Realm.Object<MyRealmClass>.
You can ignore this and use realm.create if you so choose.

Julien_Curro · 2023-10-19T07:14:02.415Z

Thanks for your time and answers.