Menu Docs
Página inicial do Docs
/
MongoDB Atlas
/
Atlas Device SDKs

Início rápido - React Native SDK

Nesta página

  • Sobre o pacote @realm/react
  • Configure Seu Aplicativo Realm
  • Defina os Modelos de Objeto
  • Configurar um Realm
  • Trabalhe com Objetos de Realm
  • Ler, classificar e filtrar objetos
  • Criar, atualizar e deletar objetos de Realm
  • Adicione o Atlas Device Sync (Opcional)
  • Pré-requisitos
  • Configurar e acessar um Realm sincronizado
  • Próximo: Confira os aplicativos de modelo e o tutorial

Esta página demonstra como usar o Realm com o React Native SDK.

Antes de começar, instale o Realm React Native SDK.

Sobre o pacote @realm/react

@ Realm/React é um pacote usado no React Native SDK. Ele fornece React hooks com reconhecimento de estado para dados do Realm . Os hooks observam os dados do Realm e renderizam novamente os componentes conforme necessário.

A documentação do React Native SDK usa o pacote @realm/react npm para exemplos e conceitos de descrição.

Consulte estas páginas para obter mais detalhes:

Configure Seu Aplicativo Realm

Após instalar os pacotes realm e @realm/react, há mais alguns itens para configurar para que você possa acessar seu realm e trabalhar com dados locais:

  • Definir seus modelos de objeto

  • Configurar um realm criando um objeto de contexto de realm, extraindo hooks e configurando fornecedores

Defina os Modelos de Objeto

Os modelos de objeto do aplicativo definem os tipos de dados que você pode armazenar dentro de um domínio. Cada modelo de objeto se torna um tipo de objeto Realm.

Para definir um modelo de objeto de Realm:

  1. Crie uma classe que estenda Realm.Object.

  2. Adicione um campo schema.

  3. Para o valor schema, crie um objeto que contenha as propriedades properties e name. O valor do nome deve ser exclusivo entre os tipos de objeto em sua região.

// Define your object model
export class Profile extends Realm.Object<Profile> {
  _id!: BSON.ObjectId;
  name!: string;
  static schema: ObjectSchema = {
    name: 'Profile',
    properties: {
      _id: 'objectId',
      name: {type: 'string', indexed: 'full-text'},
    },
    primaryKey: '_id',
  };
}

Para saber mais, consulte Definir um modelo de objeto de domínio.

Configurar um Realm

Para poder trabalhar com dados é necessário configurar um domínio. Isto significa que você precisa configurar o contexto e provedores do @realm/react. Para saber mais, consulte Configurar um domínio.

Para configurar e acessar um realm local:

  1. Importe RealmProvider de @realm/react.

  2. Passe seus modelos de objeto para a propriedade schema .

  3. Adicione outras propriedades de objeto de configuração como props ao RealmProvider.

import React from 'react';
import {RealmProvider} from '@realm/react';
// Import your models
import {Profile} from '../../../models';
export const AppWrapper = () => {
  return (
    <RealmProvider schema={[Profile]}>
      <RestOfApp />
    </RealmProvider>
  );
};

Trabalhe com Objetos de Realm

Quando tiver um modelo de dados e um realm configurado, você pode criar, ler, atualizar ou excluir objetos de Realm.

Você precisa aninhar componentes que executam estas operações dentro de RealmProvider. Os hooks useRealm(), useQuery() e useObject() permitem executar operações de leitura e escrita em seu domínio.

Para descrições detalhadas do RealmProvider e seus hooks, consulte RealmProvider (@realm/react)

Ler, classificar e filtrar objetos

@realm/react oferece hooks para ajudar a encontrar uma coleção de objetos de Realm ou um único objeto Realm.

Como parte do useQuery(), você pode filtrar ou classificar os resultados usando a RQL (Realm Query Language).

