Merge pull request #116 from relay-tools/issue-115

Fix issue 115
relay-tools · Sep 28, 2020 · 063d19b · 063d19b
2 parents d9d0942 + ea45b53
commit 063d19b
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 6 deletions.
diff --git a/__tests__/usePreloadQuery-test.tsx b/__tests__/usePreloadQuery-test.tsx
@@ -749,5 +749,65 @@ describe('usePreloadQuery', () => {
             TestRenderer.act(() => jest.runAllImmediates());
             expect(renderer.toJSON()).toEqual('Error Boundary');
         });
+
+        it('issue-115', () => {
+            prefetched.next(environment, params, { id: '4' });
+
+            let data;
+            function Component(props) {
+                data = usePreloadedQuery(props.prefetched);
+                if (data.error) {
+                    return 'Error Boundary';
+                }
+                if (data.props && data.props.node) {
+                    return data.props.node.name;
+                }
+                return data.props;
+            }
+            const renderer = TestRenderer.create(
+                <RelayEnvironmentProvider environment={environment}>
+                    <Component prefetched={prefetched} />
+                </RelayEnvironmentProvider>,
+            );
+            // Ensure that useEffect runs
+            TestRenderer.act(() => jest.runAllImmediates());
+            expect(renderer.toJSON()).toEqual(null);
+            expect(data).toEqual(loadingData);
+
+            dataSource.next(response);
+            dataSource.complete();
+            TestRenderer.act(() => jest.runAllImmediates());
+            expect(renderer.toJSON()).toEqual('Zuck');
+            expect(data.props).toEqual({
+                node: {
+                    id: '4',
+                    name: 'Zuck',
+                },
+            });
+
+            TestRenderer.act(() => renderer.unmount());
+            TestRenderer.act(() => jest.runAllImmediates());
+            prefetched.next(environment, params, { id: '4' });
+            dataSource.next(response);
+            dataSource.complete();
+            TestRenderer.act(() => jest.runAllImmediates());
+            expect((prefetched.getValue(environment) as any).props).toEqual({
+                node: {
+                    id: '4',
+                    name: 'Zuck',
+                },
+            });
+        });
+
+        it('dispose subscription', () => {
+            const callback = jest.fn(() => {});
+            const dispose = prefetched.subscribe(callback);
+            dispose();
+            prefetched.next(environment, params, { id: '4' });
+            dataSource.next(response);
+            dataSource.complete();
+            TestRenderer.act(() => jest.runAllImmediates());
+            expect(callback).not.toBeCalled();
+        });
     });
 });
diff --git a/src/loadQuery.ts b/src/loadQuery.ts
@@ -8,11 +8,10 @@ const internalLoadQuery = <TOperationType extends OperationType = OperationType>
     promise = false,
 ): LoadQuery<TOperationType> => {
     let data: RenderProps<TOperationType> | null | Promise<any> = null;
-    let listener;
+    let listener = undefined;
+    let queryFetcher = new QueryFetcher<TOperationType>(true);
 
-    const queryFetcher = new QueryFetcher<TOperationType>(true);
-
-    const prev = {
+    let prev = {
         environment: null,
         gqlQuery: null,
         variables: null,
@@ -22,7 +21,16 @@ const internalLoadQuery = <TOperationType extends OperationType = OperationType>
 
     const dispose = (): void => {
         queryFetcher.dispose();
-        listener = null;
+        queryFetcher = new QueryFetcher<TOperationType>(true);
+        listener = undefined;
+        data = null;
+        prev = {
+            environment: null,
+            gqlQuery: null,
+            variables: null,
+            options: null,
+            query: null,
+        };
     };
 
     const next = (
@@ -73,7 +81,9 @@ const internalLoadQuery = <TOperationType extends OperationType = OperationType>
 
     const subscribe = (callback: (value) => any): (() => void) => {
         listener = callback;
-        return dispose;
+        return (): void => {
+            listener = null;
+        };
     };
     return {
         next,