如果在Query组件内部，为什么Mutation onCompleted不会触发？

Question

我希望有一个查询，如果查询没有返回任何项目，则会在内部创建项目进行变异查询：

    <Query
      query={GET_SEQUENCE} variables={{ id: sequenceId }}>
      {({ loading, error, data: { sequence }, refetch }) => {
        if (loading) return 'Loading...';
        if (error) return `Error: ${error}`;
        return (
          <div>
            {
              sequence.items.length===0
                ? <Mutation
                      mutation={ CREATE_ITEM }
                      onCompleted={ createItemOpts.onCompleted }>
                      {(createItem) => {
                        const update = () => {
                          createItem(
                            {
                             // some options here
                            }
                          )
                        }
                        return (<button onClick={ () => update() }>Create item</button>)
                      }}
                    </Mutation>
                : this.getItemElements(sequence.items)
            }
          </div>
        );
      }}
    </Query>

否则代码可以工作，但根本不会触发onCompleted回调。如果我将变异组件移到查询之外，则会触发onCompleted。

为什么查询组件内部的包装会阻止onCompleted函数被触发？