MongoDB ObjectId and Single Fetch

[nartc]

Hi folks,

We're using mongodb node driver in our application. I'm currently testing Single Fetch and running into a case where the ObjectId type isn't part of Serializable.

This makes total sense to me because Serializable in Remix should have nothing to do with ObjectId at all. My question is, will Remix expose a way to provide turbo-stream plugins from user-land code?

Ideally, I would like to keep the ObjectId that we get from MongoDB as-is so server-side code can still operate on ObjectId instances. However, client-side doesn't really care about ObjectId so a string would be good enough.

Other alternatives are:

• Convert to string _id for all use-cases (this is not ideal because this forces us to convert the string ID back to ObjectId for querying)
• Convert to string before sending back to the client. This is less than ideal (and just tedious) but it's not the end of the world for us.

[sergiodxa]

I have asked before about exposing a way to customize turbo-stream and the team said they won't do it as it's a intermediate step before RSC streaming protocol is supported.

Since turbo-stream doesn't automatically serialize values you would have to call .toString() yourself when sending a MongoDB document.

[bewildergeist]

@nartc How did you end up solving this issue in your codebase? We're having the same problem (using Mongoose and RR7), and I have tried various combinations of Mongoose's toObject method and flattenObjectIds option, but it remains a very manual transformation process when returning data from a loader (as .lean() unfortunately doesn't invoke the toObject method).

I (think I) have settled on embracing turbo-stream's serialization to a buffer object, and then calling a helper function in component code when we need the hex string representation of an ObjectId, e.g. something like:

function objectIdToString(objectId: { buffer: Record<string, number> }): string {
  return Object.values(objectId.buffer)
    .map((byte) => byte.toString(16).padStart(2, '0'))
    .join('');
}

// Example
const mongooseObjectFromLoaderData = {
  _id: {
    buffer: {
      "0": 100, "1": 246, "2": 57, "3": 181, "4": 215, "5": 58, "6": 154,
      "7": 203, "8": 21, "9": 69, "10": 66, "11": 254
    }
  }
};

const hexString = objectIdToString(mongooseObjectFromLoaderData._id);
console.log(hexString); // "64f639b5d73a9acb154542fe"

If you've come up with something better, I'd love to know! 🙏

[nartc]

Circle back to this, we haven't pulled the plug on migrating yet.

Your approach seems reasonable imo. How are you dealing with embedded ObjectId like

{
  "_id": ObjectId("..."),
  "memberships": [
    {
      "userId": ObjectId("..."),
      "role": "admin"
    }
  ]
}

[bewildergeist]

Same strategy, if I need the hex string version of an embedded ObjectId I'll pass it through the helper function in component code, e.g.:

const hexString = objectIdToString(mongooseObjectFromLoaderData.memberships[0].userId);

Or whatever:

memberships.map((m) => <li key={objectIdToString(m.userId)}>{m.role}</li>);