CChangeset Watch showing duplicate documents of the same document. Do i have the configuration wrong?

MongoDB Atlas App Services & Realm
, ,
1

Hello. I am trying to make a real time feed in a react native app. I used the code on the documentation site using the watch functionality. I believe i have everything setup correctly however i am getting duplicates of the same data for some reason. I insert the test data through Desktop Compose. When i connect initially and insert data the data that is displayed via the changesteam is correct. But as i insert more data i end up just seeing the same data duplicated over and over again.

Maybe this is how the changesteams work? And i am trying to use them incorrectly? Perhaps i need to use sync. Or do i have them configured incorrectly. I have the app setup on atlas using the default connections. So maybe i need to change something.

This is an example of the output i am getting when i insert one document via compose. This is the documentKey output for a single insert:

LOG {“_id”: “65a87b410af3220f6fdb39ae”}
LOG {“_id”: “65a87b410af3220f6fdb39ae”}
LOG {“_id”: “65a87b410af3220f6fdb39ae”}
LOG {“_id”: “65a87b410af3220f6fdb39ae”}
LOG {“_id”: “65a87b410af3220f6fdb39ae”}
LOG {“_id”: “65a87b410af3220f6fdb39ae”}
LOG {“_id”: “65a87b410af3220f6fdb39ae”}
LOG {“_id”: “65a87b410af3220f6fdb39ae”}
LOG {“_id”: “65a87b410af3220f6fdb39ae”}
LOG {“_id”: “65a87b410af3220f6fdb39ae”}
LOG {“_id”: “65a87b410af3220f6fdb39ae”}
LOG {“_id”: “65a87b410af3220f6fdb39ae”}
LOG {“_id”: “65a87b410af3220f6fdb39ae”}
LOG {“_id”: “65a87b410af3220f6fdb39ae”}
LOG {“_id”: “65a87b410af3220f6fdb39ae”}
LOG {“_id”: “65a87b410af3220f6fdb39ae”}
LOG {“_id”: “65a87b410af3220f6fdb39ae”}
LOG {“_id”: “65a87b410af3220f6fdb39ae”}
LOG {“_id”: “65a87b410af3220f6fdb39ae”}

At first i thought maybe its just showing that inserts are going into all of the instances on the replicaset. But why is it duplicating so much?

How do i just show the single document as i want to add it to a feed in the app?

Thank you.

2

Hi @Ross_Edwards,

Can you share a code snippet of how you are using the watch command?

3

Hello. Thank you for the reply. It seems the problem was on the react side. I used the example in the documentation but it only shows the console.log part of the code. When i add setstate it seems to cause some kind of infinite loop. I did get it to work with another version of code that i found in a tutorial.

This is the code that caused an increasing loop: I am mainly using the insert aspect of the events right now. When i dont include the setjobsfrommongo and just log the data it seems to work. Its when i add the setstate that things go haywire.

/const watchForAllChanges = async (
jobs: Realm.Services.MongoDB.MongoDBCollection,
) => {
// Watch for changes to the plants collection
for await (const change of jobs.watch())) {
console.log(JSON.stringify(change));
setJobsFromMongo(jobs => […jobs, change.fullDocument]);/

  /*switch (change.operationType) {
    case 'insert': {
      const {documentKey, fullDocument} = change;
      // ... do something with the change information.
      //const found = jobsFromMongo.find((element) => element === fullDocument);
      //console.log("found " + found);

      //console.log("fulldocuemnt" + JSON.stringify(fullDocument));

      console.log(documentKey);

      //console.log(jobsFromMongo.find(job => job._id === fullDocument._id));

      //console.log("contains " + jobsFromMongo.Contains

      //make a call to the database based on documentkey

      if(jobsFromMongo.indexOf(fullDocument) === -1){

          //setJobsFromMongo(jobs => [...jobs, fullDocument]);

      }

      //console.log("inserted into jobs " + JSON.stringify(fullDocument));
      //check if document exists first and then add it
      
      break;
    }
    case 'update': {
      const {documentKey, fullDocument} = change;
      // ... do something with the change information.
      break;
    }
    case 'replace': {
      const {documentKey, fullDocument} = change;
      // ... do something with the change information.
      break;
    }
    case 'delete': {
      const {documentKey} = change;
      // ... do something with the change information.
      break;
    }
  }*/

// }
//};

/const jobs = user!
.mongoClient(‘mongodb-atlas’)
.db(‘ourvillage_dev’)
.collection(‘jobs’);
//.readConcern(“primary”);
// // Set up notifications
watchForAllChanges(jobs);/

/useEffect(() => {
const jobs = user!
.mongoClient(‘mongodb-atlas’)
.db(‘ourvillage_dev’)
.collection(‘jobs’);
//.readConcern(“primary”);
// // Set up notifications
watchForAllChanges(jobs);
}, [user, watchForAllChanges]);/

I fixed it with the following code, which i found in a tutorial for creating a chat app with mongodb. I was trying to see if maybe the issue was on the react side.

useEffect(() => {

const  login = async () => {

    const jobs = user!
      .mongoClient('mongodb-atlas')
      .db('ourvillage_dev')
      .collection<any>('jobs');
      //.readConcern("primary");
    // Set up notifications
    //watchForAllChanges(jobs);

    for  await (const  change  of  jobs.watch()) {
        console.log(JSON.stringify(change));

        //var jobsFromMongo1 = jobsFromMongo;
        //jobsFromMongo1.push(change.fullDocument);

        //setJobsFromMongo(jobs  => [...jobsFromMongo1]);
        setJobsFromMongo(jobs => [...jobs, change.fullDocument])
    }

}

login();

}, [user]);

I dont really know the different betwen these two pices of code. But it works. At least i think. :slight_smile:

Thank you.

1 Like