[Data masking] Add codemod to apply @unmask to all named fragments

[jerelmiller]

Closes #11676

Adds a codemod that applies the @unmask directive to all named fragments in a file. This works for:

• gql (or graphql) tagged template literals
• graphql (or gql) functions
• .graphql or .gql files

To run the codemod, use the following:

npx jscodeshift -t scripts/codemods/data-masking/unmask.ts \
  --extensions tsx \
  --parser tsx \
  path/to/file.tsx

By default this adds the @unmask directive with no arguments. To add it in migrate mode, use the --mode migrate option in the CLI:

npx jscodeshift -t scripts/codemods/data-masking/unmask.ts \
  --extensions tsx \
  --parser tsx \
  path/to/file.tsx \
  --mode migrate

You can customize the tag name with the --tag option, or use it to only apply to a specific tag name. This defaults to both gql and graphql tags when not provided.

npx jscodeshift -t scripts/codemods/data-masking/unmask.ts \
  --extensions tsx \
  --parser tsx \
  path/to/file.tsx \
  --tag gql

Pass --tag multiple times to parse more than one tag name.

[changeset-bot]

🦋 Changeset detected

Latest commit: 65b06bb

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

[svc-apollo-docs]

✅ Docs Preview Ready

No new or changed pages found.

[pkg-pr-new]

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

commit: 66dc5e8

[github-actions]

size-limit report 📦

Path	Size
dist/apollo-client.min.cjs	40.6 KB (0%)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/main.cjs"	50.99 KB (0%)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/main.cjs" (production)	47.57 KB (0%)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/index.js"	36.31 KB (0%)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/index.js" (production)	33.56 KB (0%)
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.52 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.67 KB (0%)
import { useLoadableQuery } from "dist/react/index.js"	5.1 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%)

[jerelmiller]

I need to validate this is the correct path when the package is installed. So far I've been running this against the examples in this repo directly. If you'd like to do the same, the path to the unmask.ts script should be:

npx jscodeshift -t scripts/codemods/data-masking/unmask.ts --extensions tsx scripts/codemods/data-masking/examples/

[phryneas]

Scripts are not copied to dist, so this never gets published to npm. :/

[phryneas]

It works for .tsx and .graphql for me, but for the .ts file it crashes:

Removing the underlined lines it works... am I holding the tool wrong?

I was! It also needs a --parser=ts - adding that to the README

[phryneas]

Suggested change

	```
	npx jscodeshift -t node_modules/@apollo/client/scripts/codemods/data-masking/unmask.ts --extensions tsx path/to/app/
	```
	```
	npx jscodeshift -t node_modules/@apollo/client/scripts/codemods/data-masking/unmask.ts --extensions tsx --parser=tsx path/to/app/
	```

[phryneas]

Apart from that, works nicely!

It would be great if it could change existing @unmask to mode: "migrate", but that would be a bonus feature for a later time I guess ^^

Only thing we still have to figure out is distribution.

[jerelmiller]

@phryneas

It would be great if it could change existing @unmask to mode: "migrate"

I considered that but left it for now because I thought that this might happen as a result of manually adding @unmask and figured its better to leave it alone than try and change it. Definitely one of those things though that have good arguments either way.

Should be easy to update though if we get feedback that it should update existing directives. If you feel strongly that we should have this out of the gate, I'd be happy to implement it.

[phryneas]

Please don't let that be a blocker! It would be a nice to have and I'm not even sure if it's very useful, so let's wait on that for user feedback!

[jerelmiller]

We still need to figure out the distribution strategy for the codemod, but that shouldn't hold us back from releasing the rc. Will merge now as we continue to explore that.