Fix mutation list operations not working when passing @with directi…

…ve (#1289)

.changeset/rotten-cobras-grin.md

@@ -0,0 +1,5 @@
+---
+'houdini': patch
+---
+
+Mutation list operations now work if you need to pass a `@with` directive to the fragment spread

e2e/kit/src/lib/utils/routes.ts

@@ -20,6 +20,7 @@ export const routes = {
 
   Lists_all: '/lists/all?limit=15',
   Lists_fragment: '/lists/fragment',
+  Lists_mutation_insert: '/lists/mutation-insert',
   blocking: '/blocking',
 
   Stores_SSR: '/stores/ssr',

e2e/kit/src/routes/lists/mutation-insert/+page.gql

@@ -0,0 +1,11 @@
+query UsersListMutationInsertUsers($someParam: Boolean!) {
+  usersConnection(first: 5, snapshot: "users-list-mutation-insert") @list(name: "MyList") {
+    edges {
+      node {
+        id
+        name
+        testField(someParam: $someParam)
+      }
+    }
+  }
+}

e2e/kit/src/routes/lists/mutation-insert/+page.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { graphql } from '$houdini';
+  import type { PageData } from './$houdini';
+
+  export let data: PageData;
+  $: ({ UsersListMutationInsertUsers } = data);
+
+  const addUserMutation = graphql(`
+    mutation UsersListMutationInsertAddUser($name: String!) {
+      addUser(
+        name: $name
+        birthDate: "2024-01-01T00:00:00Z"
+        snapshot: "users-list-mutation-insert"
+      ) {
+        id
+        ...MyList_insert @with(someParam: true) @prepend
+      }
+    }
+  `);
+
+  const addUser = async () => {
+    addUserMutation.mutate({
+      name: 'Test User'
+    });
+  };
+</script>
+
+<button id="addusers" on:click={addUser}>+ Add</button>
+
+<div id="result">
+  {#if $UsersListMutationInsertUsers.data}
+    <ul>
+      {#each $UsersListMutationInsertUsers.data.usersConnection.edges as userEdge}
+        <li>{userEdge.node?.name} - {userEdge.node?.testField}</li>
+      {/each}
+    </ul>
+  {/if}
+</div>

e2e/kit/src/routes/lists/mutation-insert/+page.ts

@@ -0,0 +1,7 @@
+import type { UsersListMutationInsertUsersVariables } from './$houdini';
+
+export const _UsersListMutationInsertUsersVariables: UsersListMutationInsertUsersVariables = () => {
+  return {
+    someParam: true
+  };
+};

e2e/kit/src/routes/lists/mutation-insert/spec.ts

@@ -0,0 +1,22 @@
+import { test } from '@playwright/test';
+import { routes } from '../../../lib/utils/routes.js';
+import { expect_to_be, goto, locator_click } from '../../../lib/utils/testsHelper.js';
+
+test('mutation list insert with @with directive', async ({ page }) => {
+  await goto(page, routes.Lists_mutation_insert);
+
+  // Verify the initial page data
+  await expect_to_be(
+    page,
+    'Bruce Willis - Hello worldSamuel Jackson - Hello worldMorgan Freeman - Hello worldTom Hanks - Hello worldWill Smith - Hello world'
+  );
+
+  // Add a user
+  await locator_click(page, `button[id="addusers"]`);
+
+  // Verify new user is at the top
+  await expect_to_be(
+    page,
+    'Test User - Hello worldBruce Willis - Hello worldSamuel Jackson - Hello worldMorgan Freeman - Hello worldTom Hanks - Hello worldWill Smith - Hello world'
+  );
+});

packages/houdini/src/codegen/generators/artifacts/operations.ts

@@ -28,8 +28,19 @@ export function operationsByPath(
 	// inside of the mutation could contain operations
 	graphql.visit(definition, {
 		FragmentSpread(node, _, __, ___, ancestors) {
+			// at this point, the fragment spread can contain the hashed parameters from an `@with` directive in it.
+			// if this fragment spread has a `@with` directive, strip the last `_asdf` from the name and check if that is a list fragment
+			let nameWithoutHash = node.name.value
+
+			if (
+				node.directives &&
+				node.directives.find((directive) => directive.name.value === 'with')
+			) {
+				nameWithoutHash = nameWithoutHash.substring(0, nameWithoutHash.lastIndexOf('_'))
+			}
+
 			// if the fragment is not a list operation, we don't care about it now
-			if (!config.isListFragment(node.name.value)) {
+			if (!config.isListFragment(nameWithoutHash)) {
 				return
 			}
 
@@ -44,8 +55,8 @@ export function operationsByPath(
 				operationObject({
 					config,
 					filepath,
-					listName: config.listNameFromFragment(node.name.value),
-					operationKind: config.listOperationFromFragment(node.name.value),
+					listName: config.listNameFromFragment(nameWithoutHash),
+					operationKind: config.listOperationFromFragment(nameWithoutHash),
 					type: parentTypeFromAncestors(config.schema, filepath, ancestors).name,
 					selection: node,
 				})