4

I'm using firebase in my react-native project (with typescript), I set up all thing correctly and it works fine with data messages like below:

{
  "to": "fcm-token",

  "data": {
    "field1": "value1",
    "field2": "value1",
    "field3": "value1"
  }
}

in my App, I can access my data using data filed of RemoteMessage like below:

const data: MyDataType = remoteMessage.data;
const {/* destructed fields */} = data;

But when my server send nested Object to FCM server, it converts them to string and so I can not access them directly like above.

this is what my server send to FCM server:

{
  "to": "fcm-token",

  "data": {
    "field1": {
      "subfield1": "subvalue1",
      "subfield2": "subvalue2",
    },
    "field2": "value1",
    "field3": "value1"
  }
}

and this is what I get in my application:

{
  "to": "fcm-token",

  "data": {
    "field1": "{"subfield1": "subvalue1","subfield2": "subvalue2"}", <--- the problem is here, it must be a nested object not string
    "field2": "value1",
    "field3": "value1"
  }
}

I set Content-Type header to application/json in my server post requests, so I don't think there is any problem with my headers.

Am I doing something wrong? How can I prevent FCM from converting my nested objects?

2 Answers 2

8

👋 react-native-firebase author here,

We don't internally convert anything to strings on our implementation, these come through to native as strings already, for example on Android this uses the RemoteMessage FCM class - where we call getData() which as you can see here returns strings only.

They way I've got around this myself if I want nested data is to have just a single data field where I provide all my data to as a single JSON string, then when receiving it I only need to JSON.parse a single field to get the structure back. E.g.

const data = {
  "field1": "value1",
  "field2": "value1",
  "field3": {
    "subfield1": "subvalue1",
  }
}

const payload = {
  "to": "fcm-token",
  "data": {
    "json": JSON.stringify(data),
  }
}
const data: MyDataType = remoteMessage.data;
const { field1, field2, field3 } = JSON.parse(data.json);

console.log(field3.subfield1);

Alternatively, you can flatten your data object before sending using something like this and then unflatten on the receiving end using something like this.

Hope this helps.

1
  • 1
    To avoid errors on certain platforms, make sure the values respect their forms. That is, in the data object above, if value1 is an int you should remove the quotes. Same rule for boolean
    – TheLetch
    Commented Feb 9, 2021 at 8:45
4

If you look at the documentation for message type in the REST API, you'll see that data is declared as:

"data": {
  string: string,
  ...
},

So the data field can only hold string values, not more complex objects.

If you want to store more complex values, encode them as a string first and then decode them on the client, for example with JSON.stringify() and JSON.parse().

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.