Optimistic insertion of entities that don't have an ID yet with createEntityAdapter

[kcrwfrd]

We're building a direct messaging UI, and would like to optimistically add newly sent messages, but there's a challenge in that the message does not have an ID yet.

We use crypto.randomUUID to generate an ID and assign it as a clientId, which we may use to refer to the message for updating it once successfully created on the server.

We thought about using selectId to reference either property:

const messagesAdapter = createEntityAdapter<Message, string>({
  selectId: (message) => message.id || message.clientId,
  sortComparer: (a, b) => compareDesc(new Date(a.ts), new Date(b.ts)),
})

But I fear that this could get messy.

When we have the message updated with the real ID, I think we would first need to remove the old one, since they will have different IDs indexed in the entity adapter.

const sendMessage = createAsyncThunk(
  'conversation/sendMessage',
  async (payload, { dispatch }) => {
    const { message, conversationId} = payload
    const clientId = crypto.randomUUID()
    
    dispatch(addClientMessage({ id: '', clientId, body: message }))
    // reducer calls messagesAdapter.addOne(state, { id: '', clientId, body })
    
    // Full code would wrap in a try { ... } catch { ... } so we can undo the optimistic update if it fails
    const result = await fetch(`/conversations/${conversationId}/messages`, { method: 'POST', body: message })
    
    dispatch(syncRemoteMessage({ ...result, clientId }))
    // reducer first calls messagesAdapter.removeOne(clientId)
    // then it must call messagesAdapter.addOne(result)
    // because I don't think it will support changing the ID property
  }
 )

Should this work? Are there any other suggested approaches?

It would be nice if you could do the following to update an entity with a new id and re-index the entity adapter.

// updates { id: '', clientId, body } -> { id: '123', body }
messagesAdapter.setOne(clientId, message)

[markerikson]

Funny thing, that actually does basically work :)

Our update* methods actually literally handle the case where you change the ID. (In fact, I've been working on perf improvements this week in #4361 , and I have been getting kind of annoyed that we do handle that case because it makes some of the logic trickier :) )

messagesAdapter.updateOne(state, {id: oldId, changes: {id: newId}})

[kcrwfrd]

Nice! Thanks for the help, Mark. So then the syncRemoteMessage reducer could be simplified as

type Message = { clientId?: string; id: string; body: string }

const syncRemoteMessage = (state, { payload: message }: PayloadAction<Message>) => {
  const { clientId } = message
  messagesAdapter.updateOne(state, { id: clientId, changes: message })
}

And since the message now has an id, that's what will be returned by selectId function and re-indexed by?

[markerikson]

Should be, yep!