Restore useSyncExternalStore changes from PR #8785.

This reverts commit c6ab364, as promised in PR #9393, fully restoring @brainkim's useSyncExternalStore changes from PR #8785.
apollographql · Feb 4, 2022 · c5c19ba · c5c19ba
1 parent 76c3fe3
commit c5c19ba
Show file tree

Hide file tree

Showing 24 changed files with 323 additions and 313 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -65,8 +65,9 @@
   "peerDependencies": {
     "graphql": "^14.0.0 || ^15.0.0 || ^16.0.0",
     "graphql-ws": "^5.5.5",
-    "react": "^16.8.0 || ^17.0.0",
-    "subscriptions-transport-ws": "^0.9.0 || ^0.11.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0-beta",
+    "subscriptions-transport-ws": "^0.9.0 || ^0.11.0",
+    "use-sync-external-store": "^1.0.0 || ^1.0.0-rc || ^1.0.0-beta"
   },
   "peerDependenciesMeta": {
     "graphql-ws": {
@@ -77,6 +78,9 @@
     },
     "subscriptions-transport-ws": {
       "optional": true
+    },
+    "use-sync-external-store": {
+      "optional": true
     }
   },
   "dependencies": {
@@ -108,6 +112,7 @@
     "@types/node": "16.11.21",
     "@types/react": "17.0.34",
     "@types/react-dom": "17.0.2",
+    "@types/use-sync-external-store": "^0.0.3",
     "acorn": "8.6.0",
     "bundlesize": "0.18.1",
     "cross-fetch": "3.1.5",
@@ -133,6 +138,7 @@
     "ts-jest": "27.1.3",
     "ts-node": "10.4.0",
     "typescript": "4.5.2",
+    "use-sync-external-store": "1.0.0-rc.0",
     "wait-for-observables": "1.0.3",
     "whatwg-fetch": "3.6.2"
   },

