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

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()フックと フックを使用して認証を処理します。

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

1. App Services で使用するすべてのコンポーネントをAppProviderでラップします。

2. AppProvider内で、認証されたユーザーへのアクセスを必要とするすべてのコンポーネントをUserProvider でラップします。

3. UserProviderには、ユーザーをログインさせる別のコンポーネントを持つfallbackプロンプトが含まれています。 認証されたユーザーが存在しない場合、アプリはこのコンポーネントをレンダリングします。

4. 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 を設定するには、次の手順に従います。

1. @realm/reactからプロバイダーをインポートします。

2. AppProviderを設定します。

3. UserProviderを構成し、 AppProvider内にネストします。

4. オブジェクトモデルをRealmProviderのschemaプロンプトに渡します。

5. FlexibleSyncConfigurationオブジェクトを作成します。

6. SyncConfigurationオブジェクトをsyncプロンプトに渡すか、オブジェクトをインラインで追加します。

7. 初期サブスクリプションを設定するか、 RealmProvider子コンポーネントで新しいサブスクリプションを作成します。

8. 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 の構成 ] ページをご覧ください。

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

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が設定されています。 Realm ファイルはbaseFilePathに保存されています。

• Realm.Configuation.pathは相対パスに設定されています。 Realm ファイルはbaseFilePathを基準に保存されます。

• Realm.Configuration.pathは絶対パスです。 Realm ファイルはRealm.Configuration.pathに保存されています。

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

同期された 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>
  );
}