将 RxJs takeUntil() 函数与 apollo-client 一起使用

Question

我正在使用 Apollo-Client 对我的 GraphQL 服务器进行查询和更改。由于 Apollo 有自己的错误处理，因此实现 takeUntil 函数来取消我的查询调用和我的突变要困难得多。

使用 Apollo，我的突变如下所示：

export const languageTimeZoneEpic = (action$) => {
  return action$.ofType(CHANGE_LANGUAGE)
    .mergeMap(action => client.mutate({
      mutation: languageMutation,
      variables: { id: action.id,  language: action.selected_language }
    }).then(result => changeLanguageFulfilled(result))
      .catch(error => changeLanguageError(error))
  );
};

我的突变没有问题，如果有错误，它会捕获它。 这里的问题是，如果我像下面的示例一样添加 takeUntil() 函数，我的函数就不再起作用了。

export const languageTimeZoneEpic = (action$) => {
  return action$.ofType(CHANGE_LANGUAGE)
    .mergeMap(action => client.mutate({
      mutation: languageMutation,
      variables: { id: action.id,  language: action.selected_language }
    }).then(result => changeLanguageFulfilled(result))
      .catch(error => changeLanguageError(error))
  ).takeUntil("END_LANGUAGE");
};

我想知道是否有一种方法可以使用takeUntil() 函数，即使我使用的客户端具有自己的错误处理功能。

*如果我在突变完成之前调度另一个动作，这里的 takeUntil() 将被调用。

谢谢

Answer 1

takeUntil 不接受字符串作为其参数。相反，它期望订阅一个 Observable，使用第一个 next'd 值作为信号。

redux-observable 是 99.9% 只是 RxJS，所以所有操作员对 redux/actions 一无所知除了 for ofType 这是 redux-observable 提供的唯一操作员 - 其余的是 RxJS 内置 -插入。

还有一个隔离问题。如果您将takeUntil 放在mergeMap 的外部，您将取消整个Epic，而不仅仅是特定的apollo-client 客户端。相反，我们需要将它放在mergeMap 中，并且由于我们正在处理一个 Promise，我们需要使用 Observable.from 来包装它。

export const languageTimeZoneEpic = (action$) => {
  return action$.ofType(CHANGE_LANGUAGE)
    .mergeMap(action =>
      Observable.from(
        client.mutate({
          mutation: languageMutation,
          variables: { id: action.id,  language: action.selected_language }
        })
        .then(result => changeLanguageFulfilled(result))
        .catch(error => changeLanguageError(error))
      )
        .takeUntil(action$.ofType('END_LANGUAGE'))
    );
};

但是，像这样使用 Promise then 和 catch 可以说是不合适的——如果你更喜欢使用 Promises，我可能会建议不要使用 redux-observable。当使用 redux-observable 时，我们通常只会在别无选择的情况下使用 Promises（例如，我们不控制 apollo-client API）。在这些情况下，我通常会尽快将它们包装为 Observable，然后其余的都是普通的 RxJS。

export const languageTimeZoneEpic = (action$) => {
  return action$.ofType(CHANGE_LANGUAGE)
    .mergeMap(action =>
      Observable.from(client.mutate({
        mutation: languageMutation,
        variables: { id: action.id,  language: action.selected_language }
      }))
        .map(result => changeLanguageFulfilled(result))
        .catch(error => Observable.of(
          changeLanguageError(error)
        ))
        .takeUntil(action$.ofType('END_LANGUAGE'))
    );
};

这有时意味着它更冗长，但主要是关于不使用 Promise 的 catch，因为这会使您的代码在 redux-observable 中非常难以遵循。 “这是 Promise 捕获还是 Observable 捕获？”。当然，这只是我的看法:)

---

我假设 apollo-client 没有办法实际上取消突变，因为真正的 Promise 是不可取消的。从技术上讲，此代码将忽略 Promise 的结果，而不是真正取消它（不可能）。