Доступ к логической загрузке Apollo вне компонента Mutation - PullRequest
Новая
       18

Доступ к логической загрузке Apollo вне компонента Mutation

1 голос
/ 29 мая 2019

Компонент Mutation в react-apollo предоставляет удобное логическое значение loading в функции рендеринга, которое идеально подходит для добавления загрузчиков в пользовательский интерфейс во время выполнения запроса.В приведенном ниже примере мой компонент Button при нажатии вызывает функцию createPlan, которая инициирует мутацию GraphQL.Пока это происходит, на кнопке появляется loading prop. 

<Mutation mutation={CREATE_PLAN}>
  {(createPlan, { loading }) => (
    <Button
      onClick={() => createPlan({ variables: { input: {} } })}
      loading={loading}
    >
      Save
    </Button>
  )}
</Mutation>

. У меня проблема в том, что другие аспекты моего пользовательского интерфейса также должны изменяться в зависимости от этого loading логического значения.Я попытался поднять компонент Mutation вверх по дереву React, чтобы я мог вручную передать реквизит loading всем компонентам, которые на него полагаются, что работает, но на странице, которую я создаю, есть несколько мутаций, которые могут иметь место прив любой момент времени (например, удаление плана, добавление одного элемента в план, удаление одного элемента в плане и т. д.) и наличие всех этих Mutation компонентов, находящихся на компоненте уровня страницы, выглядит очень грязно.

Есть ли способ получить доступ к свойству loading вне этого Mutation компонента?Если нет, то как лучше всего решить эту проблему?Я читал, что вы можете вручную обновить локальное состояние Apollo, используя функцию update для компонента Mutation (см. Пример ниже), но я не смог понять, как получить доступ к loadingзначение здесь (плюс это похоже на то, что доступ к свойству loading определенной мутации без необходимости вручную записывать его в кеш - это обычный запрос). 

<Mutation
  mutation={CREATE_PLAN}
  update={cache => {
    cache.writeData({
      data: {
        createPlanLoading: `I DON"T HAVE ACCESS TO THE LOADING BOOLEAN HERE`,
      },
    });
  }}
>
  {(createPlan, { loading }) => (
    <Button
      onClick={() => createPlan({ variables: { input: {} } })}
      loading={loading}
    >
      Save
    </Button>
  )}
</Mutation>

1 Ответ

1 голос
/ 29 мая 2019

Я сталкиваюсь с той же проблемой в своих проектах, и да, размещение всех компонентов мутаций на уровне страницы очень грязно.Лучший способ справиться с этим - создать состояния React.Например: 

const [createPlanLoading, setCreatePLanLoading] = React.useState(false);

...

<Mutation mutation={CREATE_PLAN} onCompleted={() => setCreatePLanLoading(false)}>
  {(createPlan, { loading }) => (
    <Button
      onClick={() => {
        createPlan({ variables: { input: {} } });
        setCreatePLanLoading(true);
      }
      loading={loading}
    >
      Save
    </Button>
  )}
</Mutation>
...