@apollo/client-ai-apps 0.7.2 → 0.7.3

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.3",
   "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",

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/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",