I have a page where users can enter their information. When the user clicks "Save", I would package everything into an object and send it to my cloud function using AJAX. There, I have a server set up using the Express framework and I'd save the data into Firestore.

Everything works when I click on "Save". My data shows up in Firestore and there are no errors. However, when I edit the data and click "Save" a second time (still on the same page), I get this error on the server side:

Error: Element at index 0 should not be an empty string.
    at new FieldPath (C:\Users\Me\Documents\myProject\functions\node_modules\@google-cloud\firestore\build\src\path.js:440:23)
    at validateDocumentData (C:\Users\Me\Documents\myProject\functions\node_modules\@google-cloud\firestore\build\src\write-batch.js:625:16)
    at WriteBatch.set (C:\Users\Me\Documents\myProject\functions\node_modules\@google-cloud\firestore\build\src\write-batch.js:242:9)
    at DocumentReference.set (C:\Users\Me\Documents\myProject\functions\node_modules\@google-cloud\firestore\build\src\reference.js:337:27)
    at saveToFireStore (C:\Users\Me\Documents\myProject\functions\index.js:101:47)

Here's the error I got on the client side:

localhost:5001/myProject/us-central1/app:1 POST http://localhost:5001/myProject/us-central1/app 
415 (Unsupported Media Type)

Note that this didn't happen on the first time I click the "Save" button. This error would happen regardless if the data is changed or not. As long as "Save" is clicked more than once, this error would always appear.

Extra note: I don't use batch statements in my code yet the error shows a call to WriteBatch()

Things I tried to do:

• I have a check on the server side to make sure the obj is eligible (non-empty, contains valid fields...).

• I used the express.json() middleware.

• I used a simplified version of my data object to test and it still didn't work. The example is below; the actual object is the same but longer.

obj = {
  id: "123",
  name: "John",
  age: "24"
}

• The "Save" button works more than once if the user navigates away from the page and es back. However, I want the user to be able to save, edit anything, and save again on the same page.

• Clicking on another Cloud function task (I have a "Download" button) and retrying the "Save" button also doesn't work.

-My code on the client side:

// extract data from input fields
let dataObj = getDisplayedData();

// I also tested using this
// let dataObj = {
//  id: "123",
//  name: "John",
//  age: "24"
//}

let xhttp = new XMLHttpRequest();
const url = "cloud/function/url";
xhttp.open("POST", url);
xhttp.setRequestHeader("Content-Type", "application/json");
xhttp.send(JSON.stringify(dataObj));

-My code on the server side:

const functions = require('firebase-functions'),
  admin = require('firebase-admin'),
  express = require('express'),
  serviceAccount = require("./serviceAccountKey.json");

const app = express();

admin.initializeApp({
  credential: admin.credential.cert(serviceAccount),
  databaseURL: ""
});
const db = admin.firestore();

app.use(express.json());

app.post('/', (req, res) => {

    let dataObj = req.body;
    try {
        // check if obj is empty or missing keys
        checkDataObj(dataObj);
        saveToFireStore(dataObj);
        let msg = "Data Saved!";

        res.status(201).send(msg);
    } 
       catch(err) {
        res.status(415).send(err.message);
        console.log(err);
        console.log(err.stack);
    }
})

// save the dataObj into firestore
function saveToFireStore(dataObj) {
  db.collection("myCollection").doc(dataObj.id).set(dataObj);
}

I have a page where users can enter their information. When the user clicks "Save", I would package everything into an object and send it to my cloud function using AJAX. There, I have a server set up using the Express framework and I'd save the data into Firestore.

Everything works when I click on "Save". My data shows up in Firestore and there are no errors. However, when I edit the data and click "Save" a second time (still on the same page), I get this error on the server side:

Error: Element at index 0 should not be an empty string.
    at new FieldPath (C:\Users\Me\Documents\myProject\functions\node_modules\@google-cloud\firestore\build\src\path.js:440:23)
    at validateDocumentData (C:\Users\Me\Documents\myProject\functions\node_modules\@google-cloud\firestore\build\src\write-batch.js:625:16)
    at WriteBatch.set (C:\Users\Me\Documents\myProject\functions\node_modules\@google-cloud\firestore\build\src\write-batch.js:242:9)
    at DocumentReference.set (C:\Users\Me\Documents\myProject\functions\node_modules\@google-cloud\firestore\build\src\reference.js:337:27)
    at saveToFireStore (C:\Users\Me\Documents\myProject\functions\index.js:101:47)

Here's the error I got on the client side:

localhost:5001/myProject/us-central1/app:1 POST http://localhost:5001/myProject/us-central1/app 
415 (Unsupported Media Type)

Note that this didn't happen on the first time I click the "Save" button. This error would happen regardless if the data is changed or not. As long as "Save" is clicked more than once, this error would always appear.

Extra note: I don't use batch statements in my code yet the error shows a call to WriteBatch()

Things I tried to do:

• I have a check on the server side to make sure the obj is eligible (non-empty, contains valid fields...).

• I used the express.json() middleware.

• I used a simplified version of my data object to test and it still didn't work. The example is below; the actual object is the same but longer.

obj = {
  id: "123",
  name: "John",
  age: "24"
}

• The "Save" button works more than once if the user navigates away from the page and es back. However, I want the user to be able to save, edit anything, and save again on the same page.

• Clicking on another Cloud function task (I have a "Download" button) and retrying the "Save" button also doesn't work.

-My code on the client side:

// extract data from input fields
let dataObj = getDisplayedData();

// I also tested using this
// let dataObj = {
//  id: "123",
//  name: "John",
//  age: "24"
//}

let xhttp = new XMLHttpRequest();
const url = "cloud/function/url";
xhttp.open("POST", url);
xhttp.setRequestHeader("Content-Type", "application/json");
xhttp.send(JSON.stringify(dataObj));

-My code on the server side:

const functions = require('firebase-functions'),
  admin = require('firebase-admin'),
  express = require('express'),
  serviceAccount = require("./serviceAccountKey.json");

const app = express();

admin.initializeApp({
  credential: admin.credential.cert(serviceAccount),
  databaseURL: "https://my_data_base.firebaseio."
});
const db = admin.firestore();

app.use(express.json());

app.post('/', (req, res) => {

    let dataObj = req.body;
    try {
        // check if obj is empty or missing keys
        checkDataObj(dataObj);
        saveToFireStore(dataObj);
        let msg = "Data Saved!";

        res.status(201).send(msg);
    } 
       catch(err) {
        res.status(415).send(err.message);
        console.log(err);
        console.log(err.stack);
    }
})

// save the dataObj into firestore
function saveToFireStore(dataObj) {
  db.collection("myCollection").doc(dataObj.id).set(dataObj);
}

• javascript
• firebase
• express
• google-cloud-firestore
• google-cloud-functions

Share Improve this question Follow asked Jun 22, 2019 at 3:29 Thomas BuiThomas Bui 19833 silver badges1111 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

check out how you're packaging the object. just ran into this in my own project, discovered that the API data I was grabbing did, in fact, have an object with an empty key:

{ items: { '': [Object], A: [Object], B: [Object], C: [Object] }, size: 4 }

Dropping that first element from the items object "resolved" the create error for me.