houdini-react 2.0.0-next.40 → 2.0.0-next.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "houdini-react",
-  "version": "2.0.0-next.40",
+  "version": "2.0.0-next.41",
   "description": "The React plugin for houdini",
   "keywords": [
     "typescript",
@@ -81,13 +81,13 @@
     }
   },
   "optionalDependencies": {
-    "houdini-react-darwin-x64": "2.0.0-next.40",
-    "houdini-react-darwin-arm64": "2.0.0-next.40",
-    "houdini-react-linux-x64": "2.0.0-next.40",
-    "houdini-react-linux-arm64": "2.0.0-next.40",
-    "houdini-react-win32-x64": "2.0.0-next.40",
-    "houdini-react-win32-arm64": "2.0.0-next.40",
-    "houdini-react-wasm": "2.0.0-next.40"
+    "houdini-react-darwin-x64": "2.0.0-next.41",
+    "houdini-react-darwin-arm64": "2.0.0-next.41",
+    "houdini-react-linux-x64": "2.0.0-next.41",
+    "houdini-react-linux-arm64": "2.0.0-next.41",
+    "houdini-react-win32-x64": "2.0.0-next.41",
+    "houdini-react-win32-arm64": "2.0.0-next.41",
+    "houdini-react-wasm": "2.0.0-next.41"
   },
   "scripts": {
     "compile": "scripts build-go",

package/postInstall.js

@@ -5,7 +5,7 @@ const https = require('https')
 const child_process = require('child_process')
 
 // Adjust the version you want to install. You can also make this dynamic.
-const BINARY_DISTRIBUTION_VERSION = '2.0.0-next.40'
+const BINARY_DISTRIBUTION_VERSION = '2.0.0-next.41'
 
 // Windows binaries end with .exe so we need to special case them.
 const binaryName = process.platform === 'win32' ? 'houdini-react.exe' : 'houdini-react'

package/runtime/hooks/useFragmentHandle.ts

@@ -24,10 +24,7 @@ export function useFragmentHandle<
 	reference: _Data | { ' $fragments': _ReferenceType } | null,
 	document: { artifact: FragmentArtifact; refetchArtifact?: QueryArtifact }
 ): any {
-	// get the fragment values
 	const fragmentData = useFragment<_Data, _ReferenceType, _Input>(reference, document)
-
-	// look at the fragment reference to get the variables
 	const { variables } = fragmentReference<_Data, _Input, _ReferenceType>(reference, document)
 
 	const client = useClient()
@@ -36,30 +33,25 @@ export function useFragmentHandle<
 	const [forwardPending, setForwardPending] = React.useState(false)
 	const [backwardPending, setBackwardPending] = React.useState(false)
 
-	// Stable cursor stacks for SinglePage pagination — must survive re-renders
 	const previousCursorsRef = React.useRef<(string | null)[]>([])
 	const nextCursorsRef = React.useRef<(string | null)[]>([])
 
 	const refetchArtifact = document.refetchArtifact as QueryArtifact | undefined
 	const refetchPath = refetchArtifact?.refetch?.path
 
-	// Dedicated observer for pagination queries — separate from the fragment observer.
-	// cursorHandlers derives entity variables (e.g. { id }) and artifact defaults
-	// automatically via the type config, so no manual variable extraction is needed here.
 	const paginationObserver = React.useMemo(() => {
 		if (!refetchArtifact?.refetch?.paginated) return null
 		return client.observe<_Data, _Input>({ artifact: refetchArtifact })
 	}, [refetchArtifact?.name])
 
-	// Subscribe to the pagination observer so React re-renders whenever a new page is fetched
-	// or served from cache (CacheOrNetwork). The fragment store subscription only watches the
-	// initial page's cache key; the observer is the live source of truth for SinglePage
-	// pagination where each page lives at its own per-cursor cache key.
+	const isSinglePage = refetchArtifact?.refetch?.mode === 'SinglePage'
+
+	// Subscribe to the pagination observer so the component re-renders when a new page lands.
+	// For SinglePage we pass disablePartial so partial cache hits (entity found but connection
+	// not yet fetched) are never resolved back to the observer — we go straight to the network
+	// and update the observer only once we have a complete page.
 	const subscribeToObserver = React.useCallback(
-		(onChange: () => void) => {
-			if (!paginationObserver) return () => {}
-			return paginationObserver.subscribe(onChange)
-		},
+		(fn: () => void) => paginationObserver?.subscribe(() => fn()) ?? (() => {}),
 		[paginationObserver]
 	)
 	const getObserverSnapshot = React.useCallback(
@@ -72,28 +64,13 @@ export function useFragmentHandle<
 		getObserverSnapshot
 	)
 
-	// Extract entity-level data from the pagination query response. For Node targetType
-	// the response is { node: EntityData }; we take the first root field to handle any type.
-	// Guard against partial cache hits (artifact has partial:true): only use the entity once the
-	// paginated connection field at refetch.path[0] is actually present in the response.
 	const paginationEntityData = React.useMemo<_Data | null>(() => {
 		if (!paginationData || !refetchArtifact?.selection?.fields) return null
 		const rootField = Object.keys(refetchArtifact.selection.fields)[0]
 		if (!rootField) return null
-		const entity = (paginationData as any)[rootField]
-		if (!entity) return null
-		const path = refetchArtifact.refetch?.path
-		if (path && path.length > 0 && (entity as any)[path[0]] == null) {
-			return null
-		}
-		return entity as _Data
+		return (paginationData as any)[rootField] ?? null
 	}, [paginationData, refetchArtifact])
 
-	const isSinglePage = refetchArtifact?.refetch?.mode === 'SinglePage'
-
-	// For SinglePage: use the pagination observer's entity data (each page has its own
-	// cache key) once a page fetch has landed. For Infinite: always use fragmentData,
-	// which reads accumulated pages from cache via the fragment's cache subscription.
 	const displayData =
 		isSinglePage && paginationEntityData !== null ? paginationEntityData : fragmentData
 
@@ -120,7 +97,19 @@ export function useFragmentHandle<
 		if (!refetchArtifact?.refetch?.paginated || !paginationObserver) return null
 
 		const fetchFn: FetchFn<_Data, _Input> = (args) => {
-			return paginationObserver.send({ ...args, session })
+			return paginationObserver.send({
+				...args,
+				session,
+				stuff: { silenceLoading: true },
+				cacheParams: {
+					disableSubscriptions: true,
+					// Suppress partial cache hits so an in-flight forward navigation never
+					// briefly resolves with an entity that is missing its connection field.
+					// Full cache hits (partial: false) still resolve, so backward navigation
+					// continues to be served instantly from cache.
+					disablePartial: true,
+				},
+			})
 		}
 
 		const fetchUpdate = (args: any, updates: string[]) => {
@@ -139,8 +128,6 @@ export function useFragmentHandle<
 			const handlers = cursorHandlers<_Data, _Input>({
 				artifact: refetchArtifact,
 				getState: () => displayData as _Data | null,
-				// Use the observer's own variable state so cursor history is preserved
-				// across page navigations without manual tracking in the hook.
 				getVariables: () =>
 					(paginationObserver.state.variables ?? variables) as NonNullable<_Input>,
 				fetch: fetchFn,