@apollo/client-ai-apps 0.7.2 → 0.7.4

package/integration-tests/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "integration-tests",
+  "private": true,
+  "type": "module",
+  "workspaces": [
+    "./graphql-server",
+    "./mock-app"
+  ],
+  "scripts": {
+    "build:lib": "npm run build --prefix ..",
+    "build:mock-app": "npm run build --workspace mock-app",
+    "pretest": "npm-run-all build:*",
+    "test": "playwright test"
+  },
+  "devDependencies": {
+    "@apollo/mcp-impostor-host": "^0.3.0",
+    "@playwright/test": "^1.59.1",
+    "npm-run-all": "^4.1.5"
+  }
+}

package/integration-tests/playwright.config.ts

@@ -0,0 +1,23 @@
+import { defineConfig } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "./tests",
+  globalTeardown: "./global-teardown.js",
+  webServer: [
+    {
+      command: "npx serve-impostor-host --playwright",
+      url: "http://localhost:8080",
+      reuseExistingServer: !process.env.CI,
+    },
+    {
+      command: "docker compose up --build",
+      url: "http://localhost:8000/health",
+      reuseExistingServer: !process.env.CI,
+    },
+  ],
+  workers: 1,
+  use: {
+    browserName: "chromium",
+    trace: "retain-on-failure",
+  },
+});

package/integration-tests/schema.graphql

@@ -0,0 +1,10 @@
+type Query {
+  hello: String!
+  echo(message: String!): String!
+  user: User
+}
+
+type User {
+  address: String
+  fullName: String
+}

package/integration-tests/tests/hello.spec.ts

@@ -0,0 +1,11 @@
+import { test } from "@apollo/mcp-impostor-host/playwright";
+import { expect } from "@playwright/test";
+
+const URL = "http://localhost:8000/mcp?app=mock-app&appTarget=mcp";
+
+test("renders data from a tool with no arguments", async ({ mcpHost }) => {
+  const connection = await mcpHost.connect({ url: URL });
+  const { appFrame } = await connection.callTool("Hello");
+
+  await expect(appFrame.getByTestId("greeting")).toHaveText("Hello, world!");
+});

package/integration-tests/tests/privateDirective.spec.ts

@@ -0,0 +1,73 @@
+import { test } from "@apollo/mcp-impostor-host/playwright";
+import { expect } from "@playwright/test";
+
+const URL = "http://localhost:8000/mcp?app=mock-app&appTarget=mcp";
+
+test("omits private field in structuredContent, but available to the view", async ({
+  mcpHost,
+}) => {
+  const connection = await mcpHost.connect({ url: URL });
+  const { result, appFrame } = await connection.callTool("SemiPrivate");
+
+  expect(result.structuredContent).toEqual({
+    result: {
+      data: {
+        user: {
+          __typename: "User",
+          fullName: "MCP User",
+        },
+      },
+    },
+    toolName: "SemiPrivate",
+  });
+
+  expect(result._meta).toEqual({
+    toolName: "SemiPrivate",
+    structuredContent: {
+      result: {
+        data: {
+          user: {
+            __typename: "User",
+            address: "1234 Main St",
+            fullName: "MCP User",
+          },
+        },
+      },
+      toolName: "SemiPrivate",
+    },
+  });
+
+  await expect(appFrame.getByTestId("fullName")).toHaveText("MCP User");
+  await expect(appFrame.getByTestId("address")).toHaveText("1234 Main St");
+});
+
+test("omits full selection sets, but available to the view", async ({
+  mcpHost,
+}) => {
+  const connection = await mcpHost.connect({ url: URL });
+  const { result, appFrame } = await connection.callTool("Private");
+
+  expect(result.structuredContent).toEqual({
+    result: { data: {} },
+    toolName: "Private",
+  });
+
+  expect(result._meta).toEqual({
+    toolName: "Private",
+    structuredContent: {
+      result: {
+        data: {
+          user: {
+            __typename: "User",
+            address: "1234 Main St",
+            fullName: "MCP User",
+          },
+        },
+      },
+      toolName: "Private",
+    },
+  });
+
+  await expect(appFrame.getByTestId("fullName")).toHaveText("MCP User");
+  await expect(appFrame.getByTestId("address")).toHaveText("1234 Main St");
+});

package/integration-tests/tests/variables.spec.ts

