Firestore arrayUnion

Question

I'm building a basic CRUD app with vue.js and firebase. I'm trying to build out a favorites functionality and have ran into a persistent problem storing the data.

When a using clicks the add to favorites button I'm attempting to add the document id to an array in a "user profile" document. Here's the code:

export function addNewUserAction (type, key, userID){
  console.log(userID);
  console.log(key);

  firebase.firestore().collection('userActions').add({
    type: type,
    listing: key,
    user: userID,
    time: Date.now()
  })
  if(type === 'favorite'){
    var sendfav = db.collection('userProfiles').doc(userID).update({
      favs: firebase.firestore.FieldValue.arrayUnion(key)
    });
  }else if(type === 'xout'){
    var sendxout = db.collection('userProfiles').doc(userID).update({
      xouts: firebase.firestore.FieldValue.arrayUnion(key)
    });
  }else{
    console.error(type + " is not a user action");
  }
}

I get the following error in the console:

Uncaught TypeError: Cannot read property 'arrayUnion' of undefined
    at addNewUserAction

I have firebase and the db ref imported, and have ran a bogus .set() through each reference to confirm they are pointing at the right spots. I also already have the arrays created in 'userProfile' document.

The firebase install is fresh, like last week fresh, so I should have the function in my build.

Seems that arrayUnion is just not working. Any ideas? The other firestore functions are workin so I'm not sure. Am I blatenly missing something? Thanks

Answer 1

If you are using the Admin SDK

I was having some random errors similar to this, among others as I was experimenting. It turns out it was because I was using firebase admin sdk which requires a slight change compared to the web SDK documentation. If you are using firebase admin, replace

firebase.firestore.FieldValue.arrayUnion(...

with

admin.firestore.FieldValue.arrayUnion(...

Answer 2

I had the same issue...

This would not work

import { fireStore } from '../../firebase';
....
fireStore.collection("users").doc(props.uid).update({
    points: fireStore.FieldValue.arrayUnion({value: pointObj.value, reason: pointObj.reason})
});

I changed the import and used the exact code from the Firebase Docs.
This works fine.

import * as firebase from 'firebase';
....
fireStore.collection("users").doc(props.uid).update({
    points: firebase.firestore.FieldValue.arrayUnion({value: pointObj.value, reason: pointObj.reason})
});

Hope that helps.

Answer 3

Just wanted to update this. I was able to get this working by importing firebase the following way:

`import firebase from "firebase/firebase";`

I think my issue before was several problems, the first primarily was not having the correct version. I just recently updated to 5.8.4 which completely broke my app. I tried the above as a possible solution and it got my app working again. That led me to try it on with arrayUnion and it worked. Hopefully thats helpful to someone. Thanks all for the help.

Update 10/11/19 So I wanted to add another update to this in case someone new to firebase is chasing their tail with this as I have been.

So the solution I included above works because it uses the entire firebase SDK package ('firebase/firebase') which is fine, however you will importing the entire firebase package which is not ideal. You constantly see an alert in your console that you're using the development SDK

If you're trying to optimize your app and only import the firebase packages you need ( ie auth, datatbase, etc.) you need to import the firebase app object from 'firebase/app' then import the required packages. The key is to import as an object as the firebase docs call for:

import * as firebase from 'firebase/app'; Import 'firebase/auth'

If you use:

import firebase from 'firebase/app' this will not work.

Hope that helps someone. I know it's probie stuff but it stumped me for a while in my learning curve.

Answer 4

Firestore - Pass Array To arrayUnion()

let myArray = ["1", "2", "3"];

docRef.update({
    test: firebase.firestore.FieldValue.arrayUnion.apply(this, myArray)
});

This worked for me^

Answer 5

For Vue.js Developers

I have created a folder named firebase in src folder, then i have created a file named init.js in firebase folder

init.js

import * as firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";

// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  // Your Firebase Config
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

// utils
const db = firebase.firestore();
const auth = firebase.auth();

export { db, auth, firebase };

Now use them in whichever components you need. Just by,

import { firebase, auth, db } from "@/firebase/init.js";

Now You can use firebase without any Errors

db.collection("users") // Collection Name
.doc(userId)           // Document in Collection indexed userId
.update({
    friends: firebase.firestore.FieldValue.arrayUnion(auth.currentUser.uid)
})
// friends is the array collection in firestore

Thats It