Merge branch 'release-3.8' of github.com:apollographql/apollo-client …

…into release-3.8

.changeset/polite-birds-rescue.md

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

.changeset/pre.json

@@ -6,6 +6,7 @@
   },
   "changesets": [
     "early-pens-retire",
+    "polite-birds-rescue",
     "rude-mayflies-scream",
     "sixty-trains-sniff",
     "small-timers-shake"

CHANGELOG.md

@@ -1,5 +1,11 @@
 # @apollo/client
 
+## 3.8.0-alpha.3
+
+### Patch Changes
+
+- [#10399](https://github.com/apollographql/apollo-client/pull/10399) [`652a1ae08`](https://github.com/apollographql/apollo-client/commit/652a1ae0868e4a5b75b9ff656d26f57eeca1081a) Thanks [@alessbell](https://github.com/alessbell)! - Silence useLayoutEffect warning when useSuspenseQuery runs on server
+
 ## 3.8.0-alpha.2
 
 ### Minor Changes

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;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apollo/client",
-  "version": "3.8.0-alpha.2",
+  "version": "3.8.0-alpha.3",
   "description": "A fully-featured caching GraphQL client.",
   "private": true,
   "keywords": [

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 () => {