Docs Menu
Docs Home
/
MongoDB Atlas
/
Atlas Device SDK

クイック スタート - React Native SDK

項目一覧

  • @realm/ Reactパッケージについて
  • Realm アプリを設定する
  • オブジェクトモデルを定義する
  • Realm の構成
  • Realm オブジェクトとの連携
  • 読み取り、ソート、フィルタリング オブジェクト
  • Realm オブジェクトの作成、更新、削除
  • Atlas Device Sync の追加（任意）
  • 前提条件
  • 同期された Realm の構成とアクセス
  • 次へ: テンプレート アプリとチュートリアルを確認

このページでは、React Native SDK を使用して Realm を使用する方法を説明します。

開始する前に、Realm React Native SDKをインストールしてください。

@realm/ Reactパッケージについて

@realm/React は、React Native SDK で使用されるパッケージです。Realm データ向けのステート認識型 React フックを提供します。 フックは Realm データを監視し、必要に応じてコンポーネントを再レンダリングします。

React Native SDK ドキュメントでは、例と説明のテキストに @realm/react npm パッケージが使用されています。

詳細については、次のページを参照してください。

Realm アプリを設定する

realmパッケージと@realm/reactパッケージをインストールした後、Realm にアクセスしてローカル データを操作する前に、設定する必要があるものがいくつかあります。

  • オブジェクトモデルを定義する

  • Realm コンテキスト オブジェクトの作成、フックの抽出、プロバイダーの設定により Realm を構成する

オブジェクトモデルを定義する

アプリケーションのオブジェクトモデルによって、Realm 内に保存できるデータ型が定義されます。 各オブジェクトモデルは、Realm オブジェクトタイプになります。

Realm オブジェクトモデルを定義するには、次の手順に従います。

  1. Realm.Object を拡張するクラスを作成します。

  2. schema フィールドを追加します。

  3. schemaproperties値の場合は、 プロパティとname プロパティを含むオブジェクトを作成します。名前値は、Realm 内のオブジェクト タイプの中で一意である必要があります。

// Define your object model
export class Profile extends Realm.Object<Profile> {
  _id!: BSON.ObjectId;
  name!: string;
  static schema: ObjectSchema = {
    name: 'Profile',
    properties: {
      _id: 'objectId',
      name: {type: 'string', indexed: 'full-text'},
    },
    primaryKey: '_id',
  };
}

詳細については、「 Realm オブジェクトモデルの定義 」を参照してください。

Realm の構成

データを操作する前に、Realm を構成する必要があります。 つまり、 @realm/reactからコンテキストとプロバイダーを設定する必要があります。 詳細については、「 Realm の構成 」を参照してください。

ローカル Realm を構成してアクセスするには、以下の手順に従います。

  1. @realm/react RealmProviderをインポートします。

  2. オブジェクトモデルをschema proper に渡します。

  3. その他の構成オブジェクトプロパティをプロパティとしてRealmProviderに追加します。

import React from 'react';
import {RealmProvider} from '@realm/react';
// Import your models
import {Profile} from '../../../models';
export const AppWrapper = () => {
  return (
    <RealmProvider schema={[Profile]}>
      <RestOfApp />
    </RealmProvider>
  );
};

Realm オブジェクトとの連携

データモデルと構成された Realm が完了したら、Realm オブジェクトの作成、読み取り、更新、または削除ができます。

これらの操作を実行するコンポーネントはRealmProvider内にネストする必要があります。 useRealm() 、 useQuery() 、およびuseObject()フックを使用すると、Realm で読み取りおよび書込み操作を実行できます。

RealmProvider とそのフックの詳細な説明については、 RealmProvider（@realm/ React ）を参照してください

読み取り、ソート、フィルタリング オブジェクト

@realm/react は、Realm オブジェクトのコレクションまたは単一の Realm オブジェクトを見つけるのに役立つフックを提供します。

useQuery() の一部として、 RQL （ RQL ）を使用して結果をフィルタリングまたは並べ替えることができます。

import React from 'react';
import {useQuery} from '@realm/react';
import {Profile} from '../../models';
export const Read = () => {
  // Find
  const profiles = useQuery(Profile);
  // Sort
  const sortedProfiles = useQuery(Profile, profiles => {
    return profiles.sorted('name', false);
  });
  // Filter
  const filteredProfiles = useQuery(Profile, profiles => {
    return profiles.filtered('name == "testProfile"');
  });
  // ... rest of component
};

詳細については、「 CRUD -データの読み取りとクエリ 」を参照してください。

フック以外の読み取り操作

場合によっては、Realm 読み取り操作を使用する必要がある場合がありますが、React Native コンポーネントの最上位レベルではありません。 フックはコンポーネントの最上位レベルでのみ機能するため、このような状況では@realm/reactフックは使用できません。

代わりに、コレクションにはRealm.objectsを使用するか、単一オブジェクトにはRealm.objectForPrimaryKeyを使用できます。

Realm オブジェクトの作成、更新、削除

useRealm()を使用して Realm にアクセスした後は、Realm 内のオブジェクトを作成、更新、削除できます。 すべての操作はRealm.write() トランザクション ブロック。

詳細については、「書込みトランザクション 」を参照してください。

オブジェクトの作成

新しい Realm オブジェクトを作成するには、オブジェクトタイプを指定し、オブジェクトの初期値を渡し、書込みトランザクション (write transaction) ブロックで Realm に追加します。

import React, {useState} from 'react';
import {Text, TextInput, View} from 'react-native';
import {BSON} from 'realm';
import {useRealm} from '@realm/react';
import {Profile} from '../../models';
export const Create = () => {
  const realm = useRealm();
  const [profileName, setProfileName] = useState('');
  const addProfile = () => {
    realm.write(() => {
      realm.create(Profile, {
        _id: new BSON.ObjectId(),
        name: profileName,
      });
    });
  };
  return (
    <View>
      <Text>Create</Text>
      <TextInput
        onChangeText={setProfileName}
        value={profileName}
        placeholder="Profile name..."
      />
      <Button
        title="Add Profile"
        onPress={addProfile}
      />
    </View>
  );
};

詳細については、「 CRUD - 作成 」を参照してください。

更新オブジェクト

Realm オブジェクトを更新するには、書込みトランザクション ブロックでそのプロパティを更新します。

import React, {useState} from 'react';
import {Text, FlatList, View, Pressable, TextInput} from 'react-native';
import {useRealm, useQuery} from '@realm/react';
import {Profile} from '../../models';
export const Update = () => {
  const realm = useRealm();
  const profiles = useQuery(Profile);
  const [profileToUpdate, setProfileToUpdate] = useState('');
  const [newProfileName, setNewProfileName] = useState('');
  const updateProfile = () => {
    const toUpdate = realm
      .objects(Profile)
      .filtered('name == $0', profileToUpdate);
    realm.write(() => {
      toUpdate[0].name = newProfileName;
    });
  };
  return (
    <View>
      <Text>Update</Text>
      {profiles.length ? (
        <View>
          <Text>Profiles: </Text>
          <FlatList
            scrollEnabled={false}
            data={profiles}
            horizontal={true}
            renderItem={({item}) => (
              <Pressable
                onPress={() => {
                  setProfileToUpdate(item.name);
                }}>
                <Text
                 >
                  {item.name}
                </Text>
              </Pressable>
            )}
            keyExtractor={item => item.name}
          />
        </View>
      ) : (
        <Text>🛑 No profiles found</Text>
      )}
      {profileToUpdate && (
        <TextInput
          style={styles.textInput}
          onChangeText={setNewProfileName}
          value={newProfileName}
          placeholder="New profile name..."
        />
      )}
      <Button
        title="Update profile"
        onPress={updateProfile}
      />
    </View>
  );
};

詳しくは、「 CRUD - 更新 」を参照してください。

オブジェクトの削除

Realm オブジェクトを削除するには、書込みトランザクション ブロック内でオブジェクトをRealm.delete()に渡します。

