代码之家 › 专栏 › 技术社区 › 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中被观察到。“这是承诺捕获还是可观察捕获?”。当然,这只是我的观点:)

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

推荐文章

Norbert Pushparaj Yuvaraj · Apollo查询组件返回结果后调度redux操作

7 年前

Jordan Hensley · 从React Apollo组件内部设置mobX状态

7 年前

jkdowdle · 阿波罗反应:阿波罗缓存持久化似乎不起作用

7 年前

Taylor Austin · 如何在apollo/graphql/react中的refetchQuery期间将Id传递给组件中未调用的查询

7 年前

pellea · 使用react apollo,如何使用TypeScript在同一组件中定义2个突变?

7 年前

chacham15 · 如何在React Apollo中向图形对象添加计算状态?

7 年前

Ian Likono · 将aws appsync与nextjs连接

7 年前

Soren · 如何处理apollo链接状态中的嵌套状态(类似于Redux的CombineReducer)

7 年前

user3142695 · ReactJS/JestJS/Enzyme:如何测试compose()中使用的graphql()函数?

7 年前

Smek · 如何在Reactjs中使用Apollo客户端创建更新表单

7 年前