Get Started with Realm Web & Atlas Device Sync (Preview)

Import Realm

Import realm at the top of your source files where you interact with the database:

import Realm, { App } from "realm";

Initialize an App

Device Sync uses Atlas App Services to manage authentication and sync data between devices. To use Device Sync from your web app, you must connect to an App Services App that has Device Sync enabled.

You connect to an App using its client App ID. To learn how to get it, see Find Your App ID.

const app = new App({ id: "<your-app-id>" });

Authenticate a User

To authenticate a user, call the App.logIn() method on your App instance. You can log in with any authentication provider. For more examples, see Authenticate a User.

const credentials = Realm.Credentials.anonymous();
await app.logIn(credentials);

Define an Object Model

Realm uses native JavaScript objects to model your application data. You define object types where all objects of a given type share a schema that controls the object's contents.

To define a Realm object type, create a schema object that specifies the type's name and properties. The type name must be unique among object types in a realm.

const TaskSchema = {
  name: "Task",
  properties: {
    _id: "int",
    name: "string",
    status: "string?",
    owner_id: "string?",
  },
  primaryKey: "_id",
};

Open a Realm

To open a synced realm, call Realm.open() with a configuration object that specifies the realm's schema and includes a sync configuration object. The sync configuration should specify the authenticated user and define initial subscriptions that control which data is synced:

const realm = await Realm.open({
  schema: [TaskSchema],
  sync: {
    user: app.currentUser,
    flexible: true,
    // Define initial subscriptions to start syncing data as soon as the
    // realm is opened.
    initialSubscriptions: {
      update: (subs, realm) => {
        subs.add(
          // Get objects that match your object model, then filter them by
          // the `owner_id` queryable field
          realm.objects(Task).filtered(`owner_id == "${anonymousUser.id}"`)
        );
      },
    },
  },
});

Open a Non-Synced Realm

To open a local, in-memory realm that does not sync, call Realm.open() with a local realm configuration object:

const realm = await Realm.open({
  schema: [TaskSchema]
});

Create, Modify, and Delete Realm Objects

Once you have opened a realm, you can create, modify, and delete objects in it. All write operations must occur within a Realm.write() transaction block.

const allTasks = realm.objects(Task);
// Add a couple of Tasks in a single, atomic transaction.
realm.write(() => {
  realm.create(Task, {
    _id: 1,
    name: "go grocery shopping",
    status: "Open",
  });
  realm.create(Task, {
    _id: 2,
    name: "go exercise",
    status: "Open",
  });
});
const task1 = allTasks.find((task) => task._id == 1);
const task2 = allTasks.find((task) => task._id == 2);
realm.write(() => {
  // Modify an object.
  task1!.status = "InProgress";
  // Delete an object.
  realm.delete(task2);
});

Find, Sort, and Filter Objects

You can query objects in a realm using the Realm.objects() method. Queries must specify the object type to query for. You can optionally filter and sort the results of a query using a fluent method chaining API.

// Query for specific obect using primary key.
const specificTask = realm.objectForPrimaryKey(Task, 0);
// Query realm for all instances of the "Task" type.
const tasks = realm.objects(Task);
// Filter for all tasks with a status of "Open".
const openTasks = tasks.filtered("status = 'Open'");
// Sort tasks by name in ascending order.
const tasksByName = tasks.sorted("name");

Close a Realm

Call the Realm.close() method when done with a realm instance to avoid memory leaks.

// Close the realm.
realm.close();