Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

useMutation: fix rules of React violations #11852

Merged
merged 4 commits into from
May 21, 2024
Merged

Conversation

phryneas
Copy link
Member

@phryneas phryneas commented May 17, 2024

Another one for #11511...

Copy link

changeset-bot bot commented May 17, 2024

🦋 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

Copy link
Contributor

github-actions bot commented May 17, 2024

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%)

Copy link

netlify bot commented May 17, 2024

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...

QR Code

Use your smartphone camera to open QR code link.

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

Copy link

netlify bot commented May 17, 2024

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...

QR Code

Use your smartphone camera to open QR code link.

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

@@ -1348,7 +1348,7 @@ describe("General Mutation testing", () => {
if (count === 0) {
expect(result.called).toEqual(false);
expect(result.loading).toEqual(false);
createTodo();
setTimeout(createTodo, 10);
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

const result = {
called: false,
loading: false,
client: ref.current.client,
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Woops 🙃

Copy link
Member

@jerelmiller jerelmiller left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me!

@github-actions github-actions bot added the auto-cleanup 🤖 label May 17, 2024
@phryneas phryneas merged commit d502a69 into main May 21, 2024
33 checks passed
@phryneas phryneas deleted the pr/rules-of-hooks/useMutation branch May 21, 2024 09:33
@github-actions github-actions bot mentioned this pull request May 21, 2024
@mikehdt
Copy link

mikehdt commented Jun 17, 2024

@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
Copy link

@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
Copy link

@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
Copy link
Member Author

@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
Copy link
Member Author

@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
Copy link

@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
Copy link
Member Author

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

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jul 25, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants