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

Allow queryRefs to be disposed of synchronously #11738

Merged
merged 14 commits into from
Apr 1, 2024

Conversation

jerelmiller
Copy link
Member

@alessbell this one is for you 🙂.

This removes the setTimeout in the queryRef dispose function so that it can be disposed of synchronously. The strict mode compatibility is now handled in useSuspenseQuery itself using the work done in #11412 that allows a queryRef to "resume" after it has been disposed without creating additional network requests.

Copy link

changeset-bot bot commented Mar 29, 2024

🦋 Changeset detected

Latest commit: 7c3aec9

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 Mar 29, 2024

size-limit report 📦

Path Size
dist/apollo-client.min.cjs 38.45 KB (+0.11% 🔺)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/main.cjs" 46.27 KB (+0.1% 🔺)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/main.cjs" (production) 43.83 KB (+0.1% 🔺)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/index.js" 33.96 KB (0%)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/index.js" (production) 31.87 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.26 KB (0%)
import { useQuery } from "dist/react/index.js" (production) 4.35 KB (0%)
import { useLazyQuery } from "dist/react/index.js" 5.5 KB (0%)
import { useLazyQuery } from "dist/react/index.js" (production) 4.58 KB (0%)
import { useMutation } from "dist/react/index.js" 3.51 KB (0%)
import { useMutation } from "dist/react/index.js" (production) 2.73 KB (0%)
import { useSubscription } from "dist/react/index.js" 3.19 KB (0%)
import { useSubscription } from "dist/react/index.js" (production) 2.38 KB (0%)
import { useSuspenseQuery } from "dist/react/index.js" 5.44 KB (+0.56% 🔺)
import { useSuspenseQuery } from "dist/react/index.js" (production) 4.1 KB (+0.82% 🔺)
import { useBackgroundQuery } from "dist/react/index.js" 4.92 KB (+0.56% 🔺)
import { useBackgroundQuery } from "dist/react/index.js" (production) 3.58 KB (+0.78% 🔺)
import { useLoadableQuery } from "dist/react/index.js" 5.03 KB (+0.24% 🔺)
import { useLoadableQuery } from "dist/react/index.js" (production) 3.69 KB (+0.27% 🔺)
import { useReadQuery } from "dist/react/index.js" 3.17 KB (+0.13% 🔺)
import { useReadQuery } from "dist/react/index.js" (production) 3.11 KB (+0.13% 🔺)
import { useFragment } from "dist/react/index.js" 2.27 KB (0%)
import { useFragment } from "dist/react/index.js" (production) 2.22 KB (0%)

Copy link

netlify bot commented Mar 29, 2024

Deploy Preview for apollo-client-docs ready!

Name Link
🔨 Latest commit 9f8604a
🔍 Latest deploy log https://app.netlify.com/sites/apollo-client-docs/deploys/6607556519ced40008e57f17
😎 Deploy Preview https://deploy-preview-11738--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.

@jerelmiller
Copy link
Member Author

Found an issue with useBackgroundQuery. Putting it back in draft for a bit

@jerelmiller jerelmiller marked this pull request as draft March 29, 2024 22:24
@jerelmiller jerelmiller marked this pull request as ready for review March 29, 2024 23:47
@jerelmiller
Copy link
Member Author

Ok ready to go 🙂

@@ -447,6 +450,92 @@ it("auto resubscribes when mounting useReadQuery after naturally disposed by use
await expect(Profiler).not.toRerender({ timeout: 50 });
});

it("does not recreate queryRef and execute a network request when rerendering useBackgroundQuery after queryRef is disposed", async () => {
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 experiment helped me find a potential bug with useBackgroundQuery where rerendering useBackgroundQuery after the query ref is disposed (either by auto timeout or unmounting useReadQuery) could cause the queryRef to be recreated and execute another network request. Added a test here to check for that which was failing before this change 🙂

@jerelmiller
Copy link
Member Author

/release:pr

@jerelmiller
Copy link
Member Author

/release:pr

@jerelmiller
Copy link
Member Author

/release:pr

Copy link
Contributor

github-actions bot commented Apr 1, 2024

A new release has been made for this PR. You can install it with:

npm i @apollo/client@0.0.0-pr-11738-20240401174605

Copy link
Member

@alessbell alessbell left a comment

Choose a reason for hiding this comment

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

Thanks so much for looking into this! 🚀

@github-actions github-actions bot added the auto-cleanup 🤖 label Apr 1, 2024
@jerelmiller jerelmiller merged commit b1a5eb8 into main Apr 1, 2024
35 checks passed
@jerelmiller jerelmiller deleted the jerel/try-strict-mode-change branch April 1, 2024 18:25
@github-actions github-actions bot mentioned this pull request Apr 1, 2024
@github-actions github-actions bot locked as resolved and limited conversation to collaborators May 2, 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.

2 participants