Мутация компонента не синхронизируется с магазином после обновления

Question

Этот фрагмент выглядит длинным, но на самом деле он прост;он создает узел и отображает его данные, а затем обновляет узел и отображает обновленные данные, но данные из создания не обновляются, даже если проверка хранилища напрямую показывает, что хранилище для запроса createFoo обновлено,Я хотел бы понять, как обеспечить актуальность компонентов, использующих данные из хранилища клиента Apollo, предпочтительно автоматически.

const CREATE_FOO = gql`
  mutation {
    createFoo(data: {}) {
      id
      bar
    }
  }
`;

const UPDATE_FOO = gql`
  mutation($id: ID!) {
    updateFoo(where: { id: $id }, data: { bar: "baz" }) {
      id
      bar
    }
  }
`;

<Mutation mutation={CREATE_FOO}>
  {(createFoo, { data: createData }) => {
    if (createData) {
      return (
        <div>
          <p>{JSON.stringify(createData.createFoo)}</p>
          <Mutation
            mutation={UPDATE_FOO}
            variables={{ id: createData.createFoo.id }}
          >
            {(updateFoo, { data: updateData }) => {
              if (updateData) {
                return <p>{JSON.stringify(updateData.updateFoo)}</p>;
              }
              return (
                <button onClick={updateFoo} type="button">
                  updateFoo
                </button>
              );
            }}
          </Mutation>
        </div>
      );
    }
    return (
      <button onClick={createFoo} type="button">
        createFoo
      </button>
    );
  }}
</Mutation>

Модель данных:

type Foo {
  id: ID! @unique
  bar: String
}

Хранить данные:

{
  "ROOT_QUERY": {
    "userSidebarWidth": 200
  },
  "Foo:cjqd2cd41zi140a98ugrjpz2m": {
    "id": "cjqd2cd41zi140a98ugrjpz2m",
    "bar": "baz",
    "__typename": "Foo"
  },
  "ROOT_MUTATION": {
    "createFoo({\"data\":{}})": {
      "type": "id",
      "generated": false,
      "id": "Foo:cjqd2cd41zi140a98ugrjpz2m",
      "typename": "Foo"
    },
    "updateFoo({\"data\":{\"bar\":\"baz\"},\"where\":{\"id\":\"cjqd2cd41zi140a98ugrjpz2m\"}})": {
      "type": "id",
      "generated": false,
      "id": "Foo:cjqd2cd41zi140a98ugrjpz2m",
      "typename": "Foo"
    }
  }
}

Answer 1

Предположим, у вас есть компонент Query, подобный следующему:

const GET_FOO = gql`
  query SomeQuery {
    getFoo {
      id
      bar
    }
  }
`;

<Query query={GET_FOO}>
  {({ loading, error, data }) => (
    <SomeComponent/>
  )}
</Query>

Когда компонент монтируется, Apollo извлекает данные с сервера или из кэша (в зависимости от того, кэшируются ли эти данные и каков вашполитика извлечения есть).Однако он также подписывается на изменения в кэше.Поэтому, если вы получили Foo с идентификатором 1 и он обновился в кеше с помощью другой операции, компонент будет уведомлен о них и обновится соответствующим образом.В частности, значение data, переданное функции поддержки рендеринга, будет изменено, чтобы отразить изменение в кэше.

Компонент Mutation имеет сигнатуру функции поддержки рендеринга, аналогичную компоненту Query, включаяdata свойство.Однако это свойство отражает только данные, возвращаемые при вызове функции mutate.В то время как результаты мутации хранятся в кэше, data, предоставляемый через компонент Mutation, не является результатом подписки на кэш - скорее это просто удобный способ реагировать на результаты mutate звонок.Единственный раз, когда data внутри компонента Mutation потенциально изменится, это если снова вызвать функцию mutate.

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