Skip to content

Commit c5c19ba

Browse files
benjamnbenjamn
committed
Restore useSyncExternalStore changes from PR #8785.
This reverts commit c6ab364, as promised in PR #9393, fully restoring @brainkim's useSyncExternalStore changes from PR #8785.
1 parent 76c3fe3 commit c5c19ba

24 files changed

+323
-313
lines changed

‎package-lock.json

Lines changed: 36 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,8 +65,9 @@
6565
"peerDependencies": {
6666
"graphql": "^14.0.0 || ^15.0.0 || ^16.0.0",
6767
"graphql-ws": "^5.5.5",
68-
"react": "^16.8.0 || ^17.0.0",
69-
"subscriptions-transport-ws": "^0.9.0 || ^0.11.0"
68+
"react": "^16.8.0 || ^17.0.0 || ^18.0.0-beta",
69+
"subscriptions-transport-ws": "^0.9.0 || ^0.11.0",
70+
"use-sync-external-store": "^1.0.0 || ^1.0.0-rc || ^1.0.0-beta"
7071
},
7172
"peerDependenciesMeta": {
7273
"graphql-ws": {
@@ -77,6 +78,9 @@
7778
},
7879
"subscriptions-transport-ws": {
7980
"optional": true
81+
},
82+
"use-sync-external-store": {
83+
"optional": true
8084
}
8185
},
8286
"dependencies": {
@@ -108,6 +112,7 @@
108112
"@types/node": "16.11.21",
109113
"@types/react": "17.0.34",
110114
"@types/react-dom": "17.0.2",
115+
"@types/use-sync-external-store": "^0.0.3",
111116
"acorn": "8.6.0",
112117
"bundlesize": "0.18.1",
113118
"cross-fetch": "3.1.5",
@@ -133,6 +138,7 @@
133138
"ts-jest": "27.1.3",
134139
"ts-node": "10.4.0",
135140
"typescript": "4.5.2",
141+
"use-sync-external-store": "1.0.0-rc.0",
136142
"wait-for-observables": "1.0.3",
137143
"whatwg-fetch": "3.6.2"
138144
},

