Configurar un dominio sincronizado - SDK de React Native

Proveedor de aplicaciones

El @realm/react AppProvider le brinda acceso a una instancia de su aplicación App Services.

Para configurar el cliente de la aplicación, pase la cadena de ID de la aplicación a la propiedad id de AppProvider. Envuelva los componentes que necesiten acceder a la aplicación con AppProvider.

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

Puede encontrar más información sobre AppProvider en la página Conectarse a los servicios de la aplicación Atlas.

Proveedor de usuarios

UserProvider te da acceso a un usuario de Realm.UserProvider Se requiere un para que una aplicación use los ganchos.

Primero, debe configurar la autenticación de usuario con AppProvider y UserProvider. Luego, trabaje con la autenticación usando los ganchos useApp() y useUser().

Para configurar la autenticación de usuario:

1. Envuelva todos los componentes que desea utilizar con App Services en un AppProvider.

2. Dentro de AppProvider, envuelva todos los componentes que necesitan acceso a un usuario autenticado con un UserProvider.

3. En UserProvider, incluya una propiedad fallback con otro componente que inicie sesión a un usuario. La aplicación representa este componente si no hay ningún usuario autenticado.

4. En el componente pasado a la propiedad UserProvider.fallback, autentica un usuario con Realm.App.logIn(), al que puedes acceder con el gancho useApp().

Los componentes encapsulados por UserProvider solo se renderizan si la aplicación tiene un usuario autenticado. Estos componentes pueden acceder al usuario autenticado con el gancho 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}
    />
  );
}

Puede encontrar más información sobre UserProvider en la página Autenticar usuarios.

Proveedor de reino

RealmProvider es un contenedor que expone un dominio a sus componentes secundarios. El dominio se configura pasando RealmProvider propiedades a.

Al renderizar RealmProvider, se abre el dominio. Esto significa que los componentes secundarios no pueden acceder al dominio si falla el renderizado.

Para configurar un reino sincronizado:

1. Importar proveedores @realm/reactdesde.

2. Configurar AppProvider.

3. Configure UserProvider y anídelo dentro de AppProvider.

4. Pase sus modelos de objetos a la propiedad schema de RealmProvider.

5. Cree un objeto FlexibleSyncConfiguration.

6. Pase su objeto SyncConfiguration a la propiedad sync o agregue el objeto en línea.

7. Configure suscripciones iniciales o cree una nueva suscripción en RealmProvider componentes secundarios.

8. Agregue otras propiedades de objeto de configuración como accesorios a RealmProvider para configurar aún más su reino.

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

Para obtener más información sobre cómo configurar y RealmProvider usar, consulte la página Configurar un reino.

Abrir reino sincronizado en una ruta específica

Al utilizar AppConfiguration.baseFilePath y Realm.BaseConfiguration.path, puede controlar dónde se almacenan los archivos de metadatos y de Realm en los dispositivos cliente.

Para ello, configure AppProvider.baseFilePath. Si no se configura baseFilePath, se utiliza el directorio de trabajo actual. También puede configurar RealmProvider.sync.path para mayor control.

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

Si se configura baseFilePath, los metadatos siempre se almacenan en <baseFilePath>/mongodb-realm/. Si no se configura baseFilePath, se almacenan en <Realm.defaultPath>/mongodb-realm.

El lugar exacto donde se almacena tu archivo Realm puede variar según la configuración de Realm.BaseConfiguration.path:

• Realm.Configuration.path No está configurado y baseFilePath está configurado. Su archivo de Realm se almacena en baseFilePath.

• Realm.Configuation.path Se establece en una ruta relativa. El archivo de Realm se almacena en relación con baseFilePath.

• Realm.Configuration.path Es una ruta absoluta. Tu archivo Realm se almacena en Realm.Configuration.path.

Acceso inmediato con sincronización en segundo plano

Es posible que desee sincronizar los cambios en segundo plano para mostrar datos parciales al usuario mientras el dominio sincronizado descarga datos del servidor, lo que evita que la experiencia del usuario se vea bloqueada. Recomendamos sincronizar los cambios en segundo plano para las aplicaciones en las que el dispositivo del usuario pueda desconectarse. Para sincronizar los cambios en segundo plano, abra un dominio sincronizado sincrónicamente.

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

Acceso después del tiempo de espera con sincronización en segundo plano

Si desea sincronizar datos, pero se encuentra en un entorno donde no se sabe con certeza si el usuario tiene conexión a Internet, especifique timeOut. Esto abre automáticamente el dominio cuando:

• transcurre el tiempo de espera.

• El reino se ha descargado completamente.

Si el reino no termina de descargarse antes del tiempo de espera, la sincronización inicial continúa en segundo plano.

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