Fix fragment initial load in React Framework (#1173)

e2e/react/src/components/SponsorInfo.tsx

@@ -0,0 +1,19 @@
+import { graphql, useFragment, type SponsorInfo } from '$houdini'
+
+type Props = {
+	sponsor: SponsorInfo
+}
+
+export default function SponsorSummary(props: Props) {
+	const data = useFragment(
+		props.sponsor,
+		graphql(`
+			fragment SponsorInfo on Sponsor {
+				name
+				avatarUrl
+			}
+		`)
+	)
+
+	return <div>{data?.name}</div>
+}

e2e/react/src/routes/+page.gql

@@ -1,5 +1,6 @@
 query SponsorList {
 	sponsors {
 		name
+		...SponsorInfo
 	}
 }

e2e/react/src/routes/+page.tsx

@@ -1,5 +1,21 @@
+import { cache } from '$houdini/runtime'
+import SponsorInfo from '~/components/SponsorInfo'
+
 import type { PageProps } from './$types'
 
+if (globalThis.window) {
+	// @ts-ignore
+	window.cache = cache
+}
+
 export default function ({ SponsorList }: PageProps) {
-	return <div>{JSON.stringify(SponsorList)}</div>
+	return (
+		<div>
+			{SponsorList.sponsors.map((sponsor) => (
+				<div key={sponsor.name}>
+					<SponsorInfo sponsor={sponsor} />
+				</div>
+			))}
+		</div>
+	)
 }

packages/houdini-react/src/runtime/hooks/useFragment.ts

@@ -1,9 +1,9 @@
-import cache from '$houdini/runtime/cache'
 import { deepEquals } from '$houdini/runtime/lib/deepEquals'
 import { fragmentKey } from '$houdini/runtime/lib/types'
 import type { GraphQLObject, GraphQLVariables, FragmentArtifact } from '$houdini/runtime/lib/types'
 import * as React from 'react'
 
+import { useRouterContext } from '../routing'
 import { useDeepCompareMemoize } from './useDeepCompareEffect'
 import { useDocumentSubscription } from './useDocumentSubscription'
 
@@ -15,6 +15,8 @@ export function useFragment<
 	reference: _Data | { [fragmentKey]: _ReferenceType } | null,
 	document: { artifact: FragmentArtifact }
 ) {
+	const { cache } = useRouterContext()
+
 	// get the fragment reference info
 	const { parent, variables, loading } = fragmentReference<_Data, _Input, _ReferenceType>(
 		reference,
@@ -46,10 +48,7 @@ export function useFragment<
 			stuff: {
 				parentID: parent,
 			},
-			// setup = true?
-			// we don't need to do the first read because we
-			// have an initial value...
-			// does Boolean(initialValue) === { setup: true }
+			setup: true,
 		},
 	})
 

turbo.json

@@ -5,7 +5,7 @@
 			"dependsOn": ["^compile"]
 		},
 		"typedefs": {
-			"dependsOn": ["^typedefs"]
+			"dependsOn": ["^typedefs", "^compile"]
 		},
 		"build": {
 			"dependsOn": ["typedefs", "compile"]