MobX 观察 JavaScript 对象/引用

Question

我正在尝试使用以下库将 apollo 商店与 mobx 合并。 https://github.com/sonaye/mobx-apollo

它只是尝试用一个可观察的 mobx 层包装 apollo 存储，如下所示：

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;

问题是图书馆给我以下错误：

TypeError: Cannot define property __mobxDidRunLazyInitializers, object is not extensible

问题似乎是由 const observableQuery = observable(query.currentResult()) 引起的。 query.currentResult() returns 一个 javascript 对象，如下所示，一旦获取数据就会更新（尽管我们永远不会那么远）

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

有没有办法让 mobx 正确地观察一个对象或对一个对象的引用？

参见：https://codesandbox.io/s/xv1wxl14xo

Answer 1

我在使用带有简单@observable.deep 的 MobX 4.0 时遇到了同样的问题。

恢复为 3.x 即可解决问题。这已得到证实。在 mobx 3.6.2 / mobx-react 4.4.3

中为我工作

MobX 观察 JavaScript 对象/引用

MobX observe JavaScript object / reference

mobx