HoudiniGraphql / houdini

The disappearing GraphQL client

Home Page:http://www.houdinigraphql.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

`houdini generate` misses `+layout.gql` queries

wlockiv opened this issue · comments

Describe the bug

ALL OF THIS INFO AND MORE IS IN THE README OF THE REPRO REPO

The Problem

The type houdini generate does not add +layout.gql query types to its children's generated ./.$houdini/PageData types. This is causing my svelte-check command to fail in CI/CD pipelines.

I've only been able to reproduce this in +layout.gql files within [param] routes.

The types DO seem to get generated AFTER the development server has been started.

Severity

serious, but I can work around it

Steps to Reproduce the Bug

Reproduction Steps

Clone the repro & Install Deps

$ git clone https://github.com/wlockiv/houdini-layout-issue-repro.git
$ cd houdini-layout-issue-repro
$ pnpm i

Simulate CI/CD pipeline command chain

I've made helper scripts called clean and reproduce:

# deletes the $houdini and .svelte-kit directories
$ pnpm run clean

#  basically runs my ci/cd pipeline commands in order
$ pnpm run reproduce

OR you can run them on your own:

# generate sveltekit types
$ pnpm svelte-kit sync

# generate houdini types
$ pnpm houdini generate

# run type checking on svelte files
$ pnpm svelte-check

Note the error emitted from svelte-check

houdini-layout-issue-repro/src/routes/[id]/+page.svelte:6:11
Error: Property 'FilmLayoutQuery' does not exist on type '{ RootLayoutQuery: RootLayoutQueryStore; }'. (ts)

    $: ({ FilmLayoutQuery } = data);
</script>

Reproduction

https://github.com/wlockiv/houdini-layout-issue-repro

commented

Hello,
First, thanks a lot for the reproduction, it helps to understand your issue.

I almost didn't remember that we have a manual houdini generate cmd.
With the houdini vite plugin, it should take care of everything for you.

In dev mode you do:

pnpm dev
pnpm svelte-check

In CI mode you do

pnpm build
pnpm svelte-check

I tried in your repo and seemed better than pnpm run reproduce.
Let us know.


Looking at the repo, I have a side note, I saw:

{#if $RootLayoutQuery.data?.allFilms?.films}
    {#each $RootLayoutQuery.data.allFilms.films as film}
        <p><a href="/{film?.id}">{film?.title}</a></p>
    {/each}
{/if}

Maybe this can be nice as well

{#each $RootLayoutQuery.data?.allFilms?.films ?? [] as film}
  <p><a href="/{film?.id}">{film?.title}</a></p>
{:else}
  No films!
{/each}

First, thanks a lot for the reproduction, it helps to understand your issue.

You're most welcome! It's the least I could do for soliciting free help!

I'll update my CI/CD pipeline and report back!

On the each/else blocks - is that behavior documented?? That's pretty cool but I can't find anything that describes what it's actually doing!

commented

Yeah, let us know 👍


https://svelte.dev/docs/logic-blocks#each

An each block can also have an {:else} clause, which is rendered if the list is empty.

{#each todos as todo}
  <p>{todo.text}</p>
{:else}
  <p>No tasks today!</p>
{/each}

And I do the ?? [] to have an empty array if it's null somewhere.
I love it ^^

It actually worked really well! Thank you!!