diff --git a/src/react/components/__tests__/client/Mutation.test.tsx b/src/react/components/__tests__/client/Mutation.test.tsx
@@ -1021,7 +1021,11 @@ describe('General Mutation testing', () => {
       return (
         <Mutation mutation={mutation} refetchQueries={refetchQueries}>
           {(createTodo: any, resultMutation: any) => (
-            <Query query={query} variables={variables}>
+            <Query
+              query={query}
+              variables={variables}
+              notifyOnNetworkStatusChange={true}
+            >
               {(resultQuery: any) => {
                 try {
                   if (count === 0) {
@@ -1047,13 +1051,16 @@ describe('General Mutation testing', () => {
                     // mutation loading
                     expect(resultMutation.loading).toBe(true);
                   } else if (count === 6) {
-                    // mutation loaded
-                    expect(resultMutation.loading).toBe(false);
+                    // mutation still loading???
+                    expect(resultMutation.loading).toBe(true);
                   } else if (count === 7) {
+                    expect(resultQuery.loading).toBe(true);
+                    expect(resultMutation.loading).toBe(false);
+                  } else if (count === 8) {
                     // query refetched
+                    expect(resultQuery.data).toEqual(peopleData3);
                     expect(resultQuery.loading).toBe(false);
                     expect(resultMutation.loading).toBe(false);
-                    expect(resultQuery.data).toEqual(peopleData3);
                   }
                   count++;
                 } catch (err) {
@@ -1074,7 +1081,7 @@ describe('General Mutation testing', () => {
     );
 
     waitFor(() => {
-      expect(count).toEqual(8);
+      expect(count).toBe(9);
     }).then(resolve, reject);
   }));
 

diff --git a/src/react/components/__tests__/client/Query.test.tsx b/src/react/components/__tests__/client/Query.test.tsx
@@ -1229,7 +1229,11 @@ describe('Query component', () => {
           const { variables } = this.state;
 
           return (
-            <AllPeopleQuery query={query} variables={variables}>
+            <AllPeopleQuery
+              query={query}
+              variables={variables}
+              notifyOnNetworkStatusChange={true}
+            >
               {(result: any) => {
                 try {
                   switch (count) {
@@ -1717,35 +1721,40 @@ describe('Query component', () => {
           <AllPeopleQuery
             query={query}
             variables={variables}
+            notifyOnNetworkStatusChange={true}
             onCompleted={this.onCompleted}
           >
             {({ loading, data }: any) => {
-              switch (renderCount) {
-                case 0:
-                  expect(loading).toBe(true);
-                  break;
-                case 1:
-                case 2:
-                  expect(loading).toBe(false);
-                  expect(data).toEqual(data1);
-                  break;
-                case 3:
-                  expect(loading).toBe(true);
-                  break;
-                case 4:
-                  expect(loading).toBe(false);
-                  expect(data).toEqual(data2);
-                  setTimeout(() => {
-                    this.setState({ variables: { first: 1 } });
-                  });
-                case 5:
-                  expect(loading).toBe(false);
-                  expect(data).toEqual(data2);
-                  break;
-                case 6:
-                  expect(loading).toBe(false);
-                  expect(data).toEqual(data1);
-                  break;
+              try {
+                switch (renderCount) {
+                  case 0:
+                    expect(loading).toBe(true);
+                    break;
+                  case 1:
+                  case 2:
+                    expect(loading).toBe(false);
+                    expect(data).toEqual(data1);
+                    break;
+                  case 3:
+                    expect(loading).toBe(true);
+                    break;
+                  case 4:
+                    expect(loading).toBe(false);
+                    expect(data).toEqual(data2);
+                    setTimeout(() => {
+                      this.setState({ variables: { first: 1 } });
+                    });
+                  case 5:
+                    expect(loading).toBe(false);
+                    expect(data).toEqual(data2);
+                    break;
+                  case 6:
+                    expect(loading).toBe(false);
+                    expect(data).toEqual(data1);
+                    break;
+                }
+              } catch (err) {
+                reject(err);
               }
               renderCount += 1;
               return null;
@@ -1762,6 +1771,7 @@ describe('Query component', () => {
     );
 
     waitFor(() => {
+      expect(renderCount).toBe(7);
       expect(onCompletedCallCount).toBe(3);
     }).then(resolve, reject);
   });

diff --git a/src/react/components/__tests__/ssr/getDataFromTree.test.tsx b/src/react/components/__tests__/ssr/getDataFromTree.test.tsx
@@ -1,3 +1,4 @@
+/** @jest-environment node */
 import React from 'react';
 import gql from 'graphql-tag';
 import { DocumentNode } from 'graphql';

diff --git a/src/react/components/__tests__/ssr/server.test.tsx b/src/react/components/__tests__/ssr/server.test.tsx
@@ -1,3 +1,4 @@
+/** @jest-environment node */
 import React from 'react';
 import {
   print,

diff --git a/src/react/hoc/__tests__/queries/errors.test.tsx b/src/react/hoc/__tests__/queries/errors.test.tsx
@@ -216,7 +216,10 @@ describe('[queries] errors', () => {
       let iteration = 0;
       let done = false;
       const ErrorContainer = withState('var', 'setVar', 1)(
-        graphql<Props, Data, Vars>(query)(
+        graphql<Props, Data, Vars>(
+          query,
+          { options: { notifyOnNetworkStatusChange: true }},
+        )(
           class extends React.Component<ChildProps<Props, Data, Vars>> {
             componentDidUpdate() {
               const { props } = this;
@@ -234,7 +237,7 @@ describe('[queries] errors', () => {
                   );
                 } else if (iteration === 3) {
                   // variables have changed, wee are loading again but also have data
-                  expect(props.data!.loading).toBeTruthy();
+                  expect(props.data!.loading).toBe(true);
                 } else if (iteration === 4) {
                   // the second request had an error!
                   expect(props.data!.error).toBeTruthy();
@@ -256,8 +259,8 @@ describe('[queries] errors', () => {
             render() {
               return null;
             }
-          }
-        )
+          },
+        ),
       );
 
       render(
@@ -470,9 +473,11 @@ describe('[queries] errors', () => {
                   });
                 break;
               case 3:
+                // Second render was added by useSyncExternalStore changes...
+              case 4:
                 expect(props.data!.loading).toBeTruthy();
                 break;
-              case 4:
+              case 5:
                 expect(props.data!.loading).toBeFalsy();
                 expect(props.data!.error).toBeFalsy();
                 expect(props.data!.allPeople).toEqual(
@@ -499,7 +504,7 @@ describe('[queries] errors', () => {
       </ApolloProvider>
     );
 
-    waitFor(() => expect(count).toBe(5)).then(resolve, reject);
+    waitFor(() => expect(count).toBe(6)).then(resolve, reject);
   });
 
   itAsync('does not throw/console.err an error after a component that received a network error is unmounted', (resolve, reject) => {