Question

我正在使用Apollo Client接收我的应用程序的GraphQL数据。随着时间的推移，我看到一个模式正在出现，对于我查询的每个值，我必须包含一个条件语句来处理我的数据仍在加载的时刻。

假设查询如下所示：

query TestQuery($userId: Int!) {
  getUser(id: $userId) {
    name
  }
}

然后，在我想要显示用户名的每个地方，我都要编写类似的内容：

{ !this.props.data.loading && this.props.data.getUser.name }

或

{ this.props.data.getUser && this.props.data.getUser.name }

我不想显示＆＃34;正在加载......＆＃34;或在任何这些地方旋转的旋转器。有没有办法通过在加载期间全局替换所有this.props.data.x.y.z值null或空字符串来避免此条件语句？

如果是这样，怎么样？这会被视为反模式或不良做法吗？
如果没有，上述两种表格中哪一种更受欢迎？

感谢。

Answer 1

这种做法怎么样？

class GraphqlComponent extends React.Component {
    renderError(){
        // ...
    }

    renderLoading(){
        // ...
    }

    renderLoaded(){

    }

    render(){
        const { loading, error } = this.props;
        if(error){
            return renderError();
        }
        if(loading){
            return renderLoading();
        }
        return renderLoaded();
    }
}

class MyComponent extends GraphqlComponent{
    renderLoaded(){
        // your logic goes here
    }
}

有没有办法让Apollo Client在加载过程中全局插入空字符串？

1 个答案: