Skip to content
This repository was archived by the owner on Apr 13, 2023. It is now read-only.

Commit cee44b2

Browse files
Glennrshwillson
authored andcommitted
Update lastResult whenever data changes to ensure components re-rende… (#2840)
* Update lastResult whenever data changes to ensure components re-render if result is set back to original lastResult * Add a regression test to verify this is fixed Base on the reproduction provided in #2887. * Changelog update
1 parent e122aae commit cee44b2

File tree

3 files changed

+116
-0
lines changed

3 files changed

+116
-0
lines changed

Changelog.md

+4
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,10 @@
1111
component, after an error was received, variables were adjusted, and then
1212
the good data was fetched. <br/>
1313
[@MerzDaniel](https://github.com/MerzDaniel) in [#2718](https://github.com/apollographql/react-apollo/pull/2718)
14+
- Fixed an issue that prevented `Query` component updates from firing (under
15+
certain circumstances) due to the internal `lastResult` value (that's used
16+
to help prevent unnecessary re-renders) not being updated. <br/>
17+
[@Glennrs](https://github.com/Glennrs) in [#2840](https://github.com/apollographql/react-apollo/pull/2840)
1418

1519
### Improvements
1620

src/Query.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -342,6 +342,9 @@ export default class Query<TData = any, TVariables = OperationVariables> extends
342342
}
343343

344344
initial = undefined;
345+
if (this.lastResult) {
346+
this.lastResult = this.queryObservable!.getLastResult();
347+
}
345348
this.updateCurrentData();
346349
},
347350
error: error => {

test/client/Query.test.tsx

+109
Original file line numberDiff line numberDiff line change
@@ -1232,6 +1232,115 @@ describe('Query component', () => {
12321232
</MockedProvider>,
12331233
);
12341234
});
1235+
1236+
it(
1237+
'should update if a manual `refetch` is triggered after a state change',
1238+
done => {
1239+
const query: DocumentNode = gql`
1240+
query {
1241+
allPeople {
1242+
people {
1243+
name
1244+
}
1245+
}
1246+
}
1247+
`;
1248+
1249+
const data1 = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
1250+
1251+
const link = mockSingleLink(
1252+
{
1253+
request: { query },
1254+
result: { data: data1 },
1255+
},
1256+
{
1257+
request: { query },
1258+
result: { data: data1 },
1259+
},
1260+
{
1261+
request: { query },
1262+
result: { data: data1 },
1263+
},
1264+
);
1265+
1266+
const client = new ApolloClient({
1267+
link,
1268+
cache: new Cache({ addTypename: false }),
1269+
});
1270+
1271+
let count = 0;
1272+
1273+
class SomeComponent extends React.Component {
1274+
constructor(props: any) {
1275+
super(props);
1276+
this.state = {
1277+
open: false,
1278+
};
1279+
this.toggle = this.toggle.bind(this);
1280+
}
1281+
1282+
toggle() {
1283+
this.setState((prevState: any) => ({
1284+
open: !prevState.open,
1285+
}));
1286+
}
1287+
1288+
render() {
1289+
const { open } = this.state as any;
1290+
return (
1291+
<Query client={client} query={query} notifyOnNetworkStatusChange>
1292+
{(props: any) => {
1293+
try {
1294+
switch (count) {
1295+
case 0:
1296+
// Loading first response
1297+
expect(props.loading).toBe(true);
1298+
expect(open).toBe(false);
1299+
break;
1300+
case 1:
1301+
// First response loaded, change state value
1302+
expect(stripSymbols(props.data)).toEqual(data1);
1303+
expect(open).toBe(false);
1304+
setTimeout(() => {
1305+
this.toggle();
1306+
}, 0);
1307+
break;
1308+
case 2:
1309+
// State value changed, fire a refetch
1310+
expect(open).toBe(true);
1311+
setTimeout(() => {
1312+
props.refetch();
1313+
}, 0);
1314+
break;
1315+
case 3:
1316+
// Second response received, fire another refetch
1317+
expect(stripSymbols(props.data)).toEqual(data1);
1318+
setTimeout(() => {
1319+
props.refetch();
1320+
}, 0);
1321+
break;
1322+
case 4:
1323+
// Third response received
1324+
expect(stripSymbols(props.data)).toEqual(data1);
1325+
done();
1326+
break;
1327+
default:
1328+
done.fail('Unknown count');
1329+
}
1330+
count += 1;
1331+
} catch (error) {
1332+
done.fail(error);
1333+
}
1334+
return null;
1335+
}}
1336+
</Query>
1337+
);
1338+
}
1339+
}
1340+
1341+
wrapper = mount(<SomeComponent />);
1342+
}
1343+
);
12351344
});
12361345

12371346
it('should error if the query changes type to a subscription', done => {

0 commit comments

Comments
 (0)