使用 Firebase arrayUnion 更新对象中的数据

Question

I am looking to update data in an object without changing the index of the object within the array it is contained. As it currently stands, the code removes the current object from the array and then applies array Union to update the array but pushes the component to the end of the array but I am looking to just update the data without the component losing its index. This is the code I am currently working with, I looked through the Firebase docs to see if there was a way to just update the component but couldn't find anything if anyone could point me in the right direction, please.

      await firestore.update(project, {
        pages: firestore.FieldValue.arrayRemove(page),
      });

      await firestore.update(project, {
        pages: firestore.FieldValue.arrayUnion(newPage),
      });

Answer 1

arrayUnion adds new items to the array and arrayRemove removes items from an array. There isn't any way to update an existing item in array directly.

You would have to fetch the document, manually add/update the item at relevant index and then update the whole array back to the document.

Answer 2

Unfortunately there is no field transform to replace a value like this:

firestore.FieldValue.arrayReplace(page, newPage);

Storing arrays and making changes by index in remote databases is generally discouraged. This older Firebase blog post covers some of the reasons why even though it was written with the Firebase Realtime Database in mind.

If the order of that array is important, you have two options:

• fetch the array, mutate it, and then write it back. (simple)
• fetch the array, find the relevant index, update that index only. (difficult)

To achieve the first result, you would make use of a transaction to find the previous value and replace it:

const db = firebase.firestore();
const projectDocRef = db.doc("projects/projectId");

function replacePage(oldPage, newPage) {
  return db.runTransaction(async (t) => {
    const snapshot = await t.get(projectDocRef);

    if (!snapshot.exists) {
      // no previous data, abort.
      return "aborted";
    }

    const pagesArray = snapshot.get("pages");

    const index = pagesArray.findIndex((page) => page === oldPage);

    if (index === -1)
      return "not-found";

    pagesArray[index] = newPage;

    await t.set(projectDocRef, { pages: pagesArray }, { merge: true });

    return "replaced";
  });
}

replacePage("index", "shop")
  .then((result) => console.log("Page replacement was " + (result === "replaced" ? "" : " not") + " successful"))
  .catch((err) => console.error('failed: ', err));

Note: Anything beyond this point is educational. There are many issues with this approach at scale.

Because Firestore doesn't support array entry replacement by index, you'll need to implement a way to update an index using something Firestore understands - maps. Using some FirestoreDataConverter trickery, you can use the converter to serialize your array as a map when you write it to Cloud Firestore and deserialize it back to an array when you read it. The major trade-off here is in how you will be able to query your data. You will be able to perform queries by index (such as where('pages.0', '==', 'shop') ) but you'll lose the ability to use array-contains queries (such as where('pages', 'array-contains', 'shop') ).

First, you need to define the converter:

// const obj = {};
// setNestedProperty(obj, ["a", "b", "c"], true)
// obj is now { "a": { "b": { "c": true } } }
function setNestedProperty(originalObj, pathPropsArray, val) {
  const props = pathPropsArray.slice(0, -1);
  const lastProp = pathPropsArray[pathPropsArray.length-1];
  const parent = props.reduce((obj, p) => obj[p] ? obj[p] : (obj[p] = {}), originalObj);
  parent[lastProp] = val;
}

const pagesArrayConverter = {
  toFirestore(data) {
    if (data.pages !== undefined) {
      // step 1) convert array to map
      const pagesAsMap = {};
      data.pages.forEach((page, index) => {
        if (page !== undefined) {
          pagesAsMap[index] = page;
        }
      });
      data.pages = pagesAsMap;

      // step 2) if there are any mutations to "pages"
      //         while you are changing it, make the
      //         changes now before uploading to Firestore
      Object.keys(data)
        .filter(k => k.startsWith("pages."))
        .forEach(k => {
          const nestedValue = data[k];
          data[k] = undefined;
          delete data[k];
          setNestedProperty(pagesAsMap, k.slice(6).split("."), nestedValue);
        });
    }
    return data;
  },

  fromFirestore(snapshot, options) {
    const data = snapshot.data(options);
    if (data.pages !== undefined) {
      const pagesAsArray = [];
      Object.entries(data.pages)
        .map(([index, page]) => pagesAsArray[index] = page);
      // `pagesAsArray` may have empty elements, so we need
      // to fill in the gaps with `undefined`:
      data.pages = Array.from(pagesAsArray);
    }
    return data;
  }
};

Which you would then attach to a query/reference like this:

const db = firebase.firestore();
const projectDocRef = db.doc("projects/projectId")
  .withConverter(pagesArrayConverter)

If you already know that the previous value has an index of 2, you can just use:

await projectDocRef.set({ "pages.2": newPage }, { merge: true });

If you need to find it like before, you can use a transaction:

function replacePage(oldPage, newPage) {
  return db.runTransaction(aysnc (t) => {
    const snapshot = await t.get(projectDocRef);

    if (!snapshot.exists) {
      // no previous data, abort.
      return "missing";
    }

    const data = snapshot.data();
    // data is a { pages: Page[] }
  
    const index = data.pages.findIndex((page) => page === oldPage);

    if (index === -1)
      return "not-found";

    await t.set(projectDocRef, { ["pages." + oldIndex]: newPage }, { merge: true });
    return "replaced";
  });
}

replacePage("index", "shop")
  .then((result) => console.log("Page replacement was " + (result === "replaced" ? "" : " not") + " successful"))
  .catch((err) => console.error('failed: ', err));