(DOCSP-26992): @realm/react-ify "Relationships - React Native SDK" (#…

…2473)

examples/react-native/__tests__/js/Models/InverseRelationshipPost.js

@@ -0,0 +1,20 @@
+import Realm from 'realm';
+// :snippet-start: js-inverserelationshippost-schema
+class Post extends Realm.Object {
+  static schema = {
+    name: 'Post',
+    properties: {
+      _id: 'objectId',
+      title: 'string',
+      user: {
+        type: 'linkingObjects',
+        objectType: 'User',
+        property: 'posts',
+      },
+    },
+    primaryKey: '_id',
+  };
+}
+// :snippet-end:
+
+export default Post;

examples/react-native/__tests__/js/Models/Pet.js

@@ -0,0 +1,15 @@
+import Realm from 'realm';
+
+// :snippet-start: js-pet-schema
+class Pet extends Realm.Object {
+  static schema = {
+    name: 'Pet',
+    properties: {
+      name: 'string',
+      age: 'int',
+      animalType: 'string?',
+    },
+  };
+}
+// :snippet-end:
+export default Pet;

examples/react-native/__tests__/js/Models/PetOwner.js

@@ -0,0 +1,15 @@
+import Realm from 'realm';
+
+// :snippet-start: js-petowner-schema
+class PetOwner extends Realm.Object {
+  static schema = {
+    name: 'PetOwner',
+    properties: {
+      name: 'string',
+      birthdate: 'date',
+      pet: 'Pet?',
+    },
+  };
+}
+// :snippet-end:
+export default PetOwner;

examples/react-native/__tests__/js/Models/Post.js

@@ -0,0 +1,15 @@
+import Realm from 'realm';
+// :snippet-start: js-post-schema
+class Post extends Realm.Object {
+  static schema = {
+    name: 'Post',
+    properties: {
+      _id: 'objectId',
+      title: 'string',
+    },
+    primaryKey: '_id',
+  };
+}
+// :snippet-end:
+
+export default Post;

examples/react-native/__tests__/js/Models/User.js

@@ -0,0 +1,18 @@
+import Realm from 'realm';
+
+// :snippet-start: js-user-schema
+class User extends Realm.Object {
+  static schema = {
+    name: 'User',
+    properties: {
+      _id: 'objectId',
+      name: 'string',
+      birthdate: 'date?',
+      posts: 'Post[]',
+    },
+    primaryKey: '_id',
+  };
+}
+// :snippet-end:
+
+export default User;

examples/react-native/__tests__/js/realm-database/schemas/relationships-test.jsx

@@ -0,0 +1,167 @@
+import React, {useMemo} from 'react';
+import {View, Text} from 'react-native';
+import {render, waitFor} from '@testing-library/react-native';
+import Realm from 'realm';
+import {createRealmContext} from '@realm/react';
+import User from '../../Models/User';
+import Post from '../../Models/Post';
+
+const realmConfig = {
+  schema: [User, Post],
+  deleteRealmIfMigrationNeeded: true,
+};
+
+const {RealmProvider, useObject, useQuery} = createRealmContext(realmConfig);
+
+let realm;
+
+// test describe block for the relationship page
+describe('relationships tests', () => {
+  beforeEach(async () => {
+    // we will use this Realm for assertions to access Realm Objects outside of a Functional Component (like required by @realm/react)
+    realm = await Realm.open(realmConfig);
+
+    // delete every object in the realmConfig in the Realm to make test idempotent
+    realm.write(() => {
+      realm.delete(realm.objects(User));
+      realm.delete(realm.objects(Post));
+
+      const user1 = realm.create(User, {
+        _id: new Realm.BSON.ObjectId(),
+        name: 'John Doe',
+        birthdate: new Date(1990, 0, 1),
+      });
+      const user2 = realm.create(User, {
+        _id: new Realm.BSON.ObjectId(),
+        name: 'Jane Doe',
+        birthdate: new Date(1993, 6, 3),
+      });
+      const user3 = realm.create(User, {
+        _id: new Realm.BSON.ObjectId(),
+        name: 'Billy Bob',
+        birthdate: new Date(2002, 9, 14),
+      });
+
+      const post1 = realm.create(Post, {
+        _id: new Realm.BSON.ObjectId(),
+        title: 'My First Post',
+      });
+      const post2 = realm.create(Post, {
+        _id: new Realm.BSON.ObjectId(),
+        title: 'My Second Post',
+      });
+      user1.posts.push(post1);
+      user1.posts.push(post2);
+
+      const post3 = realm.create(Post, {
+        _id: new Realm.BSON.ObjectId(),
+        title: 'Row Row Row Your Boat',
+      });
+      const post4 = realm.create(Post, {
+        _id: new Realm.BSON.ObjectId(),
+        title: 'Life is but a dream',
+      });
+      user2.posts.push(post3);
+      user2.posts.push(post4);
+
+      const post5 = realm.create(Post, {
+        _id: new Realm.BSON.ObjectId(),
+        title: 'I am not a child but I am not old either',
+      });
+      const post6 = realm.create(Post, {
+        _id: new Realm.BSON.ObjectId(),
+        title: 'My favorite food is pizza',
+      });
+      user3.posts.push(post5);
+      user3.posts.push(post6);
+    });
+  });
+
+  afterAll(() => {
+    if (!realm.isClosed) {
+      realm.close();
+    }
+  });
+
+  it('Query Backlinks with Realm.Object.linkingObjects()', async () => {
+    // :snippet-start: dynamically-obtain-inverse-relationship
+    // :replace-start: {
+    //  "terms": {
+    //   " testID='postTitle'": "",
+    //   " testID='userName'": ""
+    //   }
+    // }
+    const PostItem = ({_id}) => {
+      const post = useObject(Post, _id);
+      const user = post?.linkingObjects('User', 'posts')[0];
+
+      if (!post || !user) return <Text>The post or user could not be found</Text>;
+      return (
+        <View>
+          <Text testID='postTitle'>Post title: {post.title}</Text>
+          <Text testID='userName'>Post created by: {user.name}</Text>
+        </View>
+      );
+    };
+    // :replace-end:
+    // :snippet-end:
+    const postId = realm.objects(Post)[0]._id;
+
+    const App = () => (
+      <RealmProvider>
+        <PostItem _id={postId} />
+      </RealmProvider>
+    );
+
+    const {getByTestId} = render(<App />);
+
+    await waitFor(() => {
+      expect(getByTestId('postTitle')).toHaveTextContent('Post title: My First Post');
+      expect(getByTestId('userName')).toHaveTextContent('Post created by: John Doe');
+    });
+  });
+
+  it('Query Backlinks with @links.<Type>.<Property>', async () => {
+    // :snippet-start: query-backlinks
+    // :replace-start: {
+    //  "terms": {
+    //   " testID={`Post ${i}`}": "",
+    //   ", i": ""
+    //   }
+    // }
+    const PostsByYoungUsers = () => {
+      const posts = useQuery(Post);
+      const postsByYoungUsers = useMemo(() => {
+        return posts.filtered('@links.User.posts.birthdate >= 2000-01-01@00:00:00:0');
+      }, [posts]);
+
+      if (!posts) return <Text>The post was not found.</Text>;
+      return (
+        <View>
+          <Text>Posts By Young Users</Text>
+          {postsByYoungUsers.map((post, i) => (
+            <Text testID={`Post ${i}`} key={post._id.toHexString()}>
+              {post.title}
+            </Text>
+          ))}
+        </View>
+      );
+    };
+    // :replace-end:
+    // :snippet-end:
+
+    const App = () => (
+      <RealmProvider>
+        <PostsByYoungUsers />
+      </RealmProvider>
+    );
+
+    const {getByTestId} = render(<App />);
+
+    await waitFor(() => {
+      expect(getByTestId('Post 0')).toHaveTextContent('I am not a child but I am not old either');
+      expect(getByTestId('Post 1')).toHaveTextContent('My favorite food is pizza');
+    });
+  });
+
+});

examples/react-native/__tests__/ts/Models/InverseRelationshipPost.ts