import React from 'react';
import {useQuery} from '@realm/react';
import {Profile} from '../../models';
export const Read = () => {
  // Find
  const profiles = useQuery(Profile);
  // Sort
  const sortedProfiles = useQuery(Profile, profiles => {
    return profiles.sorted('name', false);
  });
  // Filter
  const filteredProfiles = useQuery(Profile, profiles => {
    return profiles.filtered('name == "testProfile"');
  });
  // ... rest of component
};

Para saber mais, consulte CRUD - Leia e Dados de consulta.

Leia Operações fora dos hooks

Às vezes, você pode precisar usar as operações de leitura do domínio, mas não no nível superior do componente React Native. Como os hooks funcionam apenas no nível superior dos componentes, você não pode utilizar os hooks @realm/react nessas situações.

Em vez disso, você pode usar Realm.objects para coleção ou Realm.objectForPrimaryKey para um único objeto.

Criar, atualizar e deletar objetos de Realm

Após acessar o realm com useRealm(), você pode criar, atualizar e excluir objetos dentro do realm. Todas as operações devem estar em um bloco de transação Realm.write() .

Para saber mais, consulte Transações de escrita.

Criar objetos

Para criar um novo objeto de Realm, especifique o tipo de objeto, passe os primeiros valores do objeto e adicione-o ao realm em um bloco de transação de escrita.

import React, {useState} from 'react';
import {Text, TextInput, View} from 'react-native';
import {BSON} from 'realm';
import {useRealm} from '@realm/react';
import {Profile} from '../../models';
export const Create = () => {
  const realm = useRealm();
  const [profileName, setProfileName] = useState('');
  const addProfile = () => {
    realm.write(() => {
      realm.create(Profile, {
        _id: new BSON.ObjectId(),
        name: profileName,
      });
    });
  };
  return (
    <View>
      <Text>Create</Text>
      <TextInput
        onChangeText={setProfileName}
        value={profileName}
        placeholder="Profile name..."
      />
      <Button
        title="Add Profile"
        onPress={addProfile}
      />
    </View>
  );
};

Para saber mais, consulte CRUD - Criar.

Atualizar objetos

Para atualizar um objeto de domínio, atualize as propriedades dele em um bloqueio de transação de escrita.

import React, {useState} from 'react';
import {Text, FlatList, View, Pressable, TextInput} from 'react-native';
import {useRealm, useQuery} from '@realm/react';
import {Profile} from '../../models';
export const Update = () => {
  const realm = useRealm();
  const profiles = useQuery(Profile);
  const [profileToUpdate, setProfileToUpdate] = useState('');
  const [newProfileName, setNewProfileName] = useState('');
  const updateProfile = () => {
    const toUpdate = realm
      .objects(Profile)
      .filtered('name == $0', profileToUpdate);
    realm.write(() => {
      toUpdate[0].name = newProfileName;
    });
  };
  return (
    <View>
      <Text>Update</Text>
      {profiles.length ? (
        <View>
          <Text>Profiles: </Text>
          <FlatList
            scrollEnabled={false}
            data={profiles}
            horizontal={true}
            renderItem={({item}) => (
              <Pressable
                onPress={() => {
                  setProfileToUpdate(item.name);
                }}>
                <Text
                 >
                  {item.name}
                </Text>
              </Pressable>
            )}
            keyExtractor={item => item.name}
          />
        </View>
      ) : (
        <Text>🛑 No profiles found</Text>
      )}
      {profileToUpdate && (
        <TextInput
          style={styles.textInput}
          onChangeText={setNewProfileName}
          value={newProfileName}
          placeholder="New profile name..."
        />
      )}
      <Button
        title="Update profile"
        onPress={updateProfile}
      />
    </View>
  );
};

Para saber mais, consulte CRUD - Atualização.

Excluir objetos

Para excluir um Objeto de Realm, passe o objeto para Realm.delete() dentro de um bloco de transação de gravação.

