chore: upgrade to Houdini 2.0 / houdini-svelte 3.0 by rbjornstad · Pull Request #514 · nais/console-frontend

rbjornstad · 2026-06-27T11:37:43Z

Summary

Upgrades Houdini from 1.x to 2.0.1 and houdini-svelte from 2.x to 3.0.1.

Key Changes

Houdini 2.0 Migration

Non-exhaustive types: Houdini 2.0 adds a { __typename: "non-exhaustive; don't match this" } catch-all variant to every interface/union result type. Used exhaustive() utility and index-based {#each} keys where needed.
Flat fragment types: Fragment types on interfaces are now flat objects with nullable type-keyed properties instead of discriminated unions. Added runtime flatten helper in ActivityLogListItem and updated ActivityLogEntry type.
Runtime URL config: HoudiniClient no longer accepts url — moved to houdini.config.js (url: '/graphql').
Explicit __typename: Houdini 2.0 no longer auto-injects __typename into store values for inline fragments. Added explicitly to queries that rely on it.
verbatimModuleSyntax workaround: Disabled in tsconfig due to Houdini codegen bug (emits import {} instead of import type {}). Added TODO to re-enable once fixed upstream.
Type assertion for SSE subscription: Added cast for handlers.next due to GraphQLError type mismatch between graphql-sse and Houdini's re-exported type.

Files Changed

houdini.config.js — added top-level url: '/graphql', restored forceRunesMode: true
tsconfig.json — disabled verbatimModuleSyntax, added isolatedModules
package.json / pnpm-lock.yaml — dependency upgrades
src/client.ts — type assertion for SSE handlers
src/routes/userInfo.gql — explicit __typename
src/routes/+layout.svelte, +layout.ts — compatibility fixes
src/lib/utils/houdini.ts — new exhaustive() utility
src/lib/domain/activity/shared/texts/types.ts — updated ActivityLogEntry for flat fragment types
src/lib/domain/list-items/ActivityLogListItem.svelte — runtime flatten for text components
Various components — non-exhaustive type fixes

Known Issues

Houdini codegen bug: .houdini/graphql/inputs.ts uses import {} instead of import type {} — tracked upstream
Other queries using __typename on unions may need explicit __typename added (same pattern as userInfo.gql fix)

Testing

pnpm run check passes (0 errors in user code)
Dev server runs successfully with nais api proxy
Page header renders correctly after explicit __typename fix

Copilot

Pull request overview

Upgrades the app’s GraphQL toolchain to Houdini 2.0.x / houdini-svelte 3.0.x and applies the required migration changes across routes and UI components (non-exhaustive variants, flat interface-fragment shapes, explicit __typename, and updated type imports).

Changes:

Bumped Houdini + related dependencies and adjusted build/runtime configuration (Houdini config URL, TS compiler flags, workspace pnpm settings, Docker base image).
Updated queries/components to handle Houdini 2.0’s non-exhaustive union/interface variants and masking behavior (more inline-fragment field selection, exhaustive() helper, index keys in {#each} where needed).
Refactored issue/activity log UI code to work with flat interface-fragment result shapes and Houdini runtime types.

Reviewed changes

Copilot reviewed 69 out of 72 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
tsconfig.json	Disables `verbatimModuleSyntax` (workaround for Houdini codegen) and enables `isolatedModules`.
src/routes/userInfo.gql	Adds explicit `__typename` on `me` selection.
src/routes/team/[team]/valkey/create/+page.svelte	Switches Houdini `$houdini`-generated route props typing to SvelteKit `$types`.
src/routes/team/[team]/valkey/+page.ts	Moves filter type import to `$houdini/graphql/inputs`.
src/routes/team/[team]/unleash/+page.svelte	Replaces local `GraphQLError` type with `houdini/runtime`’s `GraphQLError`.
src/routes/team/[team]/settings/service_accounts/[serviceAccountID]/token/create/+page.svelte	Switches to `$types` props typing.
src/routes/team/[team]/settings/service_accounts/[serviceAccountID]/binding/add/+page.svelte	Switches to `$types` props typing.
src/routes/team/[team]/settings/confirm_delete/+page.svelte	Uses `QueryResult` from `houdini/runtime` instead of `$houdini`.
src/routes/team/[team]/settings/+page.svelte	Uses `QueryResult` from `houdini/runtime` instead of `$houdini`.
src/routes/team/[team]/secrets/+page.ts	Moves filter type import to `$houdini/graphql/inputs`.
src/routes/team/[team]/repositories/+page.ts	Moves filter type import to `$houdini/graphql/inputs`.
src/routes/team/[team]/postgres/+page.ts	Moves filter type import to `$houdini/graphql/inputs`.
src/routes/team/[team]/opensearch/create/+page.svelte	Switches to `$types` props typing.
src/routes/team/[team]/opensearch/+page.ts	Moves filter type import to `$houdini/graphql/inputs`.
src/routes/team/[team]/members/AddMember.svelte	Moves input type import to `$houdini/graphql/inputs`.
src/routes/team/[team]/kafka/+page.ts	Moves filter type import to Houdini inputs (note: currently uses `.js` extension).
src/routes/team/[team]/jobs/+page.ts	Moves filter type import to `$houdini/graphql/inputs`.
src/routes/team/[team]/issues/+page.ts	Moves filter type import to `$houdini/graphql/inputs`.
src/routes/team/[team]/configs/+page.ts	Moves filter type import to `$houdini/graphql/inputs`.
src/routes/team/[team]/buckets/+page.ts	Moves filter type import to `$houdini/graphql/inputs`.
src/routes/team/[team]/bigquery/+page.ts	Moves filter type import to `$houdini/graphql/inputs`.
src/routes/team/[team]/applications/+page.ts	Moves filter type import to `$houdini/graphql/inputs`.
src/routes/team/[team]/alerts/query.gql	Duplicates fields into the concrete inline fragment selections for masked typing.
src/routes/team/[team]/alerts/PrometheusAlarmDetail.svelte	Moves `ValueOf` to `houdini/runtime`.
src/routes/team/[team]/alerts/+page.ts	Moves filter type import to `$houdini/graphql/inputs`.
src/routes/team/[team]/activity-log/+page.ts	Moves filter type import to `$houdini/graphql/inputs`.
src/routes/team/[team]/[env]/valkey/[valkey]/edit/+page.svelte	Switches to `$types` props typing.
src/routes/team/[team]/[env]/valkey/[valkey]/edit/+page.server.ts	Moves input type import to `$houdini/graphql/inputs`.
src/routes/team/[team]/[env]/valkey/[valkey]/delete/+page.svelte	Switches to `$types` props typing.
src/routes/team/[team]/[env]/postgres/[postgres]/delete/+page.svelte	Switches to `$types` props typing.
src/routes/team/[team]/[env]/opensearch/[opensearch]/edit/+page.svelte	Switches to `$types` props typing and reorders imports.
src/routes/team/[team]/[env]/opensearch/[opensearch]/edit/+page.server.ts	Moves input type import to `$houdini/graphql/inputs`.
src/routes/team/[team]/[env]/opensearch/[opensearch]/delete/+page.svelte	Switches to `$types` props typing.
src/routes/team/[team]/[env]/job/[job]/logs/query.gql	Reworks log destination selections for Houdini 2.0 masking/non-exhaustive behavior.
src/routes/team/[team]/[env]/job/[job]/logs/JobLogs.svelte	Replaces manual `$props()` typing with generated `$result` type.
src/routes/team/[team]/[env]/job/[job]/issues/+page.ts	Moves filter type import to `$houdini/graphql/inputs`.
src/routes/team/[team]/[env]/job/[job]/activity-log/+page.ts	Moves filter type import to `$houdini/graphql/inputs`.
src/routes/team/[team]/[env]/app/[app]/utilization/query.gql	Adjusts interface inline fragments to include needed shared fields per variant.
src/routes/team/[team]/[env]/app/[app]/utilization/+page.svelte	Uses new `exhaustive()` helper and updates field access from aliased shapes.
src/routes/team/[team]/[env]/app/[app]/resize/+page.svelte	Switches to `$types` props typing.
src/routes/team/[team]/[env]/app/[app]/logs/Logs.svelte	Uses generated `$result` type and switches `{#each}` keys to indexes for safety.
src/routes/team/[team]/[env]/app/[app]/issues/+page.ts	Moves filter type import to `$houdini/graphql/inputs`.
src/routes/team/[team]/[env]/app/[app]/image/+page.svelte	Switches to `$types` props typing.
src/routes/team/[team]/[env]/app/[app]/activity-log/+page.ts	Moves filter type import to `$houdini/graphql/inputs`.
src/routes/deployments/+page.ts	Moves filter type import to `$houdini/graphql/inputs`.
src/routes/admin/userSyncLog/query.gql	Refactors inline fragments for masking (but currently omits `__typename`).
src/routes/admin/userSyncLog/+page.svelte	Uses `exhaustive()` and index keys for iteration over union/interface results.
src/routes/admin/teams/+page.ts	Moves filter type import to `$houdini/graphql/inputs`.
src/routes/admin/service_accounts/[serviceAccountID]/token/create/+page.svelte	Switches to `$types` props typing.
src/routes/admin/service_accounts/[serviceAccountID]/binding/add/+page.svelte	Switches to `$types` props typing.
src/routes/admin/+layout.svelte	Switches to `$types` props typing.
src/routes/+layout.svelte	Switches to `$types` props typing.
src/lib/utils/houdini.ts	Adds `exhaustive()` + `Exhaustive<T>` helper for Houdini non-exhaustive variants.
src/lib/domain/vulnerability/SuppressFinding.svelte	Moves `ValueOf` to `houdini/runtime`.
src/lib/domain/vulnerability/BulkSuppressCVE.svelte	Moves `ValueOf` to `houdini/runtime`.
src/lib/domain/list-items/IssueListItem.svelte	Updates issue fragment handling for flat interface-fragment types.
src/lib/domain/list-items/DeploymentWithTeamListItem.svelte	Moves `ValueOf` to `houdini/runtime`.
src/lib/domain/list-items/DeploymentListItem.svelte	Moves `ValueOf` to `houdini/runtime`.
src/lib/domain/list-items/ActivityLogListItem.svelte	Adds runtime flattening to adapt flat interface fragment data for text components.
src/lib/domain/issues/CriticalIssueRow.svelte	Updates issue discrimination logic for flat interface-fragment types.
src/lib/domain/activity/TeamActivityCard.svelte	Moves `ActivityLogFilter` input type to `$houdini/graphql/inputs`.
src/lib/domain/activity/shared/texts/types.ts	Refactors `ActivityLogEntry<T>` typing to match flat type-keyed fragment shape.
src/lib/domain/activity/shared/texts/PostgresDeletedActivityLogEntryText.svelte	Broadens prop typing to `ActivityLogEntryFragment$data` to fit new fragment shape.
src/lib/domain/activity/shared/texts/DefaultText.svelte	Broadens prop typing to `ActivityLogEntryFragment$data` to fit new fragment shape.
src/client.ts	Removes per-client URL config and adds a type assertion for SSE handler compatibility.
src/app.d.ts	Adds global `GraphQLErrorExtensions.code` typing.
pnpm-workspace.yaml	Updates pnpm workspace build allowances and minimum release age exclusions for Houdini packages.
package.json	Updates dependency versions, including Houdini 2.0.1 / houdini-svelte 3.0.1.
pnpm-lock.yaml	Lockfile updates corresponding to dependency upgrades.
houdini.config.js	Sets `url: '/graphql'` and adjusts plugin config for new Houdini/houdini-svelte behavior.
Dockerfile	Switches base image from Alpine to the default Node image.
AGENTS.md	Documents Houdini 2.0 migration rules (non-exhaustive types + interface fragments).

Copilot

Pull request overview

Copilot reviewed 69 out of 72 changed files in this pull request and generated 2 comments.

Copilot

Pull request overview

Copilot reviewed 69 out of 72 changed files in this pull request and generated 4 comments.

Copilot

Pull request overview

Copilot reviewed 72 out of 75 changed files in this pull request and generated 3 comments.

…i packages

… bug

…ls, Dockerfile

…structure logDestinations query

… fragments

… in metadata query

… from tsconfig

Copilot

Pull request overview

Copilot reviewed 72 out of 74 changed files in this pull request and generated 3 comments.

+		const enumLike = activeTypeName
 			.replace(/Issue$/, '')
 			.replace(/([a-z])([A-Z])/g, '$1_$2')
 			.toUpperCase();
-		return issueTypeLabel(typeName);
+		return issueTypeLabel(enumLike);


+		"houdini": "2.0.2",
+		"houdini-svelte": "3.0.1",


+1. **No `__typename`** — use the type-keyed nullable properties as discriminators:
+
+   ```typescript
+   // Wrong — __typename doesn't exist on the flat fragment type
+   if ($data.__typename === 'DeprecatedIngressIssue') { ... }
+
+   // Correct — check the nullable type-keyed property
+   if ($data.DeprecatedIngressIssue) { ... }
+   ```


rbjornstad force-pushed the poc/houdini-upgrade branch from 56a957b to 6a37c6b Compare June 27, 2026 11:40

rbjornstad requested review from Copilot and thokra-nav June 27, 2026 11:49

Copilot started reviewing on behalf of rbjornstad June 27, 2026 11:49 View session

Copilot AI reviewed Jun 27, 2026

View reviewed changes

rbjornstad requested a review from Copilot June 27, 2026 16:19

Copilot started reviewing on behalf of rbjornstad June 27, 2026 16:19 View session

Copilot AI reviewed Jun 27, 2026

View reviewed changes

Comment thread src/routes/team/[team]/[env]/job/[job]/logs/query.gql

Comment thread src/routes/admin/userSyncLog/+page.svelte Outdated

rbjornstad force-pushed the poc/houdini-upgrade branch from ecf802e to 7034189 Compare June 29, 2026 08:49

rbjornstad requested a review from Copilot June 29, 2026 08:56

Copilot started reviewing on behalf of rbjornstad June 29, 2026 08:57 View session

Copilot AI reviewed Jun 29, 2026

View reviewed changes

Comment thread src/routes/team/[team]/[env]/app/[app]/utilization/query.gql

Comment thread src/routes/team/[team]/[env]/app/[app]/logs/Logs.svelte Outdated

Comment thread pnpm-workspace.yaml

Comment thread houdini.config.js

rbjornstad requested a review from Copilot June 29, 2026 09:25

Copilot started reviewing on behalf of rbjornstad June 29, 2026 09:25 View session

Copilot AI reviewed Jun 29, 2026

View reviewed changes

Comment thread src/lib/domain/list-items/ActivityLogListItem.svelte

Comment thread package.json

Comment thread houdini.config.js

rbjornstad force-pushed the poc/houdini-upgrade branch from c4bb46f to 5b3c979 Compare June 29, 2026 14:01

rbjornstad and others added 14 commits June 30, 2026 14:00

chore: update pnpm workspace configuration to allow builds for houdin…

c1275ab

…i packages

Some changes

93672f1

some more changes

9f696dd

some more changes, part 2

992791b

some more changes, part 3

09027ec

some more changes, part 4

4f2fc21

some more changes, part 5

0e0e406

some more changes, part 6

46bfe40

some more changes, part 7

aa05b37

some more changes, part 8

7574082

some more changes, part 9

ef9ff6b

some more changes, part 10

a4b9d75

refactor: add type assertion for handlers.next in sseSockets function

2fd561a

chore: disable verbatimModuleSyntax as workaround for Houdini codegen…

7266731

… bug

rbjornstad added 12 commits June 30, 2026 14:01

fix: set runtime url in houdini config for API requests

b052761

fix: add explicit __typename to UserInfo query for Houdini 2.0

ea0864f

fix: change base image to node for node-with-deps in Dockerfile

442bf05

fix: address review comments - __typename, import path, fallback labe…

6dfcb59

…ls, Dockerfile

fix: add id to LogDestinationGeneric, use entry.id as key in userSyncLog

49b5f8c

chore: update dependencies (sveltekit, eslint-plugin-unicorn, vitest)

bd025c4

fix: address Copilot review - add __typename to utilization query, re…

7341f2d

…structure logDestinations query

fix: address review - use __typename as key, restore forceRunesMode

8d756cc

fix: add WorkloadProblemIssue and UnleashReleaseChannelIssue to issue…

49c6997

… fragments

fix: update GraphQL fragments to include 'id' and adjust cache policy…

70480af

… in metadata query

fix: upgrade houdini to version 2.0.2 and remove verbatimModuleSyntax…

4e99175

… from tsconfig

fix: refactor issue handling and remove unused metadata query

0aca027

rbjornstad force-pushed the poc/houdini-upgrade branch from 5b3c979 to 0aca027 Compare June 30, 2026 13:29

rbjornstad requested a review from Copilot June 30, 2026 13:41

Copilot started reviewing on behalf of rbjornstad June 30, 2026 13:41 View session

Copilot AI reviewed Jun 30, 2026

View reviewed changes

Uh oh!

Conversation

rbjornstad commented Jun 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Key Changes

Houdini 2.0 Migration

Files Changed

Known Issues

Testing

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

rbjornstad commented Jun 27, 2026 •

edited

Loading