Unable to retrieve changes with watch() from the Web SDK with Expo

Hello everyone,

I use the Realm Web SDK in an Expo architecture with react native for the client and the M0 Shared MongoDB cluster with AWS. I want to be able to retrieve data from a collection in real time from the client.

I noticed in the documentation that using Atlas Device Sync requires a specific version of realm but I need to use realm-web for my current architecture. This is why I use the watch() function of Mongodb Queries.

I installed the necessary dependencies and the function seems to be established correctly according to the logs in the App Services. Despite this, when I make a modification to the listened collection (insertion, deletion, update), I cannot retrieve it in the “for await … of …” loop. Nothing is displayed in the console.log() and I don’t understand why.

The documentation I followed :

My config :
I use the ‘@babel/plugin-transform-async-generator-functions’ because the ‘@babel/plugin-proposal-async-generator-functions’ has been deprecated.

  • package.json
  "dependencies": {
    "expo": "^49.0.9",
    "realm-web": "^2.0.0",
    "react-native-polyfill-globals": "^3.1.0",
    "@babel/plugin-transform-async-generator-functions": "^7.23.2",
    ...
  }
  • babel.config.js
module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ["@babel/plugin-transform-async-generator-functions"]
  };
};

Here is part of my code :

  • example.js
import { getApp, Credentials } from "realm-web";
import 'react-native-polyfill-globals/auto';

export const app = getApp('app_id');
await app.logIn(Credentials.emailPassword(email, password)); // simplified for example

let closeStream: () => void;

const handleStartWatch = useCallback(() => {
    startWatch().catch((err) => {
        console.error("Watch failed:", err);
    });
}, []);

const handleStopWatch = useCallback(() => {
    closeStream();
}, []);

const getMongoCollection = () => {
    const user = app.currentUser;
    const client = user.mongoClient('cluster_name');
    return client.db("db_name").collection("collection_name");
}

async function startWatch() {
    console.log("Starting watch stream");
    const runs = await getMongoCollection();
    const stream = runs.watch();

    closeStream = () => {
        stream.return(null);
        console.log("Stopping watch stream");
    }

    for await (const change of stream) {
        console.log("Received a change event", change);
    }
}

The permissions in App Services :
Global permissions :

  • Default roles and filter (This default rule is configured, but does not have any roles. As a result, all access to collections using the default roles & filters are currently denied by default.)

Collection permissions :

  • readAndWriteAll preset :
{
  "roles": [
    {
      "name": "readAndWriteAll",
      "apply_when": {},
      "document_filters": {
        "write": true,
        "read": true
      },
      "read": true,
      "write": true,
      "insert": true,
      "delete": true,
      "search": true
    }
  ]
}

The logs in App Services :