PageData is not a single type

[samuel-utbult-oborgen]

Describe the bug

Suppose your app.d.ts file looks like this:

declare namespace App {
	// interface Locals {}
	interface PageData {
		valueFromLoad: string;
	}
	// interface Error {}
	// interface Platform {}
}

And suppose you have a layout file like this:

export function load(event: LoadEvent) {
    return {
        valueFromLoad: "Value from load"
    };
}

Then, you would have a view looking like this:

<script lang="ts">
    import type { PageData } from "./$houdini";

    export let data: PageData;

    $: ({ GetEntries, valueFromLoad } = data);
</script>

{$valueFromLoad}

// And use $GetEntries.data somehow.

This is possible to run but TypeScript complains that valueFromLoad cannot be found even though it has been specified in App.PageData. I can circumvent this problem by writing this:

<script lang="ts">
    import type { PageData as HoudiniPageData } from "./$houdini";
    import type { PageData } from "./$types";

    export let data: any;

    $: ({ GetShips } = data as HoudiniPageData);
    $: ({ valueFromLoad } = data as PageData);
</script>

When inspecting the corresponding $houdini.d.ts file, I see this:

import type { PageLoadEvent, PageData as KitPageData } from './$types'

export type PageData = {
		GetShips: GetShipsStore
}

KitPageData is what I referred to above as PageData. Shouldn't the file look something like the code below?

import type { PageLoadEvent, PageData as KitPageData } from './$types'

export type PageData = KitPageData & {
		GetShips: GetShipsStore
}

I wanted to give you a Stackbliz link but I can't get any public API I found to work. I hope this description makes it possible to reproduce the problem though.

Severity

serious, but I can work around it

Steps to Reproduce the Bug

See above.

Reproduction

No response

[jycouet]

Hello,
Thx for reaching out.

In general (not houdini specific) I think that it's not a good idea to define PageData in app.d.ts because you will probably have more than one route with more than one kind of type to return.
In kit, you will get automatically PageData within each route.

If you are interested in having your data + houdini's store, you could have a look at https://www.houdinigraphql.com/api/query "Manual Loading".

Let us know if I missed something. 👍

Side note, I use the star wars public api to demo things like in https://github.com/jycouet/svienna_22_10

[samuel-utbult-oborgen]

Thank you for your quick answer. Notice that the load function belongs to a layout file and not a page file (that as you say would have to do manual loading, which I am not interested in). I read up on what SvelteKit describes about layout data (https://kit.svelte.dev/docs/load#layout-data) and it describes that layout data accessed from pages should still use PageData (only the same layout can use LayoutData). Therefore, I think it's a bit misleading that Houdini also exports a type called PageData even though it does not inherit the PageData normally used in SvelteKit, requiring this kind of "as" import.

At least I found a shorter workaround:

export let data: PageData & HoudiniPageData;
$: ({ GetShips, valueFromLoad } = data);

I will check out the Star Wars API next time I have to use a public GraphQL API. 😉

[AlecAivazis]

Just to add my 2 cents here: I agree it's slightly misleading to not have kit's PageData mixed into the generated type. @sjcobb2022 is working on this exact thing so things should feel better in the near future

[AlecAivazis]

Closing this since #673 is merged. It will be included in the next release.

Thanks for being patient @samuel-utbult-oborgen