同期された Realm の構成 - React Native SDK

項目一覧

前提条件

同期された Realm の構成
AppProvider
ユーザープロバイダー
RealmProvider
特定のパスで同期された Realm を開く
オフラインからの同期された Realm へのアクセス
バックグラウンド同期ですぐにアクセス
バックグラウンド同期でタイムアウト後のアクセス
@realm/ Reactプロバイダーとフック

Atlas Device SDK は非推奨です。詳細については、の廃止ページを参照してください。

Realm を構成して、それぞれがデータのローカルコピーを持つ多数のデバイス間でデータを自動的に同期できます。

App Services App で同期を設定する方法など、同期された Realm の詳細については、「 Atlas Device Sync の概要」を参照してください。

さまざまな Realm 構成の詳細については、「 Realm の構成」を参照してください。

前提条件

React Native アプリケーションで Flexible Sync を使用して Realm を構成する前に、

バックエンドで Flexible Sync を有効にします。 Flexible Sync は、クライアントアプリケーションで使用する前に、バックエンドで構成する必要があります。
アプリクライアントを初期化します。
クライアントプロジェクトでユーザーを認証します。

同期された Realm の構成

@realm/reactのプロバイダーを使用して同期された Realm を構成します。

デフォルトでは、Realm は何も返す前にサーバーからすべてのデータを同期します。バックグラウンドでデータを同期する場合は、「オフライン時に同期された Realm の構成」をお読みください。

同期された Realm を設定するには、次の手順に従います。

@realm/reactからプロバイダーをインポートします。
AppProviderを設定します。
UserProviderを構成し、 AppProvider内にネストします。
同期用にRealmProviderを構成し、 UserProvider内にネストします。同期サブスクリプションを設定する必要があります。以下の例では初期サブスクリプションを使用していますが、 RealmProvider子コンポーネントでサブスクリプションを設定することもできます。

プロバイダーをネストする方法は次のとおりです。

import React from 'react';
import {AppProvider, UserProvider, RealmProvider} from '@realm/react';
function AppWrapperSync() {
  return (
    <AppProvider id={APP_ID}>
      <UserProvider fallback={LogIn}>
        <RealmProvider
          schema={[YourObjectModel]}
          sync={{
            flexible: true,
            initialSubscriptions: {
              update(subs, realm) {
                subs.add(realm.objects(YourObjectModel));
              },
            },
          }}>
          <RestOfApp />
        </RealmProvider>
      </UserProvider>
    </AppProvider>
  );
}

注意

パーティションベースの同期

このページでは、Flexible Sync の邦土を説明します。 Flexible Sync は、 Atlas Device Syncを使用する新しいアプリに推奨されるモードです。古いパーティションベースの同期を使用する Realm の詳細については、「パーティションベースの同期」を参照してください。

AppProvider

@realm/react AppProviderを使用すると、App Services App のインスタンスにアクセスできます。

アプリクライアントを設定するには、アプリ ID string をAppProviderのidプロンプトに渡します。アプリにアクセスするために必要なコンポーネントをAppProviderでラップします。

import React from 'react';
import {AppProvider} from '@realm/react';
function AppWrapper() {
  return (
    <View>
      <AppProvider id={APP_ID}>
        <MyApp />
      </AppProvider>
    </View>
  );
}

AppProviderの詳細については、[ Atlas App Services への接続 ] ページで確認できます。

ユーザープロバイダー

UserProviderにより、Realm ユーザーへのアクセス権が付与されます。アプリがフックを使用するにはUserProviderが必要です。

まず、 AppProviderとUserProviderを使用してユーザー認証を構成する必要があります。次に、useApp() useUser()フックとフックを使用して認証を処理します。

ユーザー認証を設定するには、次の手順に従います。

App Services で使用するすべてのコンポーネントをAppProviderでラップします。
AppProvider内で、認証されたユーザーへのアクセスを必要とするすべてのコンポーネントをUserProvider でラップします。
UserProviderには、ユーザーをログインさせる別のコンポーネントを持つfallbackプロンプトが含まれています。認証されたユーザーが存在しない場合、アプリはこのコンポーネントをレンダリングします。
UserProvider.fallbackプロパティに渡されるコンポーネントで、 Realm.App.logIn()を使用してユーザーを認証します。これはuseApp()フックでアクセスできます。

UserProviderでラップされているコンポーネントは、アプリに認証済みユーザーがある場合にのみレンダリングされます。これらのコンポーネントは、 useUser()フックを使用して認証されたユーザーにアクセスできます。

import React from 'react';
import {useApp, UserProvider, AppProvider} from '@realm/react';
import {Button} from 'react-native';
function AppWrapper() {
  return (
    <AppProvider id={APP_ID}>
      {/* If there is no authenticated user,
          the app mounts the `fallback` component.
          Once the user successfully authenticates,
          the app unmounts the component in the
          `UserProvider.fallback` prop
          (the `LogIn` component in this example). */}
      <UserProvider fallback={LogIn}>
        {/* Components with access to the user.
            These components only mount
            if there's an authenticated user.*/}
        <RestOfApp />
      </UserProvider>
    </AppProvider>
  );
}
function LogIn() {
  const app = useApp();
  // This example uses anonymous authentication.
  // However, you can use any authentication provider
  // to log a user in with this pattern.
  async function logInUser() {
    await app.logIn(Realm.Credentials.anonymous());
  }
  return (
    <Button
      title='Log In'
      onPress={logInUser}
    />
  );
}

