RealmProvider (@realm/ React )
項目一覧
RealmProvider(props, context?): null | ReactElement<any, any>
RealmProvider
内にネストされたコンポーネントは構成された Realm にアクセスし、 RealmProvider
フックを使用できます。
機能
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 オブジェクトモデルの定義 」を参照してください。
RealmProviderは、Realm を子コンポーネントに公開するラッパーです。 プロパティをRealmProvider
に渡して Realm を構成します。
RealmProvider
がレンダリングされると、Realm が開きます。 つまり、レンダリングが失敗すると、子コンポーネントは Realm にアクセスできなくなります。
RealmProvider
に加えて、 AppProviderとUserProvider を構成する必要もあります。
デフォルトでは、Realm は何も返す前にサーバーからすべてのデータを同期します。 バックグラウンドでデータを同期する場合は、 「 オフライン時に同期された Realm の構成 」をお読みください。
同期された Realm を設定するには、次の手順に従います。
@realm/react
からプロバイダーをインポートします。AppProvider
を設定します。UserProvider
を構成し、AppProvider
内にネストします。同期用に
RealmProvider
を構成し、UserProvider
内にネストします。オブジェクトモデルを
schema
proper に渡します。その他の構成オブジェクトプロパティをプロパティとして
RealmProvider
に追加します。
同期サブスクリプションを設定する必要があります。 以下の例では初期サブスクリプションを使用していますが、 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> ); }
同期された Realm の構成の詳細については、「 同期された Realm の構成 」を参照してください。
RealmProviderは、Realm を子コンポーネントに公開するラッパーです。 プロパティをRealmProvider
に渡して Realm を構成します。
RealmProvider
がレンダリングされると、Realm が開きます。 つまり、レンダリングが失敗すると、子コンポーネントは Realm にアクセスできなくなります。
同期されていない Realm を設定するには、次の手順に従います。
@realm/react
RealmProvider
をインポートします。オブジェクトモデルを
schema
proper に渡します。その他の構成オブジェクトプロパティをプロパティとして
RealmProvider
に追加します。
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()
useRealm(): Realm
useRealm()
フックは、開いている Realm インスタンスを返します。 Realm インスタンスは、Realm のメソッドとプロパティにアクセスします。 たとえば、 realm.write()
を呼び出して Realm に Realm オブジェクトを追加できます。
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' /> </> ); };
戻り値
Realm
Realm インスタンスを返します。 これは、フックの親であるRealmProvider
によって作成された Realm です。
useObject()
useObject<T>(type, primaryKey): T & Realm.Object<T> | null
useObject()
フックは、指定されたプライマリキーの Realm オブジェクトを返します。 オブジェクト クラスまたはクラス名を string とプライマリキーとして渡すことができます。
オブジェクトが存在しないか、オブジェクトを削除した場合、 useObject()
メソッドは 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> ); };
パラメーター
type: string
オブジェクト モデルのクラス名に一致する string、またはRealm.Object を拡張するクラスへの参照。primaryKey: T[keyof T]
目的のオブジェクトのプライマリキー。
戻り値
Realm.Object | null
Realm オブジェクト、またはオブジェクトが見つからない場合はnull
。
useQuery()
useQuery<T>(type, query?, deps?): Realm.Results<T & Realm.Object<T>>
useQuery()
フックは、指定されたタイプの Realm オブジェクトのコレクションを返します。 以下はクエリの結果です。 クエリは、オブジェクト クラスまたはクラス名を string にすることができます。
useQuery()
メソッドは、コレクション内のすべてのオブジェクトのアップデートをサブスクライブし、結果が変更されるたびにそれを使用してコンポーネントを再レンダリングします。
.filtered()
と.sorted()
を使用してクエリ結果をフィルタリングおよび並べ替えることができます。 依存関係配列に変更がある場合にのみ実行されるように、 useQuery
のquery
引数でこれを行う必要があります。 その他の例については、「 CRUD - 読み取りDocs 」を参照してください。
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>; })} </> ); };
パラメーター
type: string
オブジェクト モデルのクラス名に一致する string、またはRealm.Object を拡張するクラスへの参照。query?: QueryCallback<T>
クエリ結果をフィルタリングおよびソートできるクエリ関数。 クエリ関数をメモリ化するには、useCallback
に構築します。deps?: DependencyList
クエリ関数をメモリ化するために使用されるクエリ関数の依存関係のリスト。
戻り値
Realm.Results<T>
Realm オブジェクト、またはオブジェクトが見つからない場合はnull
。
createRealmContext() によるコンテキストの作成
createRealmContext(realmConfig?): RealmContext
ほとんどの場合、複数の Realm を構成する必要がある場合にのみcreateRealmContext()
を使用します。 それ以外の場合は、 RealmProvider
と フックを@realm/react
から直接インポートする必要があります。
createRealmContext()
メソッドは React Context を作成します 特定の 構成 を持つ邦土のオブジェクト。Context
オブジェクトには次のものが含まれています。
コンテキストプロバイダー (子コンポーネントを
RealmProvider
、フックへのアクセスを提供するコンポーネント)。事前に構築されたさまざまな フック 構成済みの Realm にアクセスします。
詳細なガイドについては、「 複数のRealm の公開 」を参照してください。
パラメーター
realmConfig?: Realm.Configuration
baseConfigurationのすべてのプロパティを使用できます。
戻り値
RealmContext
RealmProvider
コンポーネントと、useRealm
、useQuery
、useObject
フックを含むオブジェクト。