Graphql 有没有办法让Apollo客户端在加载期间全局插入空字符串？

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

假设查询如下所示：

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

然后，在每个我想显示用户名的地方，我都必须写下如下内容：

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

或

我不想在这些地方显示“加载…”或旋转微调器。在加载过程中，是否有方法通过全局替换所有

this.props.data.x.y.z

值以

null

或空字符串来避免此条件语句

• 如果是，怎么做？这会被认为是反模式的还是不好的做法
• 如果不是，则首选上述两种形式中的哪一种

---

谢谢。

这种方法怎么样

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
    }
}

---

这种方法怎么样

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
    }
}

---

我想你把

renderError（）

和

renderLoading（）

搞混了；除此之外，这可能有效！谢谢。@Bart谢谢你！修正了。我想你把

renderError（）

和

renderLoading（）搞混了；除此之外，这可能有效！谢谢。@Bart谢谢你！固定的。