Improve support for unions and interfaces (#747)

* 🚸 UPDATE: tentative repro #731

* 🚸 NEW: e2e tests for union-result

* use inline snapshots for artifact tests

* subscription selection includes fields and type-dependent fields indepdently

* update tests

* fix type errors

* update snapshots

* fix unsubscribe tests

* fix few bugs

* all tests pass

* failing test for abstract fields

* can read and write abstract fields

* reading, writing, and subscribing to abstract selections

* simplify selection walk when subscribing

* update snapshots

* flattenSelection flattens inline fragments

* embed typeMap in abstract selection

* comment

* fix list operations

* dry up selection lookup for a type

* tweak

* avoid infinite recursion

* changeset

* remove unused imports

* ignore masking for generating selections

* only ignore masking for queries

* test for interface to interface inline fragment

* update snapshot

Co-authored-by: jycouet <[email protected]>

.changeset/green-buckets-type.md

@@ -0,0 +1,6 @@
+---
+'houdini': patch
+'houdini-svelte': patch
+---
+
+Fix issue when working with unions and interfaces

e2e/_api/graphql.mjs

@@ -153,6 +153,34 @@ export const resolvers = {
 		cities: () => {
 			return cities
 		},
+		userNodesResult: async (_, args) => {
+			if (args.forceMessage) {
+				return {
+					message: `snapshot:${args.snapshot}`,
+					__typename: 'Message1',
+				}
+			}
+
+			const allData = [...getSnapshot(args.snapshot)]
+			return {
+				totalCount: allData.length,
+				nodes: allData.splice(args.offset || 0, args.limit || 10),
+				__typename: 'UserNodes',
+			}
+		},
+		userResult: async (_, args) => {
+			if (args.forceMessage) {
+				return {
+					message: `snapshot:${args.snapshot}`,
+					__typename: 'Message1',
+				}
+			}
+
+			const user = getSnapshot(args.snapshot).find(
+				(c) => c.id === `${args.snapshot}:${args.id}`
+			)
+			return { ...user, __typename: 'User' }
+		},
 	},
 
 	User: {

e2e/_api/schema.graphql

@@ -60,6 +60,8 @@ type Query {
 	userNodes(limit: Int = 4, offset: Int, snapshot: String!): UserNodes!
 	session: String
 	cities: [City]!
+	userNodesResult(snapshot: String!, forceMessage: Boolean!): UserNodesResult!
+	userResult(id: ID!, snapshot: String!, forceMessage: Boolean!): UserResult!
 }
 
 type Subscription {
@@ -107,3 +109,10 @@ type City {
 	name: String!
 	libraries: [Library]!
 }
+
+union UserNodesResult = UserNodes | Message1
+union UserResult = User | Message1
+
+type Message1 {
+	message: String!
+}

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

@@ -8,6 +8,7 @@ export const routes = {
   isFetching_without_load: '/isFetching/without_load',
   isFetching_route_1: '/isFetching/route_1',
   lists_all: '/lists-all?limit=15',
+  union_result: '/union-result',
 
   Stores_SSR: '/stores/ssr',
   Stores_Network: '/stores/network',

e2e/sveltekit/src/routes/union-result/+page.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  import UserNodesResult from './UserNodesResult.svelte';
+  import UserResult from './UserResult.svelte';
+</script>
+
+<UserNodesResult />
+
+<UserResult id="1" />

e2e/sveltekit/src/routes/union-result/UserNodesResult.gql

@@ -0,0 +1,14 @@
+query UserNodesResult($forceMessage: Boolean!) {
+  userNodesResult(snapshot: "union-result", forceMessage: $forceMessage) {
+    ... on UserNodes {
+      totalCount
+      nodes {
+        id
+        name
+      }
+    }
+    ... on Message1 {
+      message
+    }
+  }
+}

e2e/sveltekit/src/routes/union-result/UserNodesResult.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { CachePolicy, GQL_UserNodesResult } from '$houdini';
+
+  async function getAllUsers() {
+    await GQL_UserNodesResult.fetch({
+      variables: { forceMessage: false },
+      policy: CachePolicy.CacheAndNetwork
+    });
+  }
+</script>
+
+<button id="getAllUsers" on:click={getAllUsers}>GET AllUsers</button>
+
+<div id="result">
+  <pre>{JSON.stringify($GQL_UserNodesResult?.data, null, 2)}</pre>
+</div>

e2e/sveltekit/src/routes/union-result/UserResult.gql

@@ -0,0 +1,11 @@
+query UserResult($id: ID!, $forceMessage: Boolean!) {
+  userResult(snapshot: "union-result", forceMessage: $forceMessage, id: $id) {
+    ... on User {
+      id
+      name
+    }
+    ... on Message1 {
+      message
+    }
+  }
+}

e2e/sveltekit/src/routes/union-result/UserResult.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { CachePolicy, GQL_UserResult } from '$houdini';
+
+  export let id: string;
+
+  async function getUser() {
+    await GQL_UserResult.fetch({
+      variables: { id, forceMessage: false },
+      policy: CachePolicy.NetworkOnly
+    });
+  }
+</script>
+
+<button id="getUser" on:click={getUser}>GET User</button>
+
+<pre>{JSON.stringify($GQL_UserResult?.data, null, 2)}</pre>

e2e/sveltekit/src/routes/union-result/spec.ts

@@ -0,0 +1,70 @@
+import { expect, test } from '@playwright/test';
+import { routes } from '../../lib/utils/routes.js';
+import { expectToBe, expect_1_gql, goto } from '../../lib/utils/testsHelper.js';
+
+test.describe('union-result', () => {
+  test('Get two stores and not resetting', async ({ page }) => {
+    await goto(page, routes.union_result);
+
+    // When we arrive on the page, we expect to see null in the result div
+    await expectToBe(page, 'null');
+
+    // we click on the button to getAllUsers
+    await expect_1_gql(page, 'button[id="getAllUsers"]');
+
+    const data = {
+      userNodesResult: {
+        totalCount: 8,
+        nodes: [
+          {
+            id: 'union-result:1',
+            name: 'Bruce Willis'
+          },
+          {
+            id: 'union-result:2',
+            name: 'Samuel Jackson'
+          },
+          {
+            id: 'union-result:3',
+            name: 'Morgan Freeman'
+          },
+          {
+            id: 'union-result:4',
+            name: 'Tom Hanks'
+          },
+          {
+            id: 'union-result:5',
+            name: 'Will Smith'
+          },
+          {
+            id: 'union-result:6',
+            name: 'Harrison Ford'
+          },
+          {
+            id: 'union-result:7',
+            name: 'Eddie Murphy'
+          },
+          {
+            id: 'union-result:8',
+            name: 'Clint Eastwood'
+          }
+        ],
+        __typename: 'UserNodes'
+      }
+    };
+
+    // expect data (of AllUsers) to be displayed
+    await expectToBe(page, JSON.stringify(data, null, 2));
+
+    // we click on the button to getAllUsers
+    const res = await expect_1_gql(page, 'button[id="getUser"]');
+
+    // expect data (of User) to be returned
+    expect(res).toBe(
+      `{"data":{"userResult":{"__typename":"User","id":"union-result:1","name":"Bruce Willis"}}}`
+    );
+
+    // expect data (of AllUsers) to still be here and displayed
+    await expectToBe(page, JSON.stringify(data, null, 2));
+  });
+});

packages/houdini-svelte/src/runtime/stores/query.ts

@@ -85,7 +85,10 @@ export class QueryStore<
 		const config = await this.getConfig()
 
 		// validate and prepare the request context for the current environment (client vs server)
-		const { policy, params, context } = await fetchParams(this.artifact, this.storeName, args)
+		// make a shallow copy of the args so we don't mutate the arguments that the user hands us
+		const { policy, params, context } = await fetchParams(this.artifact, this.storeName, {
+			...args,
+		})
 
 		// identify if this is a CSF or load
 		const isLoadFetch = Boolean('event' in params && params.event)