From 652a1ae0868e4a5b75b9ff656d26f57eeca1081a Mon Sep 17 00:00:00 2001
From: Alessia Bellisario <alessia@apollographql.com>
Date: Tue, 3 Jan 2023 16:30:19 -0500
Subject: [PATCH] fix: silence useLayoutEffect warning when useSuspenseQuery
 runs on server (#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                     | 5 +++++
 config/bundlesize.ts                                  | 2 +-
 src/react/hooks/internal/index.ts                     | 1 +
 src/react/hooks/internal/useIsomorphicLayoutEffect.ts | 6 ++++++
 src/react/hooks/useSuspenseQuery.ts                   | 5 ++---
 5 files changed, 15 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/polite-birds-rescue.md
 create mode 100644 src/react/hooks/internal/useIsomorphicLayoutEffect.ts

diff --git a/.changeset/polite-birds-rescue.md b/.changeset/polite-birds-rescue.md
new file mode 100644
index 00000000000..c248b44089b
--- /dev/null
+++ b/.changeset/polite-birds-rescue.md
@@ -0,0 +1,5 @@
+---
+'@apollo/client': patch
+---
+
+Silence useLayoutEffect warning when useSuspenseQuery runs on server
diff --git a/config/bundlesize.ts b/config/bundlesize.ts
index 33b1cd94112..982d17cef85 100644
--- a/config/bundlesize.ts
+++ b/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;
diff --git a/src/react/hooks/internal/index.ts b/src/react/hooks/internal/index.ts
index aa70141c2c1..3db9a013096 100644
--- a/src/react/hooks/internal/index.ts
+++ b/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';
diff --git a/src/react/hooks/internal/useIsomorphicLayoutEffect.ts b/src/react/hooks/internal/useIsomorphicLayoutEffect.ts
new file mode 100644
index 00000000000..7135b952e5c
--- /dev/null
+++ b/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;
diff --git a/src/react/hooks/useSuspenseQuery.ts b/src/react/hooks/useSuspenseQuery.ts
index c54b89dce6d..3eb12e254c2 100644
--- a/src/react/hooks/useSuspenseQuery.ts
+++ b/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 () => {