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()返回一个javascript对象，它看起来如下所示，并且一旦获取数据就会更新（尽管我们从未达到过这么远）

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

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

请参阅：https://codesandbox.io/s/xv1wxl14xo

Answer 1

我使用MobX 4.0和一个简单的@ observable.deep得到同样的问题。

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

MobX观察JavaScript对象/引用

1 个答案: