Using `optimisticResponse` with `cache.modify` in mutation `update` method generates `undefined` `data` property on affected `watchQuery`

Intended outcome: I am attempting to add a newly-created child object to a list property on a parent object using cache.modify in the update method on the create mutation for the child object. The new object appears in the affected watchQuery if an optimisticResponse is not provided, but the data property is undefined if an optimisticResponse is provided.

Triggering Mutation:

…
	public create(mutationVariables: IProcedureCreate_RequestVariables): Observable<FetchResult<IProcedureCreate_ResponseData>> {
		const procedure = new Procedure();
		populate(procedure, mutationVariables);
		procedure._id = mutationVariables.procedureId;

		return this.apollo.mutate<IProcedureCreate_ResponseData>({
			mutation: ProcedureCreate_Mutation,
			variables: mutationVariables,
			update: (apolloClientDataProxy: DataProxy, {data: {ProcedureCreate}}: ApolloQueryResult<IProcedureCreate_ResponseData>): void => {
				const newProcedureReference = this.apollo.client.cache.writeFragment({
					data: ProcedureCreate,
					fragment: gql`fragment ProcedureReference on Procedure {
						_id
					}`
				});
				this.apollo.client.cache.modify({
					id: `${DomainEntityType.ManualSection}:${mutationVariables.manualSectionId}`,
					fields: {
						procedureList(cachedProcedureReferenceList: Reference[]): Reference[] {
							const procedureReferenceList = [...cachedProcedureReferenceList];
							procedureReferenceList.splice(mutationVariables.procedureIndex, 0, newProcedureReference);
							return procedureReferenceList;
						}
					}
				});
			},
			optimisticResponse: {           // No error if omitted
				ProcedureCreate: procedure
			}
		});
	}
…

Affected WatchQuery:

…
this.apollo.watchQuery<IManualSectionRead$ProcedureList_ResponseData, IManualSectionRead$ProcedureList_RequestVariables>({
					query: ManualSectionRead$ProcedureList_Query,
					variables: {manualSectionId: manualSectionId, procedureStatusList: filterQueryParameters.procedureStatusList},
				}).valueChanges.pipe(
			map(({data}: ApolloQueryResult<IManualSectionRead$ProcedureList_ResponseData>) => {
				return data.ManualSectionRead.procedureList;  // `data` is `undefined` if `optimisticResponse` provided
			}),
)
…

Actual outcome: TypeError: Cannot read property 'ManualSectionRead' of undefined is passed to the subscription error handler

How to reproduce the issue: Use optimisticUpdate in conjunction with cache.modify as in excerpted code.

Versions

  System:
    OS: macOS 10.15.6
  Binaries:
    Node: 12.18.3 - ~/.nvm/versions/node/v12.18.3/bin/node
    npm: 6.14.5 - ~/.nvm/versions/node/v12.18.3/bin/npm
  Browsers:
    Chrome: 85.0.4183.102
    Firefox: 77.0
    Safari: 14.0
  npmPackages:
    @apollo/client: 3.2.0 => 3.2.0 
    apollo-angular: 2.0.4 => 2.0.4 
    apollo-server-express: 2.10.1 => 2.10.1 

[phryneas]

After a lot of digging in a similar situation: if that optimistic response is in any way incomplete, the query just gets undefined, without any further logs informing about that.

See https://github.com/apollographql/apollo-client/blob/cbcf951256b22553bdb065dfa0d32c0a4ca804d3/src/core/ObservableQuery.ts#L164-L168

You might get around this by setting returnPartialData: true in the query options. To find out which data is missing, the only way to get that seems to be using the browser devtools to add a logpoint for diff.missing on the line after var diff = ...

[mikevercoelen]

Same problem here