‎src/react/components/__tests__/client/Mutation.test.tsx

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1021,7 +1021,11 @@ describe('General Mutation testing', () => {
10211021
return (
10221022
<Mutation mutation={mutation} refetchQueries={refetchQueries}>
10231023
{(createTodo: any, resultMutation: any) => (
1024-
<Query query={query} variables={variables}>
1024+
<Query
1025+
query={query}
1026+
variables={variables}
1027+
notifyOnNetworkStatusChange={true}
1028+
>
10251029
{(resultQuery: any) => {
10261030
try {
10271031
if (count === 0) {
@@ -1047,13 +1051,16 @@ describe('General Mutation testing', () => {
10471051
// mutation loading
10481052
expect(resultMutation.loading).toBe(true);
10491053
} else if (count === 6) {
1050-
// mutation loaded
1051-
expect(resultMutation.loading).toBe(false);
1054+
// mutation still loading???
1055+
expect(resultMutation.loading).toBe(true);
10521056
} else if (count === 7) {
1057+
expect(resultQuery.loading).toBe(true);
1058+
expect(resultMutation.loading).toBe(false);
1059+
} else if (count === 8) {
10531060
// query refetched
1061+
expect(resultQuery.data).toEqual(peopleData3);
10541062
expect(resultQuery.loading).toBe(false);
10551063
expect(resultMutation.loading).toBe(false);
1056-
expect(resultQuery.data).toEqual(peopleData3);
10571064
}
10581065
count++;
10591066
} catch (err) {
@@ -1074,7 +1081,7 @@ describe('General Mutation testing', () => {
10741081
);
10751082

10761083
waitFor(() => {
1077-
expect(count).toEqual(8);
1084+
expect(count).toBe(9);
10781085
}).then(resolve, reject);
10791086
}));
10801087

‎src/react/components/__tests__/client/Query.test.tsx

Lines changed: 37 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1229,7 +1229,11 @@ describe('Query component', () => {
12291229
const { variables } = this.state;
12301230

12311231
return (
1232-
<AllPeopleQuery query={query} variables={variables}>
1232+
<AllPeopleQuery
1233+
query={query}
1234+
variables={variables}
1235+
notifyOnNetworkStatusChange={true}
1236+
>
12331237
{(result: any) => {
12341238
try {
12351239
switch (count) {
@@ -1717,35 +1721,40 @@ describe('Query component', () => {
17171721
<AllPeopleQuery
17181722
query={query}
17191723
variables={variables}
1724+
notifyOnNetworkStatusChange={true}
17201725
onCompleted={this.onCompleted}
17211726
>
17221727
{({ loading, data }: any) => {
1723-
switch (renderCount) {
1724-
case 0:
1725-
expect(loading).toBe(true);
1726-
break;
1727-
case 1:
1728-
case 2:
1729-
expect(loading).toBe(false);
1730-
expect(data).toEqual(data1);
1731-
break;
1732-
case 3:
1733-
expect(loading).toBe(true);
1734-
break;
1735-
case 4:
1736-
expect(loading).toBe(false);
1737-
expect(data).toEqual(data2);
1738-
setTimeout(() => {
1739-
this.setState({ variables: { first: 1 } });
1740-
});
1741-
case 5:
1742-
expect(loading).toBe(false);
1743-
expect(data).toEqual(data2);
1744-
break;
1745-
case 6:
1746-
expect(loading).toBe(false);
1747-
expect(data).toEqual(data1);
1748-
break;
1728+
try {
1729+
switch (renderCount) {
1730+
case 0:
1731+
expect(loading).toBe(true);
1732+
break;
1733+
case 1:
1734+
case 2:
1735+
expect(loading).toBe(false);
1736+
expect(data).toEqual(data1);
1737+
break;
1738+
case 3:
1739+
expect(loading).toBe(true);
1740+
break;
1741+
case 4:
1742+
expect(loading).toBe(false);
1743+
expect(data).toEqual(data2);
1744+
setTimeout(() => {
1745+
this.setState({ variables: { first: 1 } });
1746+
});
1747+
case 5:
1748+
expect(loading).toBe(false);
1749+
expect(data).toEqual(data2);
1750+
break;
1751+
case 6:
1752+
expect(loading).toBe(false);
1753+
expect(data).toEqual(data1);
1754+
break;
1755+
}
1756+
} catch (err) {
1757+
reject(err);
17491758
}
17501759
renderCount += 1;
17511760
return null;
@@ -1762,6 +1771,7 @@ describe('Query component', () => {
17621771
);
17631772

17641773
waitFor(() => {
1774+
expect(renderCount).toBe(7);
17651775
expect(onCompletedCallCount).toBe(3);
17661776
}).then(resolve, reject);
17671777
});

‎src/react/components/__tests__/ssr/getDataFromTree.test.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/** @jest-environment node */
12
import React from 'react';
23
import gql from 'graphql-tag';
34
import { DocumentNode } from 'graphql';

‎src/react/components/__tests__/ssr/server.test.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/** @jest-environment node */
12
import React from 'react';
23
import {
34
print,

‎src/react/hoc/__tests__/queries/errors.test.tsx

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -216,7 +216,10 @@ describe('[queries] errors', () => {
216216
let iteration = 0;
217217
let done = false;
218218
const ErrorContainer = withState('var', 'setVar', 1)(
219-
graphql<Props, Data, Vars>(query)(
219+
graphql<Props, Data, Vars>(
220+
query,
221+
{ options: { notifyOnNetworkStatusChange: true }},
222+
)(
220223
class extends React.Component<ChildProps<Props, Data, Vars>> {
221224
componentDidUpdate() {
222225
const { props } = this;
@@ -234,7 +237,7 @@ describe('[queries] errors', () => {
234237
);
235238
} else if (iteration === 3) {
236239
// variables have changed, wee are loading again but also have data
237-
expect(props.data!.loading).toBeTruthy();
240+
expect(props.data!.loading).toBe(true);
238241
} else if (iteration === 4) {
239242
// the second request had an error!
240243
expect(props.data!.error).toBeTruthy();
@@ -256,8 +259,8 @@ describe('[queries] errors', () => {
256259
render() {
257260
return null;
258261
}
259-
}
260-
)
262+
},
263+
),
261264
);
262265

263266
render(
@@ -470,9 +473,11 @@ describe('[queries] errors', () => {
470473
});
471474
break;
472475
case 3:
476+
// Second render was added by useSyncExternalStore changes...
477+
case 4:
473478
expect(props.data!.loading).toBeTruthy();
474479
break;
475-
case 4:
480+
case 5:
476481
expect(props.data!.loading).toBeFalsy();
477482
expect(props.data!.error).toBeFalsy();
478483
expect(props.data!.allPeople).toEqual(
@@ -499,7 +504,7 @@ describe('[queries] errors', () => {
499504
</ApolloProvider>
500505
);
501506

502-
waitFor(() => expect(count).toBe(5)).then(resolve, reject);
507+
waitFor(() => expect(count).toBe(6)).then(resolve, reject);
503508
});
504509

505510
itAsync('does not throw/console.err an error after a component that received a network error is unmounted', (resolve, reject) => {

0 commit comments

Comments
 (0)