Proveedor del reino (@realm/react)

Accesorios

Todas las propiedades de BaseConfiguration se puede pasar como accesorios.

RealmProvider tiene más propiedades que definen su comportamiento:

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

  El componente de respaldo para renderizar mientras se abre el reino.

• closeOnUnmount?: boolean

  El valor predeterminado es true. Si se establece en false, el dominio no se cerrará al desmontar el componente.

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

  Una referencia a la instancia del dominio. Esto es útil si necesita acceder a la instancia del dominio fuera de su alcance.

• children: React.ReactNode

Configurar un reino con RealmProvider

Puedes configurar un RealmProvider de dos maneras:

• Importar RealmProvider directamente desde @realm/react

• Utilice createRealmContext() para configurar un RealmProvider y crear ganchos

Esta sección detalla cómo configurar un RealmProvider importado directamente @realm/react desde. Para obtener información sobre el uso createRealmContext() de, consulte Crear contexto con createRealmContext().

Los modelos de objetos forman parte de la mayoría de las configuraciones de dominio. Para obtener más información sobre dominios y modelos de datos, consulte Definir un modelo de objetos de dominio.

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

Configurar más de un reino

Al importar RealmProvider desde @realm/react, ese proveedor tiene un contexto específico y está asociado a un solo dominio. Si necesita configurar más de un dominio, use createRealmContext() para instanciar un nuevo proveedor para cada dominio.

Si importa useRealm(), useQuery() o useObject() directamente desde @realm/react, esos ganchos usan el contexto de dominio predeterminado. Para trabajar con más de un dominio, debe desestructurar un nuevo proveedor de dominio y sus ganchos asociados a partir del resultado de createRealmContext(). Debe usar proveedores de espacios de nombres para evitar confusiones sobre con qué proveedor y ganchos está trabajando.

Para una guía detallada, consulte Expose More Than One Realm.

Para obtener detalles sobre createRealmContext(), consulte "Crear contexto con createRealmContext()" en esta página.

Ganchos de 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>;
      })}
    </>
  );
};

Crear contexto con createRealmContext()

createRealmContext(realmConfig?): RealmContext

Generalmente, solo usarás createRealmContext() si necesitas configurar más de un dominio. De lo contrario, debes importar RealmProvider y los ganchos directamente desde @realm/react.

El createRealmContext() método crea un contexto de ReactObjeto para un dominio con una configuración determinada. El Context objeto contiene lo siguiente:

• Un componente proveedor de contexto (denominado en otro RealmProvider lugar) que envuelve a los componentes secundarios y les proporciona acceso a ganchos.

• Varios ganchos prediseñados que acceden al reino configurado.

Para una guía detallada, consulte Expose More Than One Realm.

Parámetros

• realmConfig?: Realm.Configuration Se pueden utilizar todas las propiedades de BaseConfiguration.

Devuelve

• RealmContext Un objeto que contiene un componente RealmProvider y los ganchos useRealm, useQuery y useObject.