From 09eddb4599d4f6c90097c6c55fcdcf79d3af03d4 Mon Sep 17 00:00:00 2001
From: Alec Aivazis <alec@aivazis.com>
Date: Sun, 24 Sep 2023 21:44:17 -0700
Subject: [PATCH] Fix fragment initial load in React Framework (#1173)

---
 e2e/react/src/components/SponsorInfo.tsx      | 19 +++++++++++++++++++
 e2e/react/src/routes/+page.gql                |  1 +
 e2e/react/src/routes/+page.tsx                | 18 +++++++++++++++++-
 .../src/runtime/hooks/useFragment.ts          |  9 ++++-----
 turbo.json                                    |  2 +-
 5 files changed, 42 insertions(+), 7 deletions(-)
 create mode 100644 e2e/react/src/components/SponsorInfo.tsx

diff --git a/e2e/react/src/components/SponsorInfo.tsx b/e2e/react/src/components/SponsorInfo.tsx
new file mode 100644
index 0000000000..0dc05b7263
--- /dev/null
+++ b/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>
+}
diff --git a/e2e/react/src/routes/+page.gql b/e2e/react/src/routes/+page.gql
index 957a410d70..e5514261cb 100644
--- a/e2e/react/src/routes/+page.gql
+++ b/e2e/react/src/routes/+page.gql
@@ -1,5 +1,6 @@
 query SponsorList {
 	sponsors {
 		name
+		...SponsorInfo
 	}
 }
diff --git a/e2e/react/src/routes/+page.tsx b/e2e/react/src/routes/+page.tsx
index 1ea24975be..b29675a304 100644
--- a/e2e/react/src/routes/+page.tsx
+++ b/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>
+	)
 }
diff --git a/packages/houdini-react/src/runtime/hooks/useFragment.ts b/packages/houdini-react/src/runtime/hooks/useFragment.ts
index b7355c1e59..465db756df 100644
--- a/packages/houdini-react/src/runtime/hooks/useFragment.ts
+++ b/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,
 		},
 	})
 
diff --git a/turbo.json b/turbo.json
index fa6e24fa3e..c23fe6575d 100644
--- a/turbo.json
+++ b/turbo.json
@@ -5,7 +5,7 @@
 			"dependsOn": ["^compile"]
 		},
 		"typedefs": {
-			"dependsOn": ["^typedefs"]
+			"dependsOn": ["^typedefs", "^compile"]
 		},
 		"build": {
 			"dependsOn": ["typedefs", "compile"]