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}
`;
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)
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 usingimport AWSAppSyncClient from 'aws-appsync';
Here's my code:
What is the expected behavior? That
data.getSurveyResponse
is not null after the response from the serverWhich 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)
Unknown if it works in other versions