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

[Data masking] Fix aggressive warnings when using objects marked with @unmask(mode: "migrate") with cache.identify #12116

Merged
merged 14 commits into from
Nov 11, 2024

Conversation

jerelmiller
Copy link
Member

Closes #12043

When passing an unmasked object in migration mode to cache.identify, we'd get field accessor warnings even though the end user wasn't accessing them at all. This was due to the fact that cache.identify does a spread operation of the result which shallow-copies all the fields, triggering the getters.

This change adds a new Slot that we can use to disable field accessor warnings inside Apollo Client core for masked fields. This fixes the cache.identify case as this is the only known case of the issue so far. In the future we can use this Slot if we encounter other areas of the codebase that prematurely trigger the warnings.

@jerelmiller jerelmiller added 🐞 bug 🎭 data-masking Issues/PRs related to data masking labels Nov 8, 2024
@jerelmiller jerelmiller requested a review from phryneas November 8, 2024 20:16
@svc-apollo-docs
Copy link

svc-apollo-docs commented Nov 8, 2024

✅ Docs Preview Ready

No new or changed pages found.

Copy link

changeset-bot bot commented Nov 8, 2024

🦋 Changeset detected

Latest commit: c57ea51

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

pkg-pr-new bot commented Nov 8, 2024

npm i https://pkg.pr.new/@apollo/client@12116

commit: 0a6a3fb

Copy link
Contributor

github-actions bot commented Nov 8, 2024

size-limit report 📦

Path Size
dist/apollo-client.min.cjs 40.54 KB (+0.03% 🔺)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/main.cjs" 50.76 KB (+0.13% 🔺)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/main.cjs" (production) 47.45 KB (+0.07% 🔺)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/index.js" 36.1 KB (+0.12% 🔺)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/index.js" (production) 33.49 KB (+0.12% 🔺)
import { ApolloProvider } from "dist/react/index.js" 1.26 KB (0%)
import { ApolloProvider } from "dist/react/index.js" (production) 1.25 KB (0%)
import { useQuery } from "dist/react/index.js" 5.22 KB (0%)
import { useQuery } from "dist/react/index.js" (production) 4.3 KB (0%)
import { useLazyQuery } from "dist/react/index.js" 5.71 KB (0%)
import { useLazyQuery } from "dist/react/index.js" (production) 4.78 KB (0%)
import { useMutation } from "dist/react/index.js" 3.63 KB (0%)
import { useMutation } from "dist/react/index.js" (production) 2.85 KB (0%)
import { useSubscription } from "dist/react/index.js" 4.43 KB (0%)
import { useSubscription } from "dist/react/index.js" (production) 3.48 KB (0%)
import { useSuspenseQuery } from "dist/react/index.js" 5.51 KB (0%)
import { useSuspenseQuery } from "dist/react/index.js" (production) 4.17 KB (0%)
import { useBackgroundQuery } from "dist/react/index.js" 5.02 KB (0%)
import { useBackgroundQuery } from "dist/react/index.js" (production) 3.66 KB (0%)
import { useLoadableQuery } from "dist/react/index.js" 5.09 KB (0%)
import { useLoadableQuery } from "dist/react/index.js" (production) 3.74 KB (0%)
import { useReadQuery } from "dist/react/index.js" 3.42 KB (0%)
import { useReadQuery } from "dist/react/index.js" (production) 3.36 KB (0%)
import { useFragment } from "dist/react/index.js" 2.34 KB (0%)
import { useFragment } from "dist/react/index.js" (production) 2.29 KB (0%)

// value is missing, otherwise our final result will contain additional
// properties that our original result did not have. This could happen with a
// deferred payload for example.
if (value === void 0) {
Copy link
Member Author

Choose a reason for hiding this comment

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

Something I realized when making this PR is that it was possible for us to add keys to the masked result that wasn't in the original data object. I felt this was incorrect and should preserve the original shape as much as possible (which means the same keys should be present/absent on the masked object). As such, I had to adjust a test to ensure we had data to properly test the warnings case.

@phryneas would love your input here to ensure this change makes sense.

Copy link
Member

Choose a reason for hiding this comment

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

Seems reasonable.

from: { __typename: "User", id: 1 },
});
const stream = new ObservableStream(observable);
client.writeFragment({
Copy link
Member Author

Choose a reason for hiding this comment

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

As per my other comment, I had to make this change in the test since the keys are no longer present on the returned masked object since they weren't on the original data object (due to no data yet in the cache). This gets the test passing again.

@jerelmiller jerelmiller force-pushed the jerel/fix-agressive-warnings branch from 13b89b6 to afd18c3 Compare November 8, 2024 20:35
@@ -2258,18 +2258,22 @@ describe("maskFragment", () => {

const data = maskFragment(
deepFreeze({
currentUser: {
Copy link
Member Author

@jerelmiller jerelmiller Nov 8, 2024

Choose a reason for hiding this comment

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

This test was written incorrectly the first time 😅. This just happen to pass because we added accessor warnings for fields on the masked object that weren't present on the original data object. Yet another reason why I think the change not to add these properties unless they were on the original data object make sense.

@@ -392,7 +393,9 @@ export class Policies {
const policy = typename && this.getTypePolicy(typename);
let keyFn = (policy && policy.keyFn) || this.config.dataIdFromObject;
while (keyFn) {
const specifierOrId = keyFn({ ...object, ...storeObject }, context);
const specifierOrId = disableWarningsSlot.withValue(true, () => {
Copy link
Member

Choose a reason for hiding this comment

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

It might make sense to wrap this slot around the while loop, so if this iterates multiple times, the slot does less work.

Copy link
Member Author

Choose a reason for hiding this comment

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

Good call! Updated in 0a6a3fb

Copy link
Member

@phryneas phryneas 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, changes optional :)

@jerelmiller jerelmiller merged commit 8ae6e4e into release-3.12 Nov 11, 2024
32 of 36 checks passed
@jerelmiller jerelmiller deleted the jerel/fix-agressive-warnings branch November 11, 2024 16:58
@github-actions github-actions bot mentioned this pull request Nov 11, 2024
This was referenced Dec 4, 2024
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Dec 13, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
auto-cleanup 🤖 🐞 bug 🎭 data-masking Issues/PRs related to data masking
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants