Apollo客户端变异错误和更新组件

时间:2018-03-25 21:50:56

标签: reactjs react-native graphql react-apollo apollo-client

我有以下代码,我正在尝试决定如何处理错误:

function whoWonGame(){

const winnerSection = ['row1', 'row2', 'row3','column1', 'column2', 'column3', 'dag1', 'dag2' ];
let winner = null;
winnerSection.each((section) => {

  let match = true;

  for(let i = 1; i <= 2; i++ ){

   $(`${section}`).each((div) => {

      if(div.hasClass(`player${i}`)){

          match = false;
      }
    })

    if(match){

      winner = `player${i}`;

    }

    return winner;
  }


})

}

服务器发送回GraphQL错误对象并将其发回,以便它出现在突变的const gqlWrapper = graphql(registerMutation, { props: ({ mutate, ownProps }) => ({ registerUser: userDetails => { mutate({ variables: { ...userDetails }, update: (proxy, resp) => { // perform update to local state based on success } }).catch(err => { console.log(err); // how to update components from here? }); } }) }); export default gqlWrapper(Register); 块中。如果变异成功,则使用catch()参数更新组件的数据,但我看不到处理错误的等效方法。

理想情况下,我想更新proxy块中的Apollo缓存,但是我甚至无法在此时向组件或状态注入道具。

最终结果是在Register组件上设置prop / state,它显示带有条件呈现的错误消息组件。一种方法是处理registerUser变异起源的错误:

catch

但是我觉得这会增加UI的大量,我宁愿在页面底部和突变功能一起使用。有什么方法可以解决这个问题,还是我错过了一些明显的东西?

谢谢!

1 个答案:

答案 0 :(得分:0)

您最好的选择是在您的Apollo客户端使用https://www.npmjs.com/package/apollo-link-error之类的东西。这将允许您处理错误并根据这些错误应用您需要的任何自定义逻辑。它应该允许您将.catch保留在组件之外。实际上,这个模块在Apollo的documentation

中被推荐