last-minute codemod tweaks and corrections (#12858)

* also apply clientSetup codemod to integration packages

* remove `TCacheShape` generic from `ApolloClient` constructor calls

* ensure when moving types into the `Defer20220824Handler` they end up importing from the right module

* add `Masked` and `MaskedDocumentNode` to removals

* also remove `TCacheShape` parameter from `ApolloClient` type usage

* update README

* add test to ensure that aliases are followed

* chore

* changeset

Author: phryneas

.api-reports/api-report-v4-migration.api.md

@@ -196,6 +196,12 @@ export const itAsync: never;
 // @public @deprecated (undocumented)
 export const iterateObserversSafely: never;
 
+// @public @deprecated (undocumented)
+export type Masked = never;
+
+// @public @deprecated (undocumented)
+export type MaskedDocumentNode = never;
+
 // @public @deprecated (undocumented)
 export const mergeIncrementalData: never;
 

.changeset/sour-wasps-bathe.md

@@ -0,0 +1,5 @@
+---
+"@apollo/client-codemod-migrate-3-to-4": patch
+---
+
+adjust the `clientSetup` codemod so that it removes the `TCacheShape` type argument from all `ApolloClient` usages (types and constructor calls).

scripts/codemods/ac3-to-ac4/README.md

@@ -29,6 +29,7 @@ In the order they will be applied per default if you don't manually specify a co
   - Renames `disableNetworkFetches` to `prioritizeCacheValues`
   - If `dataMasking` is enabled, adds a template for global type augmentation to re-enable data masking types
   - Adds the `incrementalHandler` option and adds a template for global type augmentation to accordingly type network responses in custom links
+  - Removes the `TCacheShape` type argument from all `ApolloClient` usages (types and constructor calls)
 
 ### Usage against TypeScript/TSX
 

scripts/codemods/ac3-to-ac4/src/__tests__/apolloClientInitialization.test.ts

@@ -22,7 +22,7 @@ describe("all transforms", () => {
     expect(transform()`
 import { ApolloClient, InMemoryCache } from "@apollo/client";
 
-export const client = new ApolloClient({
+export const client = new ApolloClient<MyCacheShape>({
   uri: "/graphql",
   credentials: "include",
   headers: {
@@ -125,6 +125,177 @@ export const client = new ApolloClient({
       */
 
 
+      import "@apollo/client";
+      import { Defer20220824Handler } from "@apollo/client/incremental";
+
+      declare module "@apollo/client" {
+        export interface TypeOverrides extends Defer20220824Handler.TypeOverrides {}
+      }
+
+      /*
+      End: Inserted by Apollo Client 3->4 migration codemod.
+      */"
+    `);
+  });
+
+  test("Apollo Client renamed", () => {
+    expect(transform()`
+import { ApolloClient as RenamedApolloClient, SomethingElse as ApolloClient, InMemoryCache } from "@apollo/client";
+
+export const dontTouchThis: ApolloClient<MyCacheShape> = new ApolloClient<MyCacheShape>({
+  uri: "/graphql",
+  credentials: "include",
+  headers: {
+    "x-custom-header": "value",
+  },
+  cache: new InMemoryCache(),
+  ssrForceFetchDelay: 50,
+  ssrMode: true,
+  connectToDevTools: true,
+  queryDeduplication: true,
+  defaultOptions: {},
+  defaultContext: {},
+  assumeImmutableResults: true,
+  resolvers: myResolvers,
+  typeDefs: mySchema,
+  fragmentMatcher: () => true,
+  name: "my-client",
+  version: "1.0.0",
+  documentTransform: myDocumentTransform,
+  dataMasking: true
+  })
+
+  export const transformThis: RenamedApolloClient<MyCacheShape> = new RenamedApolloClient<MyCacheShape>({
+  uri: "/graphql",
+  credentials: "include",
+  headers: {
+    "x-custom-header": "value",
+  },
+  cache: new InMemoryCache(),
+  ssrForceFetchDelay: 50,
+  ssrMode: true,
+  connectToDevTools: true,
+  queryDeduplication: true,
+  defaultOptions: {},
+  defaultContext: {},
+  assumeImmutableResults: true,
+  resolvers: myResolvers,
+  typeDefs: mySchema,
+  fragmentMatcher: () => true,
+  name: "my-client",
+  version: "1.0.0",
+  documentTransform: myDocumentTransform,
+  dataMasking: true
+  })
+    `).toMatchInlineSnapshot(`
+      "import {
+        ApolloClient as RenamedApolloClient,
+        SomethingElse as ApolloClient,
+        InMemoryCache,
+        HttpLink,
+      } from "@apollo/client";
+
+      import { Defer20220824Handler } from "@apollo/client/incremental";
+      import { LocalState } from "@apollo/client/local-state";
+
+      export const dontTouchThis: ApolloClient<MyCacheShape> = new ApolloClient<MyCacheShape>({
+        uri: "/graphql",
+        credentials: "include",
+        headers: {
+          "x-custom-header": "value",
+        },
+        cache: new InMemoryCache(),
+        ssrForceFetchDelay: 50,
+        ssrMode: true,
+        connectToDevTools: true,
+        queryDeduplication: true,
+        defaultOptions: {},
+        defaultContext: {},
+        assumeImmutableResults: true,
+        resolvers: myResolvers,
+        typeDefs: mySchema,
+        fragmentMatcher: () => true,
+        name: "my-client",
+        version: "1.0.0",
+        documentTransform: myDocumentTransform,
+        dataMasking: true
+        })
+
+      export const transformThis: RenamedApolloClient = new RenamedApolloClient({
+        cache: new InMemoryCache(),
+        ssrForceFetchDelay: 50,
+        ssrMode: true,
+        queryDeduplication: true,
+        defaultOptions: {},
+        defaultContext: {},
+        assumeImmutableResults: true,
+        documentTransform: myDocumentTransform,
+
+        /*
+        Inserted by Apollo Client 3->4 migration codemod.
+        Keep this comment here if you intend to run the codemod again,
+        to avoid changes from being reapplied.
+        Delete this comment once you are done with the migration.
+        @apollo/client-codemod-migrate-3-to-4 applied
+        */
+        dataMasking: true,
+
+        link: new HttpLink({
+          uri: "/graphql",
+          credentials: "include",
+
+          headers: {
+            "x-custom-header": "value",
+          }
+        }),
+
+        clientAwareness: {
+          name: "my-client",
+          version: "1.0.0"
+        },
+
+        localState: new LocalState({
+          resolvers: myResolvers
+        }),
+
+        devtools: {
+          enabled: true
+        },
+
+        /*
+        Inserted by Apollo Client 3->4 migration codemod.
+        If you are not using the \`@defer\` directive in your application,
+        you can safely remove this option.
+        */
+        incrementalHandler: new Defer20220824Handler()
+      })
+
+      /*
+      Start: Inserted by Apollo Client 3->4 migration codemod.
+      Copy the contents of this block into a \`.d.ts\` file in your project
+      to enable data masking types.
+      */
+
+
+      import "@apollo/client";
+      import { GraphQLCodegenDataMasking } from "@apollo/client/masking";
+
+      declare module "@apollo/client" {
+        export interface TypeOverrides extends GraphQLCodegenDataMasking.TypeOverrides {}
+      }
+
+      /*
+      End: Inserted by Apollo Client 3->4 migration codemod.
+      */
+
+
+      /*
+      Start: Inserted by Apollo Client 3->4 migration codemod.
+      Copy the contents of this block into a \`.d.ts\` file in your project to enable correct response types in your custom links.
+      If you do not use the \`@defer\` directive in your application, you can safely remove this block.
+      */
+
+
       import "@apollo/client";
       import { Defer20220824Handler } from "@apollo/client/incremental";
 
@@ -892,3 +1063,39 @@ new ApolloClient({
       `).toMatchInlineSnapshot(`""`);
   });
 });
+
+describe("removeTypeArguments", () => {
+  test("remove constructor type argument", () => {
+    expect(transform("removeTypeArguments")`
+import { ApolloClient } from "@apollo/client";
+
+new ApolloClient<CacheShape>({
+  cache: new InMemoryCache(),
+  link: someLink,
+})
+      `).toMatchInlineSnapshot(`
+        "import { ApolloClient } from "@apollo/client";
+
+        new ApolloClient({
+          cache: new InMemoryCache(),
+          link: someLink,
+        })"
+      `);
+  });
+
+  test("removes type arguments for usages of `ApolloClient` as a type", () => {
+    expect(transform("removeTypeArguments")`
+import { ApolloClient } from "@apollo/client";
+
+function test(client: ApolloClient<unknown>): ApolloClient<any> {
+  return client;
+}
+    `).toMatchInlineSnapshot(`
+      "import { ApolloClient } from "@apollo/client";
+
+      function test(client: ApolloClient): ApolloClient {
+        return client;
+      }"
+    `);
+  });
+});

scripts/codemods/ac3-to-ac4/src/apolloClientInitialization.ts

@@ -9,6 +9,7 @@ import { findImportSpecifiersFor } from "./util/findImportSpecifiersFor.js";
 import { findOrInsertImport } from "./util/findOrInsertImport.js";
 import { findReferences } from "./util/findReferences.js";
 import { getProperty } from "./util/getProperty.js";
+import { monkeyPatchAstTypes } from "./util/monkeyPatchAstTypes.js";
 
 const steps = {
   explicitLinkConstruction,
@@ -20,7 +21,7 @@ const steps = {
   incrementalHandler,
 } satisfies Record<string, (options: StepOptions) => void>;
 
-export type Steps = keyof typeof steps;
+export type Steps = keyof typeof steps | "removeTypeArguments";
 
 const apolloClientInitializationTransform: j.Transform = function transform(
   file,
@@ -31,14 +32,16 @@ const apolloClientInitializationTransform: j.Transform = function transform(
   const source = j(file.source);
   const context = { j, source };
 
+  monkeyPatchAstTypes(j);
+
   let modified = false;
   function onModified() {
     modified = true;
   }
   const enabledStepNames =
     Array.isArray(options.apolloClientInitialization) ?
       options.apolloClientInitialization
-    : Object.keys(steps);
+    : Object.keys(steps).concat("removeTypeArguments");
   const enabledSteps = Object.fromEntries(
     Object.entries(steps).filter(([name]) => enabledStepNames.includes(name))
   );
@@ -61,6 +64,31 @@ const apolloClientInitializationTransform: j.Transform = function transform(
     }
   }
 
+  // removes `TCacheShape` parameter from all `ApolloClient` usages, not just constructor calls
+  if (enabledStepNames.includes("removeTypeArguments")) {
+    for (const specPath of findImportSpecifiersFor({
+      description: apolloClientDescription,
+      context,
+    }).paths()) {
+      for (const refParent of findReferences({
+        context,
+        identifier: (specPath.node.local || specPath.node.imported).name + "",
+        scope: specPath.scope,
+      })
+        .map((refPath) => {
+          const parentPath = refPath.parentPath;
+          return j.ImportSpecifier.check(parentPath.node) ? null : parentPath;
+        })
+        .paths()) {
+        const typeParameters = refParent.get("typeParameters");
+        if (typeParameters?.node?.params?.length) {
+          modified = true;
+          typeParameters.prune();
+        }
+      }
+    }
+  }
+
   return modified ? source.toSource() : undefined;
 };
 export default apolloClientInitializationTransform;
@@ -456,11 +484,7 @@ function* apolloClientConstructions({
   context: UtilContext;
 }): Generator<ConstructorCall> {
   for (const specPath of findImportSpecifiersFor({
-    description: {
-      module: "@apollo/client",
-      identifier: "ApolloClient",
-      alternativeModules: ["@apollo/client/core"],
-    },
+    description: apolloClientDescription,
     compatibleWith: "value",
     context,
   }).paths()) {
@@ -488,3 +512,16 @@ function* apolloClientConstructions({
 const CODEMOD_MARKER = `@apollo/client-codemod-migrate-3-to-4`;
 const CODEMOD_MARKER_REGEX = (keyword: string) =>
   new RegExp(`^\\s*(?:[*]?\\s*)${CODEMOD_MARKER} ${keyword}\\s*$`, "m");
+
+const apolloClientDescription = {
+  module: "@apollo/client",
+  identifier: "ApolloClient",
+  alternativeModules: [
+    "@apollo/client/core",
+    "@apollo/client-react-streaming",
+    "@apollo/experimental-nextjs-app-support",
+    "@apollo/client-integration-nextjs",
+    "@apollo/client-integration-react-router",
+    "@apollo/client-integration-tanstack-start",
+  ],
+};

scripts/codemods/ac3-to-ac4/src/removals.ts

@@ -18,6 +18,8 @@ const removals = [
   { importType: "type", module: "@apollo/client/errors", identifier: "NetworkError" },
   { importType: "type", module: "@apollo/client/link/batch", identifier: "BatchableRequest" },
   { importType: "type", module: "@apollo/client/link/http", identifier: "ClientParseError" },
+  { importType: "type", module: "@apollo/client/masking", identifier: "Masked" },
+  { importType: "type", module: "@apollo/client/masking", identifier: "MaskedDocumentNode" },
   { importType: "type", module: "@apollo/client/react", identifier: "BaseMutationOptions" },
   { importType: "type", module: "@apollo/client/react", identifier: "BaseQueryOptions" },
   { importType: "type", module: "@apollo/client/react", identifier: "CommonOptions" },

scripts/codemods/ac3-to-ac4/src/renames.ts

@@ -595,6 +595,7 @@ export const renames: Array<IdentifierRename | ModuleRename> = [
       },
       to: {
         module: "@apollo/client/incremental",
+        alternativeModules: [],
         namespace: "Defer20220824Handler",
       },
       importType: "type",

src/v4-migration.ts

@@ -510,6 +510,16 @@ export type ChildProps = never;
  */
 export type ClientParseError = never;
 
+/**
+ * {@inheritDoc @apollo/client/v4-migration!Removals.removedType:type {"name":"Masked"} }
+ */
+export type Masked = never;
+
+/**
+ * {@inheritDoc @apollo/client/v4-migration!Removals.removedType:type {"name":"MaskedDocumentNode"} }
+ */
+export type MaskedDocumentNode = never;
+
 /**
  * {@inheritDoc @apollo/client/v4-migration!Removals.removedType:type {"name":"CommonOptions"} }
  */