import React, {useState} from 'react';
import {Text, FlatList, View, Pressable} from 'react-native';
import {useRealm, useQuery} from '@realm/react';
import {Profile} from '../../models';
export const Delete = () => {
  const realm = useRealm();
  const profiles = useQuery(Profile);
  const [profileToDelete, setProfileToDelete] = useState('');
  const deleteProfile = () => {
    const toDelete = realm
      .objects(Profile)
      .filtered('name == $0', profileToDelete);
    realm.write(() => {
      realm.delete(toDelete);
    });
  };
  return (
    <View>
      <Text>Delete</Text>
      {profiles.length ? (
        <View>
          <Text>Profiles: </Text>
          <FlatList
            scrollEnabled={false}
            data={profiles}
            horizontal={true}
            renderItem={({item}) => (
              <Pressable
                onPress={() => {
                  setProfileToDelete(item.name);
                }}>
                <Text
                 >
                  {item.name}
                </Text>
              </Pressable>
            )}
            keyExtractor={item => item.name}
          />
        </View>
      ) : (
        <Text>🛑 No profiles found</Text>
      )}
      <Button
        title="Delete profile"
        onPress={deleteProfile}
      />
    </View>
  );
};

Para saber mais, consulte CRUD - Excluir.

Adicione o Atlas Device Sync (Opcional)

Após executar seu domínio não sincronizado, você pode adicionar Atlas Device Sync. Isso permite que os dados do seu domínio sejam sincronizados com um cluster do MongoDB Atlas e outros dispositivos clientes.

Para usar o Device Sync, é necessário definir mais alguns itens:

  • Criar um backend no Atlas App Services (veja os pré-requisitos abaixo)

  • Configurar um domínio de sincronização flexível em vez de um domínio não sincronizado

Pré-requisitos

Configurar e acessar um Realm sincronizado

Para utilizar um Device Sync, você precisa configurar três provedores do @realm/react:

Quando tiver inicializado sua aplicação, autenticado um usuário e definido seu modelo de objeto, você poderá configurar um Realm sincronizado. É semelhante à configuração de um Realm local. No entanto, é necessário adicionar mais alguns props ao RealmProvider.

Adicione o prop sync ao RealmProvider e passe-o a um objeto FlexibleSyncConfiguration . Este objeto de sincronização deve conter flexible: true Você também deve adicionar assinaturas iniciais. Você deve ter pelo menos uma assinatura de sincronização antes de ler ou escrever dados sincronizados.

Para configurar e acessar um realm sincronizado:

  1. Inicialize o aplicativo usando AppProvider. Você pode encontrar sua ID do aplicativo na UI do Atlas App Services .

  2. Autentique um usuário com UserProvider

  3. Configure um domínio sincronizado com RealmProvider

import React from 'react';
import {Credentials} from 'realm';
import {RealmProvider, AppProvider, UserProvider, useApp} from '@realm/react';
// Import your models
import {Profile} from '../../../models';
// Expose a sync realm
export function AppWrapperSync() {
  return (
    <AppProvider id={APP_ID}>
      <UserProvider fallback={LogIn}>
        <RealmProvider
          schema={[Profile]}
          sync={{
            flexible: true,
            onError: (_session, error) => {
              console.log(error);
            },
            initialSubscriptions: {
              update(subs, realm) {
                subs.add(realm.objects('Profile'));
              },
              rerunOnOpen: true,
            },
          }}
          fallback={fallback}>
          <RestOfApp />
        </RealmProvider>
      </UserProvider>
    </AppProvider>
  );
}

A sintaxe para criar, ler, atualizar e excluir objetos em um domínio sincronizado é idêntica à sintaxe para domínios não sincronizados. Enquanto você trabalha com dados locais, um thread em segundo plano integra, carrega e baixa conjuntos de alterações de forma eficiente.

Para saber mais, consulte Configurar um domínio sincronizado.

Próximo: Confira os aplicativos de modelo e o tutorial

Se você estiver interessado em uma experiência guiada, leia nosso tutorial do SDK do Realm React Native. Este tutorial implementa e expande um aplicativo React Native básico criado com Realm e Device Sync.

Você pode também usar aplicativo de modelo para experimentar o React Native SDK por conta própria. Para configurar a aplicativo de modelo, consulte as aplicativos de modelo na documentação do Atlas App Services.

Próximo

Bem-vindo aos Docs do Atlas Device SDK