RealmProvider (@realm/ React )

機能

BaseConfigurationのすべてのプロパティをプロパティとして渡すことができます。

RealmProvider には、その動作を定義する他にもがあります。

• fallback?: React.ComponentType<unknown> | React.ReactElement | null | undefined

  Realm が開いているときにレンダリングするフォールバック コンポーネント。

• closeOnUnmount?: boolean

  デフォルトはtrueです。 falseに設定されている場合、コンポーネントがアンマウントされても Realm は閉じられません。

• realmRef?: React.MutableRefObject<Realm | null>

  Realm インスタンスへの参照。 これは、Realm の範囲外で Realm インスタンスにアクセスする必要がある場合に役立ちます。

• children: React.ReactNode

RealmProvider による Realm の構成

RealmProviderは、次の 2 つの方法で構成できます。

• インポートRealmProvider から を直接インポート@realm/react

• createRealmContext()を使用してRealmProviderを構成し、フックを作成します

このセクションでは、 @realm/reactから直接インポートされたRealmProviderの構成方法について詳しく説明します。 createRealmContext()の使用の詳細については、「 createRealmContext() を使用してコンテキストを作成する 」を参照してください。

オブジェクトモデルは、ほとんどの Realm 構成の一部です。 Realm とデータモデルの詳細については、「 Realm オブジェクトモデルの定義 」を参照してください。

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>
  );
}

import React from 'react';
import {RealmProvider} from '@realm/react';
function AppWrapperLocal() {
  return (
    <RealmProvider schema={[YourObjectModel]}>
      <RestOfApp />
    </RealmProvider>
  );
}

複数の Realm の構成

@realm/react RealmProviderをインポートすると、そのプロバイダーには特定のコンテキストがあり、単一の Realm に関連付けられています。 複数の Realm を構成する必要がある場合は、 createRealmContext()を使用して Realm ごとに新しいプロバイダーをインスタンス化します。

useRealm() 、 useQuery() 、またはuseObject()を@realm/reactから直接インポートする場合、これらのフックはデフォルトの Realm コンテキストを使用します。 複数の Realm を操作するには、 createRealmContext()の結果から新しい Realm プロバイダーとそれに関連するフックを分解する必要があります。 操作するプロバイダーとフックを使用する際の混乱を避けるために、スペースプロバイダーに名前を付ける必要があります。

詳細なガイドについては、「 複数のRealm の公開 」を参照してください。

createRealmContext()の詳細については、このページの「createRealmContext() を使用してコンテキストを作成する 」を参照してください。

RealmProvider フック

useRealm(): Realm

const CreatePersonInput = () => {
  const [name, setName] = useState('');
  const realm = useRealm();
  const handleAddPerson = () => {
    realm.write(() => {
      realm.create('Person', {_id: PERSON_ID, name: name, age: 25});
    });
  };
  return (
    <>
      <TextInput value={name} onChangeText={setName}  />
      <Button
        onPress={() => handleAddPerson()}
        title='Add Person'
      />
    </>
  );
};

useObject<T>(type, primaryKey): T & Realm.Object<T> | null

const TaskItem = ({_id}: {_id: number}) => {
  const myTask = useObject(Task, _id);
  return (
    <View>
      {myTask ? (
        <Text>
          {myTask.name} is a task with the priority of: {myTask.priority}
        </Text>
      ) : null}
    </View>
  );
};

useQuery<T>(type, query?, deps?): Realm.Results<T & Realm.Object<T>>

const TaskList = () => {
  const [priority, setPriority] = useState(4);
  // filter for tasks with a high priority
  const highPriorityTasks = useQuery(
    Task,
    tasks => {
      return tasks.filtered('priority >= $0', priority);
    },
    [priority],
  );
  // filter for tasks that have just-started or short-running progress
  const lowProgressTasks = useQuery(Task, tasks => {
    return tasks.filtered(
      '$0 <= progressMinutes && progressMinutes < $1',
      1,
      10,
    );
  });
  return (
    <>
      <Text>Your high priority tasks:</Text>
      {highPriorityTasks.map(taskItem => {
        return <Text>{taskItem.name}</Text>;
      })}
      <Text>Your tasks without much progress:</Text>
      {lowProgressTasks.map(taskItem => {
        return <Text>{taskItem.name}</Text>;
      })}
    </>
  );
};

createRealmContext() によるコンテキストの作成

createRealmContext(realmConfig?): RealmContext

ほとんどの場合、複数の Realm を構成する必要がある場合にのみcreateRealmContext()を使用します。 それ以外の場合は、 RealmProviderと フックを@realm/reactから直接インポートする必要があります。

メソッドはcreateRealmContext() React Context を作成します 特定の 構成 を持つ Realm のオブジェクト。Contextオブジェクトには次のものが含まれています。

• コンテキストプロバイダー （子コンポーネントをRealmProvider 、フックへのアクセスを提供するコンポーネント）。

• 事前に構築されたさまざまな フック 構成済みの Realm にアクセスします。

詳細なガイドについては、「 複数のRealm の公開 」を参照してください。

パラメーター

• realmConfig?: Realm.Configuration baseConfigurationのすべてのプロパティを使用できます。

戻り値

• RealmContext RealmProviderコンポーネントと、 useRealm 、 useQuery 、 useObjectフックを含むオブジェクト。