String gets transformed in object with each letter as property

[the-noob]

Hi, I have the following models (a stripped down version but the essentials are here)

const Site = types
  .model("Site", {
    id: types.identifier,
    name: types.string,
    // these are external IDs, not related to my app, needed as strings for display
    associatedIds: types.maybeNull(types.array(types.string)), 
}).preProcessSnapshot(snapshot => {
    console.log(snapshot); 
    return snapshot;
  })
.actions(...);

const SiteStore = types
  .model("SiteStore", {
    items: types.optional(types.map(Site), {}),
  }) .actions(self => {
    /* eslint-disable no-param-reassign */
    const { apolloClient } = getEnv(self);
    
    return {
      find: flow(function* find(id) {
        if (self.items.has(id)) {
          return self.items.get(id);
        }

        try {
          const response = yield apolloClient.query({
            query: gql`
            {
              site(id: "${id}") {
                ...SiteFullDetails
              }
            }
            ${siteFragments.fullDetails}
          `,
          });

          const item = self.track(response.data.site);

          return Promise.resolve(item);
        } catch (error) {
          return Promise.reject(error);
        }
      }),

      track(entity) {
        if (!self.items.has(entity.id)) {
          console.log(entity); 
          return self.items.put(input);
        }

        return self.items.get(entity.id);
      },

When retrieved from the API, in SiteStore.track the entity looks like associatedIds: ["34c92219-21bc-40d1-9abe-7481983d0908"] - a proper Array of strings.
But in Site.preProcessSnapshot is received as associatedIds:[ {0: "3", 1: "4", 2: "c"...}] (the string gets transformed into an object with each letter as property) and MST complains about Error while converting ... at /associatedIds.

What am I doing wrong?

    "mobx": "^6.3.2",
    "mobx-react": "^7.2.0",
    "mobx-react-router": "^4.1.0",
    "mobx-state-tree": "^5.0.2",

[EmilTholin]

Hi @the-noob!

The track method in your code seems to be working nicely. Do you think you could alter the CodeSandbox so that it behaves the way you describe it?

[the-noob]

Hi @EmilTholin - sorry for wasting your time, found the issue, close to PEBKAC.
I've updated the sandbox example just for completeness and will describe the issue here, maybe it helps someone.

The mobx models mirror the GQL entities and we are using ApolloClient queries. The response has some extra __typename field and I made a function to remove that.

export const removeTypename = obj => {
  const result = {};
  Object.getOwnPropertyNames(obj).forEach(key => {
    if (key !== "__typename") {
      if (Array.isArray(obj[key])) {
        result[key] = obj[key].map(item => removeTypename(item));
      } else if (obj[key] !== null && typeof obj[key] === "object") {
        result[key] = removeTypename(obj[key]);
      } else {
        result[key] = obj[key];
      }
    }
  });
  return result;
};

As you can see from my example above, I was logging entity which is the GQL response (looking good) and not input which was the mangled thing after applying removeTypename

[EmilTholin]

No worries, nice that you found the issue!