RealmProvider (@realm/react)

Props

Todas as propriedades de BaseConfiguration podem ser passadas como props.

RealmProvider possui mais acessórios que definem seu comportamento:

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

  O componente alternativo a ser renderizado durante a abertura do Realm.

• closeOnUnmount?: boolean

  O padrão é true. Se definido como false, o Realm permanecerá aberto mesmo após o desmonte do componente.

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

  Uma referência à instância de Realm. Isso é útil para acessar a instância de Realm fora do seu escopo de Realm.

• children: React.ReactNode

Configurar um Realm com o RealmProvider

É possível configurar um RealmProvider de duas maneiras:

• Importar RealmProvider diretamente de @realm/react

• Usar createRealmContext() para configurar um RealmProvider e criar hooks

Esta seção detalha como configurar um RealmProvider importado diretamente do @realm/react. Para obter informações sobre como usar createRealmContext(), consulte Crie contexto com createRealmContext().

Os modelos de objetos fazem parte da maioria das configurações do Realm. Para saber mais sobre o Realm e os modelos de dados, consulte Definir um Realm Object Model.

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 mais de um Realm

Quando você importa RealmProvider de @realm/react, esse fornecedor tem um contexto específico e está associado a um único Realm. Se você precisar configurar mais de um Realm, utilize o createRealmContext() para instanciar um novo provedor para cada domínio.

Se você importar useRealm(), useQuery() ou useObject() diretamente de @realm/react, esses hooks utilizarão o contexto padrão de Realm. Para trabalhar com mais de um realm, é preciso desestruturar um novo provedor de realm e seus hooks associados a partir do resultado do createRealmContext(). Adote provedores de namespace para evitar confusão em relação ao provedor e aos hooks em uso.

Para obter um guia detalhado, consulte Expor mais de um Realm.

Para obter detalhes sobre createRealmContext(), consulte "Criar contexto com createRealmContext()" nesta página.

Hooks do 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>;
      })}
    </>
  );
};

Criar contexto com createRealmContext()

createRealmContext(realmConfig?): RealmContext

Na maioria das vezes, você só precisará usar o createRealmContext() se você precisar configurar mais de um Realm. Caso contrário, você deve importar RealmProvider e hooks diretamente de @realm/react.

O createRealmContext() método cria um contexto de reação objeto para um Realm com uma determinada configuração. O Context objeto contém o seguinte:

• Um provedor de contexto (referido como em outros RealmProvider lugares) componente que envolve componentes filho e fornece a eles acesso aos hooks.

• Vários hooks pré-construídos que acessam o Realm configurado.

Para obter um guia detalhado, consulte Expor mais de um Realm.

Parâmetros

• realmConfig?: Realm.Configuration Todas as propriedades de BaseConfiguration podem ser utilizadas.

Devoluções

• RealmContext Um objeto contendo um componente RealmProvider e os hooks useRealm, useQuery e useObject.