refactor maybeHiddenOrFastRefresh for react strict

relay-tools · Dec 12, 2023 · 9c73188 · 9c73188
1 parent a22b425
commit 9c73188
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git a/src/useOssFragment.tsx b/src/useOssFragment.tsx
@@ -16,18 +16,25 @@ export function useOssFragment(
     const environment = useRelayEnvironment();
     const forceUpdate = useForceUpdate();
     const ref = useRef<{ resolver: FragmentResolver }>(null);
-    if (ref.current === null || ref.current === undefined) {
+    const maybeHiddenOrFastRefresh = useRef(false);
+    if (ref.current === null || ref.current === undefined || maybeHiddenOrFastRefresh.current) {
         ref.current = {
             resolver: new FragmentResolver(name),
         };
+        maybeHiddenOrFastRefresh.current = false;
     }
 
     const { resolver } = ref.current;
 
     useEffect(() => {
+        if (maybeHiddenOrFastRefresh.current == true) {
+            forceUpdate();
+        }
         return (): void => {
             ref.current.resolver.setUnmounted();
+            maybeHiddenOrFastRefresh.current = true;
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
     useEffect(() => {

diff --git a/src/useQuery.ts b/src/useQuery.ts
@@ -19,14 +19,23 @@ const useInternalQuery = <TOperationType extends OperationType = OperationType>(
     const environment = useRelayEnvironment();
     const forceUpdate = useForceUpdate();
     const ref = useRef<Reference<TOperationType>>();
-    if (ref.current === null || ref.current === undefined) {
+    const maybeHiddenOrFastRefresh = useRef(false);
+    if (ref.current === null || ref.current === undefined || maybeHiddenOrFastRefresh.current == true) {
         ref.current = {
             queryFetcher: getOrCreateQueryFetcher(suspense, gqlQuery, variables, options.networkCacheConfig),
         };
+        maybeHiddenOrFastRefresh.current = false;
     }
 
     useEffect(() => {
-        return (): void => ref.current.queryFetcher.dispose();
+        if (maybeHiddenOrFastRefresh.current == true) {
+            forceUpdate();
+        }
+        return (): void => {
+            ref.current.queryFetcher.dispose();
+            maybeHiddenOrFastRefresh.current = true;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
     const { queryFetcher } = ref.current;