UserProviderの詳細については、[ユーザーの認証 ] ページで確認できます。

RealmProvider

RealmProviderは、Realm を子コンポーネントに公開するラッパーです。プロパティをRealmProviderに渡して Realm を構成します。

RealmProviderがレンダリングされると、Realm が開きます。つまり、レンダリングが失敗すると、子コンポーネントは Realm にアクセスできなくなります。

同期された Realm を設定するには、次の手順に従います。

@realm/reactからプロバイダーをインポートします。
AppProviderを設定します。
UserProviderを構成し、 AppProvider内にネストします。
オブジェクトモデルをRealmProviderのschemaプロンプトに渡します。
FlexibleSyncConfigurationオブジェクトを作成します。
SyncConfigurationオブジェクトをsyncプロンプトに渡すか、オブジェクトをインラインで追加します。
初期サブスクリプションを設定するか、 RealmProvider子コンポーネントで新しいサブスクリプションを作成します。
Realm をさらに構成するために、他の構成オブジェクトプロパティをプロパティとしてRealmProviderに追加します。

import React from 'react';
import {AppProvider, UserProvider, RealmProvider} from '@realm/react';
function AppWrapperSync() {
  return (
    <AppProvider id={APP_ID}>
      <UserProvider fallback={LogIn}>
        <RealmProvider
          schema={[YourObjectModel]}
          sync={{
            flexible: true,
            initialSubscriptions: {
              update(subs, realm) {
                subs.add(realm.objects(YourObjectModel));
              },
            },
          }}>
          <RestOfApp />
        </RealmProvider>
      </UserProvider>
    </AppProvider>
  );
}

RealmProviderを使用してとの構成の詳細については、[ Realm の構成 ] ページをご覧ください。

設定オプション

構成オブジェクトのプロパティに一致するプロパティを設定することで、 RealmProviderを構成できます。 fallbackとrealmRefのプロパティを設定することもできます。

realmRef
useRefと併用され、構成された Realm をRealmProviderの外部プロセスに公開します。これは、クライアントリセットのフォールバックなどに役立ちます。
fallback
Realm が開くのを待っている間にレンダリングされました。ローカル Realm は通常、 fallbackプロンプトが必要ないほど十分な速度で開きます。

特定のパスで同期された Realm を開く

バージョンrealm@11.6.0の新機能。

AppConfiguration.baseFilePathとRealm.BaseConfiguration.pathを使用することで、 Realm ファイルとメタデータファイルをクライアントデバイスに保存する場所を制御できます。

そのためには、 AppProvider.baseFilePathを設定します。 baseFilePathが設定されていない場合は、現在のワークディレクトリが使用されます。より制御するためにRealmProvider.sync.pathを設定することもできます。

import React from 'react';
import {AppProvider, UserProvider, RealmProvider} from '@realm/react';
function AppWrapperSync({customBaseFilePath}) {
  return (
    <AppProvider id={APP_ID} baseFilePath={customBaseFilePath}>
      <UserProvider fallback={LogIn}>
        <RealmProvider
          path={customRealmPath}
          schema={[Profile]}
          sync={{
            flexible: true,
          }}>
          <RestOfApp />
        </RealmProvider>
      </UserProvider>
    </AppProvider>
  );
}

import React from 'react';
import {AppProvider, UserProvider, RealmProvider} from '@realm/react';
type AppWrapperSyncProps = {
  customBaseFilePath: string;
};
function AppWrapperSync({customBaseFilePath}: AppWrapperSyncProps) {
  return (
    <AppProvider id={APP_ID} baseFilePath={customBaseFilePath}>
      <UserProvider fallback={LogIn}>
        <RealmProvider
          path={customRealmPath}
          schema={[Profile]}
          sync={{
            flexible: true,
          }}>
          <RestOfApp />
        </RealmProvider>
      </UserProvider>
    </AppProvider>
  );
}

baseFilePathが設定されている場合、メタデータは常に<baseFilePath>/mongodb-realm/に保存されます。 baseFilePathが設定されていない場合、メタデータは<Realm.defaultPath>/mongodb-realmに保存されます。

Realm ファイルが保存される場所は、 Realm.BaseConfiguration.pass の設定方法によって異なる場合があります。

Realm.Configuration.path は設定されておらず、 baseFilePathが設定されています。 Your Realm file is stored at baseFilePath.
Realm.Configuation.path は相対パスに設定されています。 Realm ファイルはbaseFilePathを基準に保存されます。
Realm.Configuration.path は、絶対パスです。 Realm ファイルはRealm.Configuration.pathに保存されています。

オフラインからの同期された Realm へのアクセス

