Configurar um realm sincronizado - React Native SDK

AppProvider

O AppProvider @realm/react fornece acesso a uma instância do seu App Services App.

Para configurar seu cliente de aplicativo, passe a string do ID do aplicativo para a propriedade id de AppProvider. Envolva todos os componentes que precisem acessar o aplicativo com o AppProvider.

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

Você pode encontrar mais informações sobre AppProvider na página Conectar aos App Services do Atlas.

UserProvider

O UserProvider lhe dá acesso a um usuário do Realm. É necessário um UserProvider para que uma aplicação use os hooks.

Primeiro, você precisa configurar a autenticação de usuário com AppProvider e UserProvider. Em seguida, trabalhe com autenticação usando os ganchos useApp() e useUser() .

Para configurar a autenticação do usuário:

1. Encerrar todos os componentes que você deseja utilizar com App Services em um AppProvider.

2. Dentro do AppProvider, envolva todos os componentes que precisam de acesso a um usuário autenticado com um UserProvider.

3. No UserProvider, inclua uma prop fallback com outro componente que registra o usuário. O aplicativo renderiza este componente se não houver nenhum usuário autenticado.

4. No componente passado para o acessório UserProvider.fallback, autentique um usuário com Realm.App.logIn(), que você pode acessar com o gancho useApp().

Componentes envoltos pelo UserProvider somente renderizam se o seu aplicativo tiver um usuário autenticado. Esses componentes podem acessar o usuário autenticado com o 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}
    />
  );
}

Você pode encontrar mais informações sobre UserProvider na página Autenticar usuários.

Provedor de domínios

RealmProvider é um invólucro que expõe um domínio aos seus componentes secundários. Você configura seu domínio passando adereços para RealmProvider.

Quando RealmProvider é renderizado, ele abre o domínio. Isso significa que os componentes filhos não poderão acessar o realm se a renderização falhar.

Para configurar um Realm sincronizado:

1. Importar fornecedores do @realm/react.

2. Configure o AppProvider.

3. Configure o UserProvider e aninhe-o no AppProvider.

4. Passe seus modelos de objetos para o suporte schema do RealmProvider.

5. Crie um objeto FlexibleSyncConfiguration.

6. Passe seu objeto SyncConfiguration para o acessório sync ou adicione o objeto em linha.

7. Configure assinaturas iniciais ou crie uma nova inscrição em componentes filho do RealmProvider.

8. Adicione outras propriedades de objeto de configuração como props ao RealmProvider para configurar ainda mais seu domínio.

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 obter mais informações sobre como configurar e usar RealmProvider, consulte a página Configurar um Realm.

Abrir o realm sincronizado no caminho específico

Utilizando AppConfiguration.baseFilePath e Realm.BaseConfiguration.path, você pode controlar onde os arquivos Realm e metadados são armazenados em dispositivos do cliente.

Para fazer isso, configure AppProvider.baseFilePath. Se baseFilePath não estiver definido, o diretório de trabalho atual será usado. Você também pode definir RealmProvider.sync.path para ter mais controle.

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

Se baseFilePath estiver configurado, os metadados serão sempre armazenados no <baseFilePath>/mongodb-realm/. Se baseFilePath não estiver definido, os metadados serão armazenados em <Realm.defaultPath>/mongodb-realm.

O local exato onde seu arquivo de Realm é armazenado varia dependendo de como você define Realm.BaseConfiguration.path:

• Realm.Configuration.path não está definido e baseFilePath está definido. Seu arquivo Realm está armazenado em baseFilePath.

• Realm.Configuation.path está definido para um caminho relativo. Seu arquivo Realm está armazenado em relação a baseFilePath.

• Realm.Configuration.path é um caminho absoluto. Seu arquivo Realm está armazenado em Realm.Configuration.path.

Acesse imediatamente com sincronização em segundo plano

Talvez você queira sincronizar as alterações em segundo plano para exibir dados parciais para o usuário enquanto o domínio sincronizado baixa os dados do servidor, evitando que a experiência do usuário seja bloqueada. Recomendamos sincronizar alterações em segundo plano para aplicativos em que o dispositivo do usuário possa ficar off-line. Para sincronizar alterações no plano de fundo, abra um domínio sincronizado de forma sincronizada.

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

Acesso após o tempo-limite com sincronização em segundo plano

Se você quiser sincronizar dados, mas estiver em um ambiente em que não se sabe se o usuário tem uma conexão com a Internet, especifique timeOut. Isso abre automaticamente o domínio quando:

• o período de tempo limite termina.

• o realm foi completamente baixado.

Se o domínio não terminar de baixar antes do tempo-limite, a sincronização inicial continuará em 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>
  );
}