[Cloud Firestone] Offline changes of one field (list) by two partys can not be merged

[felixwortmann]

I know that Cloud Firestone already works offline. Some Details about my app:

My app is implemented like a to-do app where one to-do list is one document (the lists are shared and can be edited by multiple users). This document then contains a list of todos.

Here is the problem:

When two users without internet connection add a todo, we get a race condition. If I use theset() method, only the last one will be added (because it will overwrite the whole document).

Now you will say: "Well then use a transaction, that is made to prevent race conditions like that." The problem here is that Transactions just crash the app when they are executed offline.

Is there a solution for this? Is it possible to merge both lists in set()? Is it possible to somehow queue the transaction when offline and execute when online? Is there a library for that?

I think this is a very common problem so I am confused that I can not find any answers myself.

Edit: here is a more detailed description of the problem

[Dragate]

Have you tried using batched writes? Those work offline.

[felixwortmann]

So I tried this with batched writes and it does not work as I expected.

This is what I did to test:

My data structure in the test project looks like this:

• I used two clients with were both offline and edited the list on both of them. Lets call them a and b
• I added ["value"] to the list property on client a (offline)
• I added ["value","value"] to the list property on client b (offline)
• I took client b online => The list in Cloud Firestore updated to ["value","value"]
• I took a online => The list in Cloud Firestore changed to ["value"]

The problem

You can see that I wanted to add items to the list. Instead of adding though, it overwrote the whole list. This leads to items in the list that get removed because the a client was offline.

I do not know if I there is a better way to do this but this way is obviously not working for multiple clients which are not always online.

Here is my code for reference:

main.dart:

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool initalized = false;

  void _incrementCounter() {
    WriteBatch wb = FirebaseFirestore.instance.batch();
    FirebaseFirestore.instance.collection("abc").doc("abc").get().then((documentSnapshot) {
      var data = documentSnapshot.data();
      List list = data["list"];
      list.add("value");
      data["list"] = list;
      wb.set(documentSnapshot.reference, data);
      wb.commit();
    });

  }

  @override
  Widget build(BuildContext context) {
    if (!initalized) {
      Firebase.initializeApp()
          .then((value) => setState(() => initalized = true));

      return Center(
        child: CircularProgressIndicator(),
      );
    }
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: StreamBuilder(
          stream: FirebaseFirestore.instance
              .collection("abc")
              .doc("abc")
              .snapshots(),
          builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
            if (!snapshot.hasData) {
              return CircularProgressIndicator();
            }
            return Text(Map<String,dynamic>.from(snapshot.data.data())['list'].toString());
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

pubspec.yaml:

name: firebase_test
description: A new Flutter application.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev
version: 1.0.0+1

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  cloud_firestore: ^0.14.0+2
  firebase_core:
  cupertino_icons: ^0.1.3

dev_dependencies:
  flutter_test:
    sdk: flutter
  uses-material-design: true

[Dragate]

Yea, this wouldn't work. Array union (along with merge option if you're using set instead of update) might help in your case. However, there is a caveat with arrayUnion. It only adds unique values to arrays.

[felixwortmann]

That actually sounds great. In my real project, I have unique values so this should work. Can you tell me where I can find the flutter fire docs for array union?

[Dragate]

It's part of the FieldValue class,

[felixwortmann]

This seems to work. I think it should be more prominent in the documentation though. Should I open an issue for that?