Question

我有graphql查询，如下所示：

<Query query={GET_COMPANY_ADDRESSES} variables={{companyId: session.company.id}} notifyOnNetworkStatusChange={true} fetchPolicy={'cache-and-network'}>
    {({loading, error, refetch, data}) => {
        if (loading) return <LoadingIndicator/>;
        if (error) return <ErrorIndicator description={error.message}/>;

        const address = data.companyAddresses[1];

        return (
            <React.Fragment>
                <CollapsiblePanel title="Add slot">
                    <SlotForm address={address} toggleSlotForm={this.toggleSlotForm.bind(this)} refetch={refetch}/>
                </CollapsiblePanel>

            </React.Fragment>

        )
    }}
</Query>

我在初始加载中显示了loading indicator。工作正常。但是我在<SlotForm />组件中有表单，可以在其中向数据库添加记录。表单的提交功能如下：

handleSaveSlot({address}, data) {
        const slot = {
            ...data,
            address: address.id
        };

        return client.mutate({
            variables: {input: slot},
            mutation: ADD_NEW_SLOT,
        })
            .then(result => {
                if (result.data.createSlot.ok) {

                    this.props.refetch();
                    this.setState({hasError: false, errorMessage: "", saved: true, slot: initialSlot()}, () => {
                        setTimeout(() => this.props.toggleSlotForm(false), 3000)
                    });
                }
            })
            .catch(error => {
                let error_msg = error.message.replace("GraphQL error: ", '');
                this.setState({hasError: true, saved: false, errorMessage: error_msg});
                throw(error_msg);
            });
}

在.then中响应后，我正在用this.props.refetch();重新获取数据。但是，当执行refetch时，在屏幕上更新数据之前，我会再次获得加载指示器。

我想避免这种情况，并且我不想在每次添加新记录时都显示loading indicator。我只想在初始加载时显示它。

每次我重新获取数据时，我都希望在“后台”执行该操作而不显示加载指示符。

有什么想法吗？

Answer 1

这样更改条件就足够了：

if (loading && !data.companyAddresses) {
  return <LoadingIndicator/>;
}

data.companyAddresses在初始查询完成之前将是未定义的，但即使您触发重新提取也应定义。

如果可能，您还应该考虑将update组件与Mutation选项一起使用，而不是重新获取查询。突变后手动更新缓存通常比重新获取要好，因为它更快并且可以减少网络负载。有关更多详细信息，请参见the docs。

仅在graphql查询

1 个答案: