Docs Menu
Docs Home
/
MongoDB Atlas
/
Atlas Device SDKs
/
/
/

Embedded Objects - React Native SDK

On this page

  • Create an Embedded Object
  • Example
  • Query a Collection on Embedded Object Properties
  • Example
  • Update an Embedded Object Property
  • Example
  • Overwrite an Embedded Object
  • Example
  • Delete an Embedded Object
  • Example

Create an Embedded Object

To create an embedded object, assign an instance of the embedded object to a parent object's property.

Example

In the following CreateContact example, we create a new Contact object with an embedded Address object.

The CreateContact component does the following:

  • Creates React state variables that represent the contact's name and address details.

  • Gets access to an open realm instance by calling the useRealm() hook within the component.

  • Creates a component method submitContact() that performs a write transaction to create a new Address embedded object and Contact parent object based on the TextInput values for the contact's name and address.

  • Adds an onPress event on the "Submit Contact" button that calls submitContact().

1const CreateContact = () => {
2  const [name, setContactName] = useState('');
3  const [street, setStreet] = useState('');
4  const [city, setCity] = useState('');
5  const [country, setCountry] = useState('');
6  const [postalCode, setPostalCode] = useState('');
7  const realm = useRealm();
8
9  const submitContact = () => {
10    // Create a Contact within a write transaction
11    realm.write(() => {
12      // Create an embedded Address object
13      const address = {
14        street,
15        city,
16        country,
17        postalCode,
18      };
19
20      realm.create('Contact', {
21        _id: new Realm.BSON.ObjectID(),
22        name,
23        // Embed the address in the Contact object
24        address,
25      });
26    });
27  };
28  return (
29    <View>
30      <TextInput value={name} onChangeText={text => setContactName(text)} />
31      <TextInput value={street} onChangeText={text => setStreet(text)} />
32      <TextInput value={city} onChangeText={text => setCity(text)} />
33      <TextInput value={country} onChangeText={text => setCountry(text)} />
34      <TextInput
35        value={postalCode}
36        onChangeText={text => setPostalCode(text)}
37      />
38      <Button
39        title='Submit Contact'
40        onPress={submitContact}
41      />
42    </View>
43  );
44};

Query a Collection on Embedded Object Properties

You can use dot notation to filter or sort a collection of objects based on an embedded object property value.

Example

In the following ContactList example, we filter and query an embedded Address object.

The ContactList component does the following:

  • Performs a query for all contacts by passing the Contact class to the useQuery hook.

  • Filters for contacts with the name "John Smith" by passing collection.filtered() on the query "name == 'John Smith'".

  • Retrieves the contact's street address by using dot notation.

Update an Embedded Object Property

To update a property in an embedded object, modify the property in a write transaction.

Example

In the following UpdateContact example, we update the street property for an embedded Address object.

The UpdateContact component does the following:

  • Creates a React state variable that represents the contact's new street address.

  • Performs a query for all contacts by passing the Contact class to the useQuery hook and filters for the contact that matches the name passed into the component as a prop.

  • Gets access to an opened realm instance by calling the useRealm() hook within the component.

  • Creates a component method updateStreet() that performs a write transaction and sets the contact's street address to the value of the street state variable.

  • Renders a TextInput that displays and changes the street state variable.

  • Adds an onPress event on the 'Update Street Address' button that calls updateStreet().

Overwrite an Embedded Object

To overwrite an embedded object, reassign the embedded object property of a party to a new instance in a write transaction.

Example

In the following OverwriteContact example, we overwrite an embedded Address object.

The OverwriteContact component does the following:

  • Creates React state variables that represent the contact's new address.

  • Performs a query for all contacts by passing the Contact class to the useQuery hook and filters for the contact that matches the name passed into the component as a prop.

  • Gets access to an opened realm instance by calling the useRealm() hook within the component.

  • Creates a component method updateAddress() that performs a write transaction and creates a new Address object that overwrites the existing address in the Contact object.

  • Renders TextInput components that display and change the state variables for the new address.

  • Adds an onPress event on the 'Overwrite Address' button that calls updateAddress().

Delete an Embedded Object

Realm Uses Cascading Deletes for Embedded Objects. To delete an embedded object, delete the embedded object's parent.

Example

In the following DeleteContact example, we delete an embedded object and its parent object.

The DeleteContact component does the following:

  • Performs a query for all contacts by passing the Contact class to the useQuery hook.

  • Filters for the Contact object that matches the name passed into the component as a prop.

  • Gets access to an open realm instance by calling the useRealm() hook within the component.

  • Creates a component method deleteContact() that performs a write transaction and calls Realm.delete() to remove the Contact object.

  • Add an onPress event on the "Delete Contact" button that calls deleteContact().

← 
 →

On this page