Realm-js: Unable to create linking objects

[hauhuynh1208]

Goals

can create linking objects

Actual Results

App freeze when make a linking objects. Even I reload app, app still be freezed. There is no error throw.

Steps to Reproduce

code below

Code Sample

import React, {Component} from 'react';
import {
  View,
  Text,
} from 'react-native';

const Realm = require('realm');

const CarSchema = {
  name: 'Car',
  properties: {
    make: 'string',
    model: 'string',
    miles: { type: 'int', default: 0 },
    owners: { type: 'linkingObjects', objectType: 'Person', property: 'cars' }
  }
};
const PersonSchema = {
  name: 'Person',
  properties: {
    name: 'string',
    birthday: 'date',
    cars: 'Car[]',
    picture: 'string'
  }
};

var realm = new Realm({schema: [CarSchema, PersonSchema], schemaVersion: 0 })

export default class App extends Component {

  state = {
    cars: null,
    people: null
  }

  linkCarToPerson = () => {
    realm.write(function() {
      const myCar = realm.create('Car', {
        make: 'Honda',
        model: 'Civic',
        miles: 1000,
      });
      realm.create('Person', {
        name: 'Adrian',
        birthday: new Date(),
        picture: 'data',
        cars: [myCar],
      });
    });
  }

  showCarOwner = () => {
        const myCar = realm.objects('Car')
        alert(JSON.stringify(myCar))
      }

  componentDidMount() {
    this.setState({
      cars: realm.objects('Car') ? realm.objects('Car'): null,
      people: realm.objects('Person')? realm.objects('Person'): null,
    })
  }

  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', }}>
        <Text onPress={() => this.linkCarToPerson()} style={{ alignSelf: 'center', marginTop: 20 }}>
          Link Car to Person
        </Text>
        <Text onPress={() => this.showCarOwner()} style={{ alignSelf: 'center', marginTop: 20 }}>
          Show the Car own
        </Text>
        <Text style={{ alignSelf: 'center', marginTop: 20 }}>
          Cars: {JSON.stringify(this.state.cars)}
        </Text>
        <Text style={{ alignSelf: 'center', marginTop: 20 }}>
          People: {JSON.stringify(this.state.people)}
        </Text>
      </View>
    );
  }
}

Version of Realm and Tooling

• Realm JS SDK Version: 3.6.3
• Node or React Native: 0.61.5
• Client OS & Version: Mac OS Catalina 10.15.2
• Which debugger for React Native: None (app still freeze if debugging)

[kneth]

Just to clear: your app is freezing in inkCarToPerson()?

[hauhuynh1208]

yes, app will be freeze if I press on linkCarToPerson. Even I restart app, app still be freeze. Therefore I need to delete app and install again.

[hauhuynh1208]

@kneth any updates?

[GDnsk]

It is happening also with me, did you find a solution?
on Realm 4.0.0-beta.0

[hauhuynh1208]

@GuilhermeDaniluski still not, I am waiting for @kneth answer. I think this bug related to realm itself.

[kneth]

@hauhuynh1208 Could you check if it still happens if you remove owners from you data model?

[Shumuu]

@hauhuynh1208 You can't use console.log(JSON.stringify(..)) as this is a circular structure and would run forever. Try just console.log(cars) and it should work fine.

[kneth]

@Shumuu Good catch!

[hauhuynh1208]

@Shumuu I tried connsole.log(myCar) but it still not working. Still freeze.

[hauhuynh1208]

@kneth After I remove owners from my data model, it is not freeze anymore. But now it is not the inverse relationship.

[Shumuu]

You don't have to remove owners from your data model.

const CarSchema = {
  name: 'Car',
  properties: {
    make: 'string',
    model: 'string',
    miles: { type: 'int', default: 0 },
    owners: { type: 'linkingObjects', objectType: 'Person', property: 'cars' }
  }
};
const PersonSchema = {
  name: 'Person',
  properties: {
    name: 'string',
    birthday: 'date',
    cars: 'Car[]',
    picture: 'string'
  }
};


// Inside a write Transaction
realm.write(() => {
  // Create a Person
  const john = realm.create('Person', {
    name: 'John', birthday: new Date(), picture: 'Somepicture.jpg'
    }
  );
  // Now that we have created a person, we get the cars array
  const johnsCars = john.cars;
  johnsCars.push({make: 'Carmake'', model: 'carmode',  miles: 1000});
  console.log(john);
  // In your console John should be displayed and unser car there should be an object. if you
  // query all cars, it should be displayed there, just remember not to do a stringify
  // If you still have problems, please share a repository and I'll clone it and investigate
})

[Shumuu]

I copied your code real quick and did the following

  linkCarToPerson = () => {
    realm.write(function() {
      realm.create('Person', {
        name: 'Adrian',
        birthday: new Date(),
        picture: 'data',
        cars: [{make: 'Honda', model: 'Civic', miles: 1000}],
      });
      // You can also first save the Person without the cars, and then access the cars array from a single person to add cars to his "inventory"
    });
  };

 <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Text
          onPress={() => this.linkCarToPerson()}
          style={{alignSelf: 'center', marginTop: 20}}>
          Link Car to Person
        </Text>
        <Text
          onPress={() => this.showCarOwner()}
          style={{alignSelf: 'center', marginTop: 20}}>
          Show the Car own
        </Text>
        <Text style={{alignSelf: 'center', marginTop: 20}}>
          Cars: {this.state.cars?.length ?? 0}
        </Text>
        <Text style={{alignSelf: 'center', marginTop: 20}}>
          People: {this.state.people?.length ?? 0}
        </Text>
      </View>

[hauhuynh1208]

You don't have to remove owners from your data model.

const CarSchema = {
  name: 'Car',
  properties: {
    make: 'string',
    model: 'string',
    miles: { type: 'int', default: 0 },
    owners: { type: 'linkingObjects', objectType: 'Person', property: 'cars' }
  }
};
const PersonSchema = {
  name: 'Person',
  properties: {
    name: 'string',
    birthday: 'date',
    cars: 'Car[]',
    picture: 'string'
  }
};


// Inside a write Transaction
realm.write(() => {
  // Create a Person
  const john = realm.create('Person', {
    name: 'John', birthday: new Date(), picture: 'Somepicture.jpg'
    }
  );
  // Now that we have created a person, we get the cars array
  const johnsCars = john.cars;
  johnsCars.push({make: 'Carmake'', model: 'carmode',  miles: 1000});
  console.log(john);
  // In your console John should be displayed and unser car there should be an object. if you
  // query all cars, it should be displayed there, just remember not to do a stringify
  // If you still have problems, please share a repository and I'll clone it and investigate
})

I log console.log(myCar) to see the car owner, but app will be freezed.

[hauhuynh1208]

@kneth any updates?

[Shumuu]

@hauhuynh1208 then please share a Repository with your code so I can have a look at that. Because the modifications I did to your code were working for me.

[hauhuynh1208]

@Shumuu thank you for your help. Here is my repo, please take a look

https://github.com/hauhuynh1208/example

I was successful to console.log(myCar). And also able to see the linking object as well :). But I cannot reset bundle (Cmd + R). I am using MacOS

[Shumuu]

@hauhuynh1208 Not sure if I'll be able to take a closer look today but I did notice that you still stringify here

        <Text style={{alignSelf: 'center', marginTop: 20}}>
          Cars: {JSON.stringify(this.state.cars)}
        </Text>
        <Text style={{alignSelf: 'center', marginTop: 20}}>
          People: {JSON.stringify(this.state.people)}
        </Text>

You're trying to display a circular structure.
You're trying to display the cars, which have owners, which have cars, which have owners ... etc. The app is freezing since this structure has no end and the Phone is trying to get to the end.

Change it to the following so you only display the count of the cars and people, and if they are null or undefined, display 0.

        <Text style={{alignSelf: 'center', marginTop: 20}}>
          Cars: {this.state.cars ? this.state.cars.length : 0}
        </Text>
        <Text style={{alignSelf: 'center', marginTop: 20}}>
          People: {this.state.people ? this.state.people.length : 0}
        </Text>

I am using a ternary Operator.

this.state.cars ? is the Condition. I am checking if its truthy (not null and not undefined)
What follows is the value when it is truthy this.state.cars.length followed by a : with the false value (when it is null or undefined) 0.

I hope that helps and solves your problem.

[hauhuynh1208]

@Shumuu great! thank you a lot. After I remove these stringify line, app now can work properly.

[Shumuu]

@hauhuynh1208 That's great to hear. Something else you should have a look at is Notifications. Basically you can add a function to the data from your realm and if it changes call that function, which can rerender the UI. In your example, as soon as you would add a car or a person, it would update the UI and the counters.

[bmunkholm]

Thanks a lot for helping out here @Shumuu ! 🥇
Closing this now as it seems resolved now @hauhuynh1208 ?