代码之家 › 专栏 › 技术社区 › petithomme

将RxJs takeUntil()函数用于apollo客户端

apollo-client redux-observable react-apollo reactjs

petithomme · 技术社区 · 7 年前

我正在使用Apollo客户端对GraphQL服务器进行查询和转换。因为Apollo有自己的错误处理,所以实现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() 函数就像下面的例子一样,我的函数根本不起作用了。

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()。

1 回复 | 直到 7 年前

jayphelps 7 年前

takeUntil 不接受字符串作为其参数。相反,它期望一个它将订阅的可观察值,使用第一个下一个值作为信号。

除了对于 ofType 这是redux observable提供的唯一一个操作符——其余的是RxJS内置。

takeUntil公司 mergeMap 在…内 这个 ,既然我们正在处理一个承诺,我们需要使用 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'))
    );
};

然而,使用承诺 then 和 catch

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的因为这会使你的代码很难在redux中被观察到。“这是承诺捕获还是可观察捕获?”。当然,这只是我的观点:)

我以为阿波罗的客户没有办法 事实上