import React, {useState} from 'react';
import {Text, FlatList, View, Pressable} from 'react-native';
import {useRealm, useQuery} from '@realm/react';
import {Profile} from '../../models';
export const Delete = () => {
  const realm = useRealm();
  const profiles = useQuery(Profile);
  const [profileToDelete, setProfileToDelete] = useState('');
  const deleteProfile = () => {
    const toDelete = realm
      .objects(Profile)
      .filtered('name == $0', profileToDelete);
    realm.write(() => {
      realm.delete(toDelete);
    });
  };
  return (
    <View>
      <Text>Delete</Text>
      {profiles.length ? (
        <View>
          <Text>Profiles: </Text>
          <FlatList
            scrollEnabled={false}
            data={profiles}
            horizontal={true}
            renderItem={({item}) => (
              <Pressable
                onPress={() => {
                  setProfileToDelete(item.name);
                }}>
                <Text
                 >
                  {item.name}
                </Text>
              </Pressable>
            )}
            keyExtractor={item => item.name}
          />
        </View>
      ) : (
        <Text>🛑 No profiles found</Text>
      )}
      <Button
        title="Delete profile"
        onPress={deleteProfile}
      />
    </View>
  );
};

詳細については、「 CRUD - 削除 」を参照してください。

Atlas Device Sync の追加（任意）

非同期 Realm が実行可能になったら、Atlas Device Sync を追加できます。 これにより、Realm データを MongoDB Atlas クラスターや他のクライアント デバイスと同期できるようになります。

Device Sync を使用するには、いくつか設定する必要があります。

  • Atlas App Services でバックエンドを作成します（以下の前提条件を参照）

  • 非同期 Realm ではなく Flexible Sync Realm の構成

前提条件

同期された Realm の構成とアクセス

Device Sync を使用するには、次の 3 つの@realm/reactプロバイダーを設定する必要があります。

アプリを初期化し、ユーザーを認証し、オブジェクトモデルを定義したら、同期された Realm を構成できます。 これは、ローカル Realm を構成するのと同様です。 ただし、 RealmProviderに追加のプロパティを追加する必要があります。

syncプロファイリングをRealmProviderに追加し、それにFlexibleSyncConfigurationオブジェクトを渡します。 この同期オブジェクトにはflexible: trueが含まれている必要があります。初期サブスクリプションも追加する必要があります。 同期データの読み取りまたは書き込みを行う前に、少なくとも 1 つの同期サブスクリプションが必要です。

同期された Realm を構成してアクセスするには、次の手順に従います。

  1. AppProviderを使用してアプリを初期化します。 アプリ ID は、App Services UI で確認できます。

  2. を使用したユーザーの認証 UserProvider

  3. 次を使用して同期された Realm を構成する: RealmProvider

import React from 'react';
import {Credentials} from 'realm';
import {RealmProvider, AppProvider, UserProvider, useApp} from '@realm/react';
// Import your models
import {Profile} from '../../../models';
// Expose a sync realm
export function AppWrapperSync() {
  return (
    <AppProvider id={APP_ID}>
      <UserProvider fallback={LogIn}>
        <RealmProvider
          schema={[Profile]}
          sync={{
            flexible: true,
            onError: (_session, error) => {
              console.log(error);
            },
            initialSubscriptions: {
              update(subs, realm) {
                subs.add(realm.objects('Profile'));
              },
              rerunOnOpen: true,
            },
          }}
          fallback={fallback}>
          <RestOfApp />
        </RealmProvider>
      </UserProvider>
    </AppProvider>
  );
}

同期された Realm 内のオブジェクトを作成、読み取り、更新、および削除する構文は、同期されていない Realm の構文と同じです。 ローカル データを操作している間に、バックグラウンド スレッドが変更セットを効率的に統合、アップロード、ダウンロードします。

詳細については、「 同期された Realm の構成 」を参照してください。

次へ: テンプレート アプリとチュートリアルを確認

ガイドを利用する場合は、 Realm React Native SDKのチュートリアルをお読みください。 このチュートリアルでは、Realm と Device Sync で構築されたベースの React Native アプリを実装して展開します。

テンプレート アプリを使用して、自分で React Native SDK を試すこともできます。 テンプレート アプリを設定するには、Atlas App Services ドキュメントの「テンプレートアプリ 」を参照してください。

次へ

Atlas Device SDK Docsへようこそ