Отображение индикатора загрузки только при начальной загрузке в запросе graphql

У меня есть запрос 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 каждый раз, когда добавляю новую запись. Я просто хочу показать это при начальной загрузке.

Каждый раз, когда я обновляю данные, я хочу сделать это «в фоновом режиме», не показывая индикатор загрузки.

Любая идея, как это сделать?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
1 016
1

Ответы 1

Должно быть достаточно изменить ваше условие следующим образом:

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

data.companyAddresses будет неопределенным, пока ваш первоначальный запрос не будет завершен, но должен быть определен, даже когда вы запускаете повторную загрузку.

Если возможно, вам также следует рассмотреть возможность использования параметра update с вашим компонентом Mutation вместо повторной загрузки запроса. Обновление кеша вручную после мутации, как правило, лучше, чем повторная загрузка, поскольку это быстрее и снижает нагрузку на сеть. Дополнительные сведения см. в статье документы.

Другие вопросы по теме