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

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 }

我不想在这些地方显示 "Loading..." 或旋转的微调器。有没有办法通过在加载期间将所有 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在加载时全局插入空字符串？

Is there a way to let Apollo Client globally insert empty strings during loading?

graphql

apollo

react-apollo

apollo-client