How to add child entities without id to parent in state normalized with normalizr

Question

I've recently started using normalizr with zustand in a new React app. It's been a very good experience so far, having solved most of the painful problems I've had in the past.

I've just bumped into an issue I can't think of a clean way of solving for the past few days.

Imagine I have a normalizr-normalized state looking like:

{
  "entities": {
    "triggers": {
      "1": {
        "id": 1,
        "condition": "WHEN_CURRENCY_EXCHANGED",
        "enabled": true,
        "value": "TRY"
      },
      "2": {
        "id": 2,
        "condition": "WHEN_CURRENCY_EXCHANGED",
        "enabled": true,
        "value": "GBP"
      },
      "3": {
        "id": 3,
        "condition": "WHEN_TRANSACTION_CREATED",
        "enabled": true,
        "value": true
      }
    },
    "campaigns": {
      "19": {
        "id": 19,
        "name": "Some campaign name",
        "triggers": [
          1,
          2,
          3
        ]
      }
    }
  },
  "result": 19
}
 

And we have a page that allows a user to add one or more triggers to the campaign and then save them. The problem is that at the time of adding these triggers, they do not have an id until the user clicks the Save button (ids are generated by the database). When the Save button is clicked, the state is being denormalized (via normalizr's denormalize function) and sent as payload to the backend looking like the following:

{
  "id": 19,
  "name": "Some campaign name",
  "triggers": [
    {
      "id": 1,
      "condition": "WHEN_CURRENCY_EXCHANGED",
      "enabled": true,
      "value": "TRY"
    },
    {
      "id": 2,
      "condition": "WHEN_CURRENCY_EXCHANGED",
      "enabled": true,
      "value": "GBP"
    },
    {
      "id": 3,
      "condition": "WHEN_TRANSACTION_CREATED",
      "enabled": true,
      "value": true
    }
  ]
}

The problem is that if the user adds an entity to the triggers, it does not have an id as ids are generated by the database and I cannot find a proper way to add it to the state (due to the id-based nature of normalized states).

The only workaround I can think of is generating some temporary IDs (e.g. uuid) when a trigger is added on the front-end but is not yet saved and then going over each entity upon denormalization, doing something like if (isUuid(trigger.id)) delete trigger.id, which seems too tedious and workaroundish.

Appreciate your help.

P.S. There is something similar explained here. The problem is that in our case the generateId('comment') logic is happening on the backend.

Answer 1

A simple solution is to split.

The create trigger API call and the add trigger to campaign API call.

Do the first, then save the trigger into the normalized store with the id generated by the backend.

Then add it to the campaign.