Houdini fails to load data on initial query

[aawnu]

Describe the bug

Hello,

I have a persisting issue that I have no clue how to get rid of. I have tried redoing my app and various different things. Hope one of you can help me.

// src/lib/query.ts
import {graphql} from '$houdini'

export const GqlQuery = () => {
  return graphql(`...`)
}

// src/routes/+page.ts
import type {PageLoad} = './$houdini'
import {GqlQuery} from '$lib/query'

export const load: PageLoad = async (event) => {
  const q = GqlQuery()
  const {data} = await q.fetch({event})
  return {name: data?.query}
}

<script lang="ts">
  export let data
  console.log(data)
</script>

test

Half the requests I receive expected data and half the time i receive null/undefined.

I do not have the means to make a repo with the error as I do not have a scenario not work-related.

// houdini.config.js
const config = {
  watchSchema: {}, // have removed as schema.graphql is imported directly
  scalars: {},
  defaultCachePolicy: "NoCache"
}

The issue is, when I load the page, it seems like it loads the query but never gets to the frontend, if I then refresh the page (F5 or ctrl+r) then it appears corectly. I am not sure if the load order is weird in some way, so I double checked these too

// vite.config.ts
import {sveltekit} from '@sveltejs/kit/vite'
import {defineConfig} from 'vite'
import houdini from 'houdini/vite'

export default definedConfig({
  plugins: [houdini(), sveltekit()],
})

// src/client.ts
import {HoudiniClient} from '$houdini'
import {GraphUrl} from '$lib/urls' // resolves url from .env

export default new HoudiniClient({
  url: GraphUrl(),
  fetchParams({session}) {
    return {headers:{Authentication: 'bearer ${sesssion?.auth...}'}} // Using auth0.js for oauth
  }
})

Reproduction

No response

[jycouet]

Looking quickly at

// src/routes/+page.ts
import type {PageLoad} = './$houdini'
import {GqlQuery} from '$lib/query'

export const load: PageLoad = async (event) => {
  const q = GqlQuery()
  const {data} = await q.fetch({event})
  return {name: data?.query}
}

It seems that you want your data directly in your load function. Therefore you would need to add blocking: true in the fetch. Something like:

 const {data} = await q.fetch({event, blocking: true})

You can check this part of the doc if you want to learn more about this behavior:
https://houdinigraphql.com/api/query#loading-states

---

Side note: It's not really the "default" way of working with Houdini (it's possible and valid in some use-cases 👍). Maybe you wanna look at https://houdinigraphql.com/intro to see other ways?

[aawnu]

I will have another look at loading states, seems I might have skipped something or misunderstood some things. Thank you for the quick reply on the 'blocking' parameter. I will try that as well.

I'll keep this issue open while testing and close if it seems to solve the issue at hand.