Query is empty after 2nd mutation update with optimisticResponse

[roballsopp]

Do you want to request a feature or report a bug?
Report a bug

I'm trying to implement an optimistic response and cache update for one of my queries in my react native app so I can support offline use, but I'm running into an issue when using this workflow while the device still has service. I can see my mutation updater fire twice, as expected. The first time it fires it puts the optimistic response into the cache and the query component with the query I am updating re-renders correctly, as far as I can tell. The second time the updater fires (to update the cache with the actual server response) the part of the query I am updating comes out of the query component as null even though I have observed inside my updater the response from the server is identical to my optimistic response. I even find the query correctly after the update by querying the cache for it again inside the updater (see below).

This issue does not occur when I use import { ApolloClient } from 'apollo-client'; (I didn't install a different version, its the 2.4.6 version brought in by appsync). It only occurs when using import AWSAppSyncClient from 'aws-appsync';

Here's my code:

// SurveyQueryContainer.js
import React from 'react';
import PropTypes from 'prop-types';
import { Query } from 'react-apollo';
import SurveyNavigator from './SurveyNavigator';
import { SurveyQueryContainerQuery } from './graphql/SurveyQueryContainer';

export default function SurveyQueryContainer({ route, navigation }) {
	const { surveyTemplateId, surveyResponseId } = route.params;

	return (
		<Query
			variables={{ surveyTemplateId, surveyResponseId }}
			query={SurveyQueryContainerQuery}>
			{({ loading, error, data, refetch }) => {
                                // data.getSurveyResponse is null after the 2nd mutation updater call
				return <SurveyNavigator surveyTemplate={data.getSurveyTemplate} surveyResponse={data.getSurveyResponse} />;
			}}
		</Query>
	);
}

// SurveyQueryContainer.js
import gql from 'graphql-tag';
import { SurveyNavigatorFragments } from '../SurveyNavigator';

export const surveyTemplateFragment = gql`
	fragment SurveyQueryContainer_surveyTemplate on SurveyTemplate {
		id
		name
		...SurveyNavigator_surveyTemplate
	}
	${SurveyNavigatorFragments.surveyTemplate}
`;

export const surveyResponseFragment = gql`
	fragment SurveyQueryContainer_surveyResponse on SurveyResponse {
		id
		...SurveyNavigator_surveyResponse
	}
	${SurveyNavigatorFragments.surveyResponse}
`;

export const SurveyQueryContainerQuery = gql`
	query SurveyQueryContainerQuery($surveyTemplateId: ID!, $surveyResponseId: ID!) {
		getSurveyTemplate(id: $surveyTemplateId) {
			...SurveyQueryContainer_surveyTemplate
		}
		getSurveyResponse(id: $surveyResponseId) {
			...SurveyQueryContainer_surveyResponse
		}
	}
	${surveyTemplateFragment}
	${surveyResponseFragment}
`;

// The mutation config
import gql from 'graphql-tag';
import * as SurveyQueryContainerGql from '../../Survey/graphql/SurveyQueryContainer';

export const createSurveyResponseMutation = gql`
	mutation createSurveyResponse($input: CreateSurveyResponseInput!) {
		createSurveyResponse(input: $input) {
			id
			surveyTemplateId
			...SurveyQueryContainer_surveyResponse
		}
	}
	${SurveyQueryContainerGql.surveyResponseFragment}
`;

export const getCreateSurveyResponseMutationConfig = ({ variables }) => ({
	mutation: createSurveyResponseMutation,
	variables,
	optimisticResponse: {
		createSurveyResponse: {
			...variables.input,
			__typename: 'SurveyResponse',
			questionResponses: { __typename: 'ModelQuestionResponseConnection', items: [] },
		},
	},
	update: (store, { data: { createSurveyResponse } }) => {
                // createSurveyResponse looks exactly as I expect during BOTH updates
		let getSurveyTemplate;
		try {
			getSurveyTemplate = store.readFragment({
				id: `SurveyTemplate:${createSurveyResponse.surveyTemplateId}`,
				fragment: SurveyQueryContainerGql.surveyTemplateFragment,
				fragmentName: 'SurveyQueryContainer_surveyTemplate',
			});
		} catch (e) {
			console.warn("Could not read survey template from store", e);
		}

		store.writeQuery({
			query: SurveyQueryContainerGql.SurveyQueryContainerQuery,
			variables: {
				surveyTemplateId: createSurveyResponse.surveyTemplateId,
				surveyResponseId: createSurveyResponse.id,
			},
			data: {
				getSurveyTemplate,
				getSurveyResponse: createSurveyResponse,
			},
		});

		// const result = store.readQuery({
		// 	query: SurveyQueryContainerGql.SurveyQueryContainerQuery,
		// 	variables: {
		// 		surveyTemplateId: createSurveyResponse.surveyTemplateId,
		// 		surveyResponseId: createSurveyResponse.id,
		// 	},
		// });
		//
		// console.log('ITS ALWAYS CORRECT HERE!', result.getSurveyResponse);
	},
});

What is the expected behavior?
That data.getSurveyResponse is not null after the response from the server

Which versions and which environment (browser, react-native, nodejs) / OS are affected by this issue? Did this work in previous versions?
React Native + Expo (iOS and Android)

// package.json
{
    ...
    "aws-amplify": "^3.0.10",
    "aws-appsync": "^3.0.3",
    "aws-appsync-react": "^3.0.3",
    ...
    "expo": "^36.0.0",
    ...
    "react": "~16.8.3",
    "react-apollo": "~2.4.1",
    "react-native": "~0.61.0",
    ...
}

Unknown if it works in other versions