object is not extensible - observing javscript object / reference

[ryanking1809]

I'm trying to merge the apollo store with mobx using the following library. https://github.com/sonaye/mobx-apollo

See: https://codesandbox.io/s/2or57135vp
Or simplified version: https://codesandbox.io/s/xv1wxl14xo

It just tries to wrap the apollo store with an observable mobx layer like so:

import { action, observable } from 'mobx';

const graphql = config => {
  const { client, onError, onFetch, ...opts } = config;
  const query = client.watchQuery(opts);
  const observableQuery = observable(query.currentResult());

  query.subscribe({
    next: action(value => {
      observableQuery.error = undefined;
      observableQuery.loading = value.loading;
      observableQuery.data = value.data;
      if (onFetch) onFetch(value.data);
    }),
    error: action(error => {
      observableQuery.error = error;
      observableQuery.loading = false;
      observableQuery.data = undefined;
      if (onError) onError(error);
    })
  });

  observableQuery.ref = query;
  return observableQuery;
};

export default graphql;

The problem is the library gives me the following error:
TypeError: Cannot define property __mobxDidRunLazyInitializers, object is not extensible

It seems as though const observableQuery = observable(query.currentResult()) is causing the issue. query.currentResult() returns a javascript object which just looks like the following, and will be updated once the data is fetched (although we never get that far)

{
    "data": {},
    "loading": true,
    "networkStatus": 1,
    "partial": true
}

Is there a way to make mobx correctly observe an object or a reference to an object?

[ryanking1809]

I need to look into it further but it seems to work with "mobx": "3.6.2", "mobx-react": "4.4.0"

[mweststrate]

Reproduced, will be fixed in 4.0.2

[mweststrate]

Released as 4.0.02