У меня есть запрос 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();. Но когда выполняется повторная выборка, я снова получаю индикатор загрузки до того, как данные будут обновлены на экране.
Я хочу этого избежать и не хочу показывать loading indicator каждый раз, когда добавляю новую запись. Я просто хочу показать это при начальной загрузке.
Каждый раз, когда я обновляю данные, я хочу сделать это «в фоновом режиме», не показывая индикатор загрузки.
Любая идея, как это сделать?





Должно быть достаточно изменить ваше условие следующим образом:
if (loading && !data.companyAddresses) {
return <LoadingIndicator/>;
}
data.companyAddresses будет неопределенным, пока ваш первоначальный запрос не будет завершен, но должен быть определен, даже когда вы запускаете повторную загрузку.
Если возможно, вам также следует рассмотреть возможность использования параметра update с вашим компонентом Mutation вместо повторной загрузки запроса. Обновление кеша вручную после мутации, как правило, лучше, чем повторная загрузка, поскольку это быстрее и снижает нагрузку на сеть. Дополнительные сведения см. в статье документы.