realm-js: Unable to create linking objects

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)

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 1
Comments: 20 (4 by maintainers)

Most upvoted comments

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

bmunkholm on Feb 19, 2020

@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.

Shumuu on Feb 19, 2020

@kneth any updates?

hauhuynh1208 on Feb 11, 2020

@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.

Shumuu on Feb 19, 2020

@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.

Shumuu on Feb 17, 2020

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 on Feb 7, 2020