Geofirestore and onSnapshot are giving delayed events - information is not updating properly

[Diego-Mike]

Describe your environment

• Operating System version: Mac OS 10.15.7
• Browser version: Google chrome 103.0.5060.114
• Firebase library: Firebase and version: 9.9.0
• GeoFirestore version: 5.2.0

Describing the problem - Issue with onSnapshot events when grabbing data from collection given a radius

I have this mini-app, where i'm using react (with ts), and firebase along with geofirestore and @react-google-maps, in order to get realtime data.

The idea is simple, i have a marker on the center of the map, and around that point, i will have vehicles that will get update constantly, now, i wan to grab those vehicles given a radius which is currently 1km.

I'm expecting that, if i have a vehicle inside the 1km radius, it will get modified/updated everytime it changes, and if it gets out of the 1km radius, it will be removed/deleted from the map, and this is actually how it is working, but i've found a couple of latitudes and longitudes, where the events are sending me wrong data, it is telling me that a vehicle has been removed twice, when it actually got removed, but then i positioned it inside the radius (so it should return me an added event right ?), it's like it is having a delay between events.

Now, let me show you my code so you can understand better.

This is my firebase fronted config

import firebase from "firebase/compat/app";
import "firebase/compat/firestore";
import * as geofirestore from "geofirestore";

// Initialize the Firebase SDK
firebase.initializeApp({
  apiKey: process.env.REACT_APP_EQUIPOS_API_KEY,
  authDomain: process.env.REACT_APP_EQUIPOS_AUTH_DOMAIN,
  appId: process.env.REACT_APP_EQUIPOS_APP_ID,
  databaseURL: process.env.REACT_APP_EQUIPOS_DATABAS_EURL,
  measurementId: process.env.REACT_APP_EQUIPOS_MEASUREMENT_ID,
  messagingSenderId: process.env.REACT_APP_EQUIPOS_MESSAGING_SENDER_ID,
  projectId: process.env.REACT_APP_EQUIPOS_PROJECT_ID,
  storageBucket: process.env.REACT_APP_EQUIPOS_STORAGE_BUCKET,
});

// Create a Firestore reference
const firestore = firebase.firestore();

// Create a GeoFirestore reference
export const geoResources = geofirestore.initializeApp(firestore);

This is some filters for the data

import { geoResources } from "./config";

export const resourcesCollection = geoResources
  .collection("recursos")
  .where("equipo", "in", ["3000", "781", "782", "783"])
  .where("terminal", "==", 1)
  .where("disponibilidad", "==", true)
  .where("activo", "==", true);

And this is how i'm fetching vehicles in realtime with onSnapshot

function App() {
  const { isLoaded } = useLoadScript({
    googleMapsApiKey: process.env.REACT_APP_GOOGLE_MAPS!,
  });

  useEffect(() => {
    const unsubscribe = resourcesCollection
      .near({
        center: new firebase.firestore.GeoPoint(4.74744007, -74.11916694),
        radius: 1,
      })
      .onSnapshot(
        (snapshot) => {
          snapshot.docChanges().forEach((change) => {
            console.log(change.type, " --- ", change.doc.data());
          });
        },
        (err) => {
          console.log(err);
        }
      );

    return () => {
      unsubscribe();
    };
  }, []);

  const renderMap = () => {
    return (
      <GoogleMap
        mapContainerStyle={{ width: "100%", height: "100%" }}
        center={{ lat: 4.74744007, lng: -74.11916694 }}
        zoom={17}
      >
        <Marker
          position={{ lat: 4.74744007, lng: -74.11916694 }}
          icon={{
            url: "/Assets/map_markers/center_flag.png",
          }}
        />
      </GoogleMap>
    );
  };

  return (
    <div style={{ width: "100%", height: "100vh" }}>
      {isLoaded ? renderMap() : <div> Fuck you </div>}
    </div>
  );
}

export default App;

(Notice that the center of the map is 4.74744007, -74.11916694 and the radius is 1km)

When i enter the map, these are the vehicles i get

And i'm going to move this exact vehicle (which is at lat: 4.747502 lng: -74.119079) out of the radius to lat: 4.747123 lng: -74.108542, which is at 1.2km from the center point

What happens when i do that ? the event removed gets fired, and the vehicle disappears out of the 1km radius, in this image i show you where the vehicle now is supposed to be (black circle) and event information

And then i'm going to insert the vehicle inside the radius at lat: 4.747186 lng: -74.117272, and this is the event that onSnapshot gives, and i show you where the vehicle is supposed to be (black circle)

onSnapshot is giving me the event removed, why ? if i'm updating it so it can be inside the radius. And something that is actually weird, is that, it gives me the exact same information as the previous event, it's like it didn't even catch the new data, _lat is the same, _long is the same.

And what happens if i enter the map again ?

The vehicle now is where i updated its position.

So, in general, the problem is that, sometimes when i'm updating my vehicles's position, onSnapshot gives me delayed events, don't know what's going on there, but it is not showing me sometimes the proper and current data.

And i also want to add that, the way position gets updated is by some cloud functions that firebase has, whe thought that this was part of the problem, but is it not.

And last thing, is that, we've implemented this exact same library on node.js, and there we don't have this problem.

Any thoughts ?