次のサブセクションでは、バックグラウンド同期を使用してオフラインのときに Realm にアクセスする方法を示します。これを行うには、キャッシュされたユーザーとOpenRealmBehaviorConfigurationオブジェクトを使用します。

RealmProviderバックグラウンド同期を有効にするには、の同期構成内で、オプションのnewRealmFileBehavior フィールドとexistingRealmFileBehavior フィールドをOpenRealmBehaviorConfiguration オブジェクトに設定します。

バックグラウンド同期を使用して、またはタイムアウト後にRealmをすぐに開くことができます。

注意

最初のログインにはネットワーク接続が必要です

ユーザーがアプリにサインアップしたり、クライアントに既存のアカウントを使用して初めてログインする場合、クライアントにはネットワーク接続が必要です。キャッシュされたユーザー認証情報を確認すると、ユーザーが以前にオンライン時にログインしたことがある場合にのみ、オフラインで Realm を開くことができます。

バックグラウンド同期ですぐにアクセス

同期された Realm がサーバーからデータをダウンロードする間にユーザーに部分的なデータを表示するために、バックグラウンドで変更を同期してユーザーエクスペリエンスがブロックされるのを防ぐ場合があります。ユーザーのデバイスがオフラインになる可能性があるアプリケーションでは、バックグラウンドで変更を同期することをお勧めしGo 。バックグラウンドで変更を同期するには、同期された Realm を同期的に開きます。

import React from 'react';
import {AppProvider, UserProvider, RealmProvider} from '@realm/react';
function AppWrapperOfflineSync() {
  const realmAccessBehavior = {
    type: 'openImmediately',
  };
  return (
    <AppProvider id={APP_ID}>
      <UserProvider fallback={LogIn}>
        <RealmProvider
          schema={[Profile]}
          sync={{
            flexible: true,
            newRealmFileBehavior: realmAccessBehavior,
            existingRealmFileBehavior: realmAccessBehavior,
          }}>
          <RestOfApp />
        </RealmProvider>
      </UserProvider>
    </AppProvider>
  );
}

import React from 'react';
import {AppProvider, UserProvider, RealmProvider} from '@realm/react';
function AppWrapperOfflineSync() {
  const realmAccessBehavior: Realm.OpenRealmBehaviorConfiguration = {
    type: Realm.OpenRealmBehaviorType.OpenImmediately,
  };
  return (
    <AppProvider id={APP_ID}>
      <UserProvider fallback={LogIn}>
        <RealmProvider
          schema={[Profile]}
          sync={{
            flexible: true,
            newRealmFileBehavior: realmAccessBehavior,
            existingRealmFileBehavior: realmAccessBehavior,
          }}>
          <RestOfApp />
        </RealmProvider>
      </UserProvider>
    </AppProvider>
  );
}

バックグラウンド同期でタイムアウト後のアクセス

データを同期したいが、ユーザーがインターネットに接続しているかどうかが不明な環境にある場合は、 timeOutを指定します。これにより、次のいずれかの場合にRealmが自動的に開きます。

タイムアウト期間が経過した
Realm が完全にダウンロードされました。

Realm がタイムアウト前にダウンロードを完了しない場合、最初の同期はバックグラウンドで続行されます。

import React from 'react';
import {AppProvider, UserProvider, RealmProvider} from '@realm/react';
function AppWrapperTimeoutSync() {
  const realmAccessBehavior = {
    type: 'downloadBeforeOpen',
    timeOutBehavior: 'openLocalRealm',
    timeOut: 1000,
  };
  return (
    <AppProvider id={APP_ID}>
      <UserProvider fallback={LogIn}>
        <RealmProvider
          schema={[Profile]}
          sync={{
            flexible: true,
            newRealmFileBehavior: realmAccessBehavior,
            existingRealmFileBehavior: realmAccessBehavior,
          }}>
          <RestOfApp />
        </RealmProvider>
      </UserProvider>
    </AppProvider>
  );
}

import React from 'react';
import {AppProvider, UserProvider, RealmProvider} from '@realm/react';
function AppWrapperTimeoutSync() {
  const realmAccessBehavior: Realm.OpenRealmBehaviorConfiguration = {
    type: 'downloadBeforeOpen',
    timeOutBehavior: 'openLocalRealm',
    timeOut: 1000,
  };
  return (
    <AppProvider id={APP_ID}>
      <UserProvider fallback={LogIn}>
        <RealmProvider
          schema={[Profile]}
          sync={{
            flexible: true,
            newRealmFileBehavior: realmAccessBehavior,
            existingRealmFileBehavior: realmAccessBehavior,
          }}>
          <RestOfApp />
        </RealmProvider>
      </UserProvider>
    </AppProvider>
  );
}

@realm/ Reactプロバイダーとフック

@realm/react には、同期された Realm とそのデータの操作を簡素化するコンテキストプロバイダーとフックがあります。プロバイダーとそのフックについては、各プロバイダーのページを参照してください。

戻る

同期データ

Flexible Sync サブスクリプションの管理