useMutation: fix rules of React violations

[phryneas]

Another one for #11511...

[changeset-bot]

🦋 Changeset detected

Latest commit: a733eb1

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@apollo/client	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

size-limit report 📦

Path	Size
dist/apollo-client.min.cjs	38.69 KB (+0.04% 🔺)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/main.cjs"	47.47 KB (+0.05% 🔺)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/main.cjs" (production)	45.04 KB (+0.03% 🔺)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/index.js"	34.2 KB (0%)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/index.js" (production)	32.05 KB (0%)
import { ApolloProvider } from "dist/react/index.js"	1.23 KB (0%)
import { ApolloProvider } from "dist/react/index.js" (production)	1.22 KB (0%)
import { useQuery } from "dist/react/index.js"	5.29 KB (0%)
import { useQuery } from "dist/react/index.js" (production)	4.37 KB (0%)
import { useLazyQuery } from "dist/react/index.js"	5.57 KB (0%)
import { useLazyQuery } from "dist/react/index.js" (production)	4.64 KB (0%)
import { useMutation } from "dist/react/index.js"	3.54 KB (+0.56% 🔺)
import { useMutation } from "dist/react/index.js" (production)	2.77 KB (+0.79% 🔺)
import { useSubscription } from "dist/react/index.js"	3.21 KB (0%)
import { useSubscription } from "dist/react/index.js" (production)	2.4 KB (0%)
import { useSuspenseQuery } from "dist/react/index.js"	5.44 KB (0%)
import { useSuspenseQuery } from "dist/react/index.js" (production)	4.1 KB (0%)
import { useBackgroundQuery } from "dist/react/index.js"	4.96 KB (0%)
import { useBackgroundQuery } from "dist/react/index.js" (production)	3.61 KB (0%)
import { useLoadableQuery } from "dist/react/index.js"	5.07 KB (0%)
import { useLoadableQuery } from "dist/react/index.js" (production)	3.72 KB (0%)
import { useReadQuery } from "dist/react/index.js"	3.33 KB (0%)
import { useReadQuery } from "dist/react/index.js" (production)	3.27 KB (0%)
import { useFragment } from "dist/react/index.js"	2.29 KB (0%)
import { useFragment } from "dist/react/index.js" (production)	2.23 KB (0%)

[netlify]

✅ Deploy Preview for apollo-client-docs ready!

Name	Link
🔨 Latest commit	789add7
🔍 Latest deploy log	https://app.netlify.com/sites/apollo-client-docs/deploys/6647535dbe70b200081c26f5
😎 Deploy Preview	https://deploy-preview-11852--apollo-client-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for apollo-client-docs ready!

Name	Link
🔨 Latest commit	a733eb1
🔍 Latest deploy log	https://app.netlify.com/sites/apollo-client-docs/deploys/664c64b8a014600008ea0675
😎 Deploy Preview	https://deploy-preview-11852--apollo-client-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[phryneas]

This is what that TODO comment was referencing to:

TODO: Trying to assign these in a useEffect or useLayoutEffect breaks higher-order components.

It didn't break HOCs, but broke the test that was calling createTodo during render.

[phryneas]

Woops 🙃

[jerelmiller]

Looks good to me!

[mikehdt]

@phryneas This PR has introduced a React.useLayoutEffect call, which causes a slew of warnings when it gets rendered server-side.

You might need to consider guarding against this with some of the solutions suggested at https://reactjs.org/link/uselayouteffect-ssr

[Multiply]

@phryneas This PR has introduced a React.useLayoutEffect call, which causes a slew of warnings when it gets rendered server-side.

You might need to consider guarding against this with some of the solutions suggested at https://reactjs.org/link/uselayouteffect-ssr

We're seeing a lot of warnings after the introduction of useLayoutEffect, so we downgraded to 3.10.4 again.

[quadrifolia]

@phryneas This PR has introduced a React.useLayoutEffect call, which causes a slew of warnings when it gets rendered server-side.

You might need to consider guarding against this with some of the solutions suggested at https://reactjs.org/link/uselayouteffect-ssr

also downgraded to 3.10.4. Got useLayoutEffect warnings for every useMutation

[phryneas]

@mikehdt @Multiply @quadrifolia thank y'all for the report! I'll see that I get a patch for this out at some point today or tomorrow!

[phryneas]

@mikehdt @Multiply @quadrifolia could you please try out this build and report back if that solves the problem?

npm i @apollo/client@0.0.0-pr-11900-20240620115719

[Multiply]

@mikehdt @Multiply @quadrifolia could you please try out this build and report back if that solves the problem?

npm i @apollo/client@0.0.0-pr-11900-20240620115719

The error seems to be gone with that version of @apollo/client indeed.

[phryneas]

@mikehdt @Multiply @quadrifolia I just released 3.10.6 which should address your problem.