fix: silence useLayoutEffect warning when useSuspenseQuery runs on se…

…rver (#10399)

* fix: silence useLayoutEffect warning when useSuspenseQuery run on server

* chore: bump bundlesize to 33.19kb (was 33.17kb)

* chore: adds changeset

* chore: move hook to src/react/hooks/internal

.changeset/polite-birds-rescue.md

@@ -0,0 +1,5 @@
+---
+'@apollo/client': patch
+---
+
+Silence useLayoutEffect warning when useSuspenseQuery runs on server

config/bundlesize.ts

@@ -3,7 +3,7 @@ import { join } from "path";
 import { gzipSync } from "zlib";
 import bytes from "bytes";
 
-const gzipBundleByteLengthLimit = bytes("33.17KB");
+const gzipBundleByteLengthLimit = bytes("33.19KB");
 const minFile = join("dist", "apollo-client.min.cjs");
 const minPath = join(__dirname, "..", minFile);
 const gzipByteLen = gzipSync(readFileSync(minPath)).byteLength;

src/react/hooks/internal/index.ts

@@ -1,2 +1,3 @@
 // These hooks are used internally and are not exported publicly by the library
 export { useDeepMemo } from './useDeepMemo';
+export { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';

src/react/hooks/internal/useIsomorphicLayoutEffect.ts

@@ -0,0 +1,6 @@
+import { useLayoutEffect, useEffect } from 'react';
+import { canUseLayoutEffect } from '../../../utilities/common/canUse';
+
+export const useIsomorphicLayoutEffect = canUseLayoutEffect
+  ? useLayoutEffect
+  : useEffect;

src/react/hooks/useSuspenseQuery.ts

@@ -4,7 +4,6 @@ import {
   useCallback,
   useMemo,
   useState,
-  useLayoutEffect,
 } from 'react';
 import { equal } from '@wry/equality';
 import {
@@ -31,7 +30,7 @@ import {
   SuspenseQueryHookOptions,
   ObservableQueryFields,
 } from '../types/types';
-import { useDeepMemo } from './internal';
+import { useDeepMemo, useIsomorphicLayoutEffect } from './internal';
 import { useSuspenseCache } from './useSuspenseCache';
 import { useSyncExternalStore } from './useSyncExternalStore';
 
@@ -309,7 +308,7 @@ function useObservableQueryResult<TData>(observable: ObservableQuery<TData>) {
   //
   // Unlike useEffect, useLayoutEffect will run its cleanup and initialization
   // functions each time a component is suspended.
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     isMountedRef.current = true;
 
     return () => {