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

…12120)

.changeset/flat-beans-knock.md

@@ -0,0 +1,15 @@
+---
+"@apollo/client": patch
+---
+
+Provide a codemod that applies `@unmask` to all named fragments for all operations and fragments. To use the codemod, run the following command:
+
+```
+npx jscodeshift -t node_modules/@apollo/client/scripts/codemods/data-masking/unmask.ts --extensions tsx --parser tsx path/to/app/
+```
+
+To customize the tag used to search for GraphQL operations, use the `--tag` option. By default the codemod looks for `gql` and `graphql` tags.
+
+To apply the directive in migrate mode in order to receive runtime warnings on potentially masked fields, use the `--mode migrate` option.
+
+For more information on the options that can be used with `jscodeshift`, check out the [`jscodeshift` documentation](https://github.com/facebook/jscodeshift).

.eslintrc

@@ -25,7 +25,10 @@
       "excludedFiles": ["**/__tests__/**/*.*", "*.d.ts"],
       "extends": ["plugin:react-hooks/recommended"],
       "parserOptions": {
-        "project": "./tsconfig.json"
+        "project": [
+          "./tsconfig.json",
+          "./scripts/codemods/data-masking/tsconfig.json"
+        ]
       },
       "plugins": ["eslint-plugin-react-compiler"],
       "rules": {

.size-limits.json

@@ -1,4 +1,4 @@
 {
-  "dist/apollo-client.min.cjs": 41580,
-  "import { ApolloClient, InMemoryCache, HttpLink } from \"dist/index.js\" (production)": 34368
+  "dist/apollo-client.min.cjs": 41576,
+  "import { ApolloClient, InMemoryCache, HttpLink } from \"dist/index.js\" (production)": 34364
 }

scripts/codemods/data-masking/examples/queries-codegen.ts

@@ -0,0 +1,26 @@
+import { graphql } from "./gql";
+
+export const query = graphql(`
+  query GetCurrentUser {
+    currentUser {
+      id
+      ...CurrentUserFields
+    }
+  }
+`);
+
+export const currentUserFieldsFragment = graphql(`
+  fragment CurrentUserFields on User {
+    name
+    ...ProfileFields
+  }
+`);
+
+export const profileFieldsFragment = graphql(`
+  fragment ProfileFields on User {
+    profile {
+      id
+      avatarUrl
+    }
+  }
+`);

scripts/codemods/data-masking/examples/queries-react.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { gql, useQuery } from "@apollo/client";
+
+const ProfileFieldsFragment = gql`
+  fragment ProfileFields on User {
+    profile {
+      id
+      avatarUrl
+    }
+  }
+`;
+
+const fragment = gql`
+  fragment CurrentUserFields on User {
+    name
+    ...ProfileFields
+  }
+
+  ${ProfileFieldsFragment}
+`;
+
+export function MyComponent() {
+  const { data, loading } = useQuery(gql`
+    query GetCurrentUser {
+      currentUser {
+        id
+        ...CurrentUserFields
+      }
+    }
+
+    ${fragment}
+  `);
+
+  if (loading) {
+    return <div>Loading...</div>;
+  }
+
+  return <div>{JSON.stringify(data)}</div>;
+}

scripts/codemods/data-masking/examples/queries.graphql

@@ -0,0 +1,18 @@
+query GetCurrentUser {
+  currentUser {
+    id
+    ...CurrentUserFields
+  }
+}
+
+fragment CurrentUserFields on User {
+  name
+  ...ProfileFields
+}
+
+fragment ProfileFields on User {
+  profile {
+    id
+    avatarUrl
+  }
+}

scripts/codemods/data-masking/examples/queries.ts

@@ -0,0 +1,31 @@
+import { gql } from "@apollo/client";
+import type { TypedDocumentNode } from "@apollo/client";
+
+export const ProfileFieldsFragment: TypedDocumentNode<{
+  profile: { id: string; avatarUrl: string };
+}> = gql`
+  fragment ProfileFields on User {
+    profile {
+      id
+      avatarUrl
+    }
+  }
+`;
+
+const CurrentUserFieldsFragment = gql`
+  fragment CurrentUserFields on User {
+    name
+    ...ProfileFields
+  }
+`;
+
+export const GetCurrentUser = gql`
+  query GetCurrentUser {
+    currentUser {
+      id
+      ...CurrentUserFields
+    }
+  }
+
+  ${CurrentUserFieldsFragment}
+`;