@@ -0,0 +1,24 @@
+import { test } from "@apollo/mcp-impostor-host/playwright";
+import { expect } from "@playwright/test";
+
+const URL = "http://localhost:8000/mcp?app=mock-app&appTarget=mcp";
+
+test("renders data from a tool with arguments", async ({ mcpHost }) => {
+  const connection = await mcpHost.connect({ url: URL });
+  const { result, appFrame } = await connection.callTool("Echo", {
+    message: "Hello!",
+  });
+
+  expect(result.structuredContent).toStrictEqual({
+    toolName: "Echo",
+    result: {
+      data: {
+        echo: "Hello! (Hello!)",
+      },
+    },
+  });
+  expect(result._meta).toStrictEqual({
+    toolName: "Echo",
+  });
+  await expect(appFrame.getByTestId("echo")).toHaveText("Hello! (Hello!)");
+});

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://www.schemastore.org/package.json",
   "name": "@apollo/client-ai-apps",
-  "version": "0.7.2",
+  "version": "0.7.4",
   "keywords": [
     "apollo",
     "graphql",
@@ -104,7 +104,7 @@
     "attw": "npm run build && attw --pack . --ignore-rules cjs-resolves-to-esm --profile node16"
   },
   "devDependencies": {
-    "@apollo/client": "^4.0.12",
+    "@apollo/client": "^4.1.7",
     "@arethetypeswrong/cli": "^0.18.2",
     "@modelcontextprotocol/ext-apps": "^1.0.1",
     "@testing-library/jest-dom": "^6.9.1",
@@ -119,6 +119,7 @@
     "esbuild": "^0.25.12",
     "graphql": "^16.12.0",
     "happy-dom": "^20.0.10",
+    "jiti": "^2.6.1",
     "memfs": "^4.56.10",
     "mock-require": "^3.0.3",
     "prettier": "^3.7.4",
@@ -144,9 +145,8 @@
     }
   },
   "dependencies": {
-    "@graphql-codegen/cli": "^6.1.3",
-    "@graphql-codegen/typescript": "^5.0.9",
-    "@graphql-codegen/typescript-operations": "^5.0.9",
+    "@graphql-codegen/cli": "^7.1.0",
+    "@graphql-codegen/typescript-operations": "^6.0.3",
     "@graphql-tools/graphql-tag-pluck": "^8.3.23",
     "@wry/equality": "^0.5.7",
     "cosmiconfig": "^9.0.0",

package/src/react/__tests__/createHydrationUtils.test.tsx

@@ -77,6 +77,68 @@ eachHostEnv((setupHost, ApolloClient) => {
     await expect(takeSnapshot).not.toRerender();
   });
 
+  test("returns tool input value when @tool name is defined by operation name", async () => {
+    using _ = spyOnConsole("debug");
+
+    const query: TypedDocumentNode<
+      { products: Array<{ __typename: "Product"; id: string }> },
+      { category: string; page: number; sortBy: string }
+    > = gql`
+      "Get products by category"
+      query Products($category: String!, $page: Int!, $sortBy: String!) @tool {
+        products(category: $category, page: $page, sortBy: $sortBy) {
+          id
+        }
+      }
+    `;
+
+    const client = new ApolloClient({
+      cache: new InMemoryCache(),
+      manifest: mockApplicationManifest({
+        operations: [parseManifestOperation(query)],
+      }),
+    });
+
+    using env = await setupHost({
+      client,
+      toolCall: {
+        name: "Products",
+        input: { category: "electronics", page: 1, sortBy: "title" },
+        result: { structuredContent: { result: { data: { products: [] } } } },
+      },
+    });
+    const { host, params } = env;
+
+    host.sendToolInput(params.toolInput);
+    host.sendToolResult(params.toolResult);
+
+    const { useHydratedVariables } = createHydrationUtils(query);
+
+    using _disabledAct = disableActEnvironment();
+    const { takeSnapshot } = await renderHookToSnapshotStream(
+      () =>
+        useHydratedVariables({
+          category: "music",
+          page: 1,
+          sortBy: "name",
+        }),
+      {
+        wrapper: ({ children }) => (
+          <ApolloProvider client={client}>{children}</ApolloProvider>
+        ),
+      }
+    );
+
+    const [variables] = await takeSnapshot();
+    expect(variables).toStrictEqual({
+      category: "electronics",
+      page: 1,
+      sortBy: "title",
+    });
+
+    await expect(takeSnapshot).not.toRerender();
+  });
+
   test("returns user-provided variables when tool name does not match", async () => {
     using _ = spyOnConsole("debug");
     const query = gql`

package/src/utilities/getToolNamesFromDocument.ts

@@ -1,15 +1,27 @@
 import { getOperationDefinition } from "@apollo/client/utilities/internal";
-import { Kind, type DocumentNode } from "graphql";
+import { Kind, type DirectiveNode, type DocumentNode } from "graphql";
 
 export function getToolNamesFromDocument(document: DocumentNode) {
   const operationDef = getOperationDefinition(document);
+  const operationName = operationDef?.name?.value;
+  const toolDirectives =
+    operationDef?.directives?.filter((d) => d.name.value === "tool") ?? [];
+
+  if (toolDirectives.length === 1) {
+    return new Set([
+      getToolNameFromDirective(toolDirectives[0]) ?? operationName,
+    ]);
+  }
 
   return new Set(
-    operationDef?.directives
-      ?.filter((d) => d.name.value === "tool")
-      .flatMap((d) => {
-        const nameArg = d.arguments?.find((arg) => arg.name.value === "name");
-        return nameArg?.value.kind === Kind.STRING ? [nameArg.value.value] : [];
-      })
+    toolDirectives.flatMap((d) => {
+      const name = getToolNameFromDirective(d);
+      return name ? [name] : [];
+    })
   );
 }
+
+function getToolNameFromDirective(directive: DirectiveNode) {
+  const nameArg = directive.arguments?.find((arg) => arg.name.value === "name");
+  return nameArg?.value.kind === Kind.STRING ? nameArg.value.value : undefined;
+}

package/src/vite/__tests__/apolloClientAiApps.test.ts

@@ -2061,43 +2061,16 @@ describe("tool input types", () => {
     );
     expect(content).toMatchInlineSnapshot(`
       "// Auto-generated by @apollo/client-ai-apps. Do not edit manually.
-      export type Maybe<T> = T | null;
-
-      export type InputMaybe<T> = Maybe<T>;
-
-      export type Exact<T extends {
+      /** Internal type. DO NOT USE DIRECTLY. */
+      type Exact<T extends {
         [key: string]: unknown;
       }> = {
         [K in keyof T]: T[K];
       };
 
-      /** All built-in and custom scalars, mapped to their actual values */
-      export type Scalars = {
-        ID: {
-          input: string;
-          output: string;
-        };
-        String: {
-          input: string;
-          output: string;
-        };
-        Boolean: {
-          input: boolean;
-          output: boolean;
-        };
-        Int: {
-          input: number;
-          output: number;
-        };
-        Float: {
-          input: number;
-          output: number;
-        };
-      };
-
       export type CreateTodoMutationVariables = Exact<{
-        title: Scalars["String"]["input"];
-        description?: InputMaybe<Scalars["String"]["input"]>;
+        title: string;
+        description?: string | null | undefined;
       }>;"
     `);
   });
@@ -2126,6 +2099,26 @@ describe("tool input types", () => {
     });
     await server.listen();
 
+    expect(
+      fs.readFileSync(
+        ".apollo-client-ai-apps/types/operation-types.d.ts",
+        "utf-8"
+      )
+    ).toMatchInlineSnapshot(`
+      "// Auto-generated by @apollo/client-ai-apps. Do not edit manually.
+      /** Internal type. DO NOT USE DIRECTLY. */
+      type Exact<T extends {
+        [key: string]: unknown;
+      }> = {
+        [K in keyof T]: T[K];
+      };
+
+      export type CreateTodoMutationVariables = Exact<{
+        title: string;
+        description?: string | null | undefined;
+      }>;"
+    `);
+
     const content = fs.readFileSync(
       ".apollo-client-ai-apps/types/register.d.ts",
       "utf-8"
@@ -2147,6 +2140,71 @@ describe("tool input types", () => {
     `);
   });
 
+  test("uses operation name and description for tool name/description when @tool is used without arguments", async () => {
+    vol.fromJSON({
+      "package.json": mockPackageJson(),
+      "src/my-component.tsx": declareOperation(gql`
+        """
+        Creates a todo
+        """
+        mutation CreateTodo($title: String!, $description: String) @tool {
+          createTodo(title: $title, description: $description) {
+            id
+          }
+        }
+      `),
+    });
+
+    await using server = await setupServer({
+      plugins: [
+        apolloClientAiApps({
+          targets: ["mcp"],
+          appsOutDir: "dist/apps",
+          schema,
+        }),
+      ],
+    });
+    await server.listen();
+
+    expect(
+      fs.readFileSync(
+        ".apollo-client-ai-apps/types/operation-types.d.ts",
+        "utf-8"
+      )
+    ).toMatchInlineSnapshot(`
+      "// Auto-generated by @apollo/client-ai-apps. Do not edit manually.
+      /** Internal type. DO NOT USE DIRECTLY. */
+      type Exact<T extends {
+        [key: string]: unknown;
+      }> = {
+        [K in keyof T]: T[K];
+      };
+
+      export type CreateTodoMutationVariables = Exact<{
+        title: string;
+        description?: string | null | undefined;
+      }>;"
+    `);
+
+    expect(
+      fs.readFileSync(".apollo-client-ai-apps/types/register.d.ts", "utf-8")
+    ).toMatchInlineSnapshot(`
+      "// This file is auto-generated by @apollo/client-ai-apps. Do not edit manually.
+      import "@apollo/client-ai-apps";
+
+      import type { CreateTodoMutationVariables } from "./operation-types.js";
+
+      declare module "@apollo/client-ai-apps" {
+        interface Register {
+          toolName: "CreateTodo";
+          toolInputs: {
+            CreateTodo: CreateTodoMutationVariables;
+          };
+        }
+      }"
+    `);
+  });
+
   test("generates register.d.ts with operations that contain fragments", async () => {
     vol.fromJSON({
       "package.json": mockPackageJson(),
@@ -2201,43 +2259,16 @@ describe("tool input types", () => {
       )
     ).toMatchInlineSnapshot(`
       "// Auto-generated by @apollo/client-ai-apps. Do not edit manually.
-      export type Maybe<T> = T | null;
-
-      export type InputMaybe<T> = Maybe<T>;
-
-      export type Exact<T extends {
+      /** Internal type. DO NOT USE DIRECTLY. */
+      type Exact<T extends {
         [key: string]: unknown;
       }> = {
         [K in keyof T]: T[K];
       };
 
-      /** All built-in and custom scalars, mapped to their actual values */
-      export type Scalars = {
-        ID: {
-          input: string;
-          output: string;
-        };
-        String: {
-          input: string;
-          output: string;
-        };
-        Boolean: {
-          input: boolean;
-          output: boolean;
-        };
-        Int: {
-          input: number;
-          output: number;
-        };
-        Float: {
-          input: number;
-          output: number;
-        };
-      };
-
       export type CreateTodoMutationVariables = Exact<{
-        title: Scalars["String"]["input"];
-        description?: InputMaybe<Scalars["String"]["input"]>;
+        title: string;
+        description?: string | null | undefined;
       }>;"
     `);
   });
@@ -2546,6 +2577,74 @@ describe("tool input types", () => {
       }"
     `);
   });
+
+  test("generates matching variable type names for operations with lowercase names", async () => {
+    vol.fromJSON({
+      "package.json": mockPackageJson(),
+      "src/my-component.tsx": declareOperation(gql`
+        "Creates a todo"
+        mutation createTodo($title: String!, $description: String) @tool {
+          createTodo(title: $title, description: $description) {
+            id
+          }
+        }
+      `),
+    });
+
+    await using server = await setupServer({
+      plugins: [
+        apolloClientAiApps({
+          targets: ["mcp"],
+          appsOutDir: "dist/apps",
+          schema,
+        }),
+      ],
+    });
+    await server.listen();
+
+    const operationTypes = fs.readFileSync(
+      ".apollo-client-ai-apps/types/operation-types.d.ts",
+      "utf-8"
+    );
+    const register = fs.readFileSync(
+      ".apollo-client-ai-apps/types/register.d.ts",
+      "utf-8"
+    );
+
+    // operation-types.d.ts should export a variables type for the operation.
+    expect(operationTypes).toMatchInlineSnapshot(`
+      "// Auto-generated by @apollo/client-ai-apps. Do not edit manually.
+      /** Internal type. DO NOT USE DIRECTLY. */
+      type Exact<T extends {
+        [key: string]: unknown;
+      }> = {
+        [K in keyof T]: T[K];
+      };
+
+      export type createTodoMutationVariables = Exact<{
+        title: string;
+        description?: string | null | undefined;
+      }>;"
+    `);
+
+    // register.d.ts must import the same variables type name that
+    // operation-types.d.ts exports.
+    expect(register).toMatchInlineSnapshot(`
+      "// This file is auto-generated by @apollo/client-ai-apps. Do not edit manually.
+      import "@apollo/client-ai-apps";
+
+      import type { createTodoMutationVariables } from "./operation-types.js";
+
+      declare module "@apollo/client-ai-apps" {
+        interface Register {
+          toolName: "createTodo";
+          toolInputs: {
+            createTodo: createTodoMutationVariables;
+          };
+        }
+      }"
+    `);
+  });
 });
 
 describe("html transforms", () => {

package/src/vite/apolloClientAiApps.ts

@@ -299,10 +299,11 @@ async function generateOperationTypes(
       documents,
       generates: {
         "operation-types.d.ts": {
-          plugins: ["typescript", "typescript-operations"],
+          plugins: ["typescript-operations"],
           config: {
             nonOptionalTypename: true,
             skipTypeNameForRoot: true,
+            namingConvention: "keep",
           } satisfies TypeScriptDocumentsPluginConfig,
         },
       },

package/vitest.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig } from "vitest/config";
+import { defineConfig, defaultExclude } from "vitest/config";
 import react from "@vitejs/plugin-react";
 
 export default defineConfig({
@@ -8,6 +8,7 @@ export default defineConfig({
     setupFiles: ["./vitest-setup.ts"],
     mockReset: true,
     unstubGlobals: true,
+    exclude: [...defaultExclude, "integration-tests/**"],
     tags: [
       {
         name: "flaky",