@@ -0,0 +1,27 @@
+import Realm from 'realm';
+import User from './User';
+
+// TODO: Replace `static schema` with TS-first models + realm-babel-plugin (https://www.npmjs.com/package/@realm/babel-plugin) approach once realm-babel-plugin version 0.1.2 releases with bug fixes
+// :snippet-start: ts-inverserelationshippost-schema
+class Post extends Realm.Object<Post> {
+  _id!: Realm.BSON.ObjectId;
+  title!: string;
+  user!: Realm.Results<User>;
+
+  static schema = {
+    name: 'Post',
+    properties: {
+      _id: 'objectId',
+      title: 'string',
+      user: {
+        type: 'linkingObjects',
+        objectType: 'User',
+        property: 'posts',
+      },
+    },
+    primaryKey: '_id',
+  };
+}
+// :snippet-end:
+
+export default Post;

examples/react-native/__tests__/ts/Models/Pet.ts

@@ -0,0 +1,20 @@
+import Realm from 'realm';
+
+// TODO: Replace `static schema` with TS-first models + realm-babel-plugin (https://www.npmjs.com/package/@realm/babel-plugin) approach once realm-babel-plugin version 0.1.2 releases with bug fixes
+// :snippet-start: ts-pet-schema
+class Pet extends Realm.Object<Pet> {
+  name!: string;
+  age!: number;
+  animalType!: string;
+
+  static schema = {
+    name: 'Pet',
+    properties: {
+      name: 'string',
+      age: 'int',
+      animalType: 'string?',
+    },
+  };
+}
+// :snippet-end:
+export default Pet;

examples/react-native/__tests__/ts/Models/PetOwner.ts

@@ -0,0 +1,21 @@
+import Realm from 'realm';
+import Pet from './Pet';
+
+// TODO: Replace `static schema` with TS-first models + realm-babel-plugin (https://www.npmjs.com/package/@realm/babel-plugin) approach once realm-babel-plugin version 0.1.2 releases with bug fixes
+// :snippet-start: ts-petowner-schema
+class PetOwner extends Realm.Object<PetOwner> {
+  name!: string;
+  birthDate?: Date;
+  pet?: Pet;
+
+  static schema = {
+    name: 'PetOwner',
+    properties: {
+      name: 'string',
+      birthdate: 'date',
+      pet: 'Pet?',
+    },
+  };
+}
+// :snippet-end:
+export default PetOwner;

examples/react-native/__tests__/ts/Models/Post.ts

@@ -0,0 +1,19 @@
+import Realm from 'realm';
+// TODO: Replace `static schema` with TS-first models + realm-babel-plugin (https://www.npmjs.com/package/@realm/babel-plugin) approach once realm-babel-plugin version 0.1.2 releases with bug fixes
+// :snippet-start: ts-post-schema
+class Post extends Realm.Object<Post, "_id" | "title"> {
+  _id!: Realm.BSON.ObjectId;
+  title!: string;
+
+  static schema = {
+    name: 'Post',
+    properties: {
+      _id: 'objectId',
+      title: 'string',
+    },
+    primaryKey: '_id',
+  };
+}
+// :snippet-end:
+
+export default Post;

examples/react-native/__tests__/ts/Models/User.ts

@@ -0,0 +1,24 @@
+import Realm from 'realm';
+import Post from './Post';
+// TODO: Replace `static schema` with TS-first models + realm-babel-plugin (https://www.npmjs.com/package/@realm/babel-plugin) approach once realm-babel-plugin version 0.1.2 releases with bug fixes
+// :snippet-start: ts-user-schema
+class User extends Realm.Object<User, "_id" | "name"> {
+  _id!: Realm.BSON.ObjectId;
+  name!: string;
+  birthdate?: Date;
+  posts!: Realm.List<Post>;
+
+  static schema = {
+    name: 'User',
+    properties: {
+      _id: 'objectId',
+      name: 'string',
+      birthdate: 'date?',
+      posts: 'Post[]',
+    },
+    primaryKey: '_id',
+  };
+}
+// :snippet-end:
+
+export default User;

examples/react-native/__tests__/ts/realm-database/schemas/mixed-test.tsx

@@ -3,7 +3,7 @@ import {Text, View} from 'react-native';
 import {render, waitFor} from '@testing-library/react-native';
 import Realm from 'realm';
 import {createRealmContext} from '@realm/react';
-import Cat from '../../models/Cat';
+import Cat from '../../Models/Cat';
 
 jest.setTimeout(30000);