houdini-react 2.0.0-next.45 → 2.0.0-next.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "houdini-react",
-  "version": "2.0.0-next.45",
+  "version": "2.0.0-next.46",
   "description": "The React plugin for houdini",
   "keywords": [
     "typescript",
@@ -81,13 +81,13 @@
     }
   },
   "optionalDependencies": {
-    "houdini-react-darwin-x64": "2.0.0-next.45",
-    "houdini-react-darwin-arm64": "2.0.0-next.45",
-    "houdini-react-linux-x64": "2.0.0-next.45",
-    "houdini-react-linux-arm64": "2.0.0-next.45",
-    "houdini-react-win32-x64": "2.0.0-next.45",
-    "houdini-react-win32-arm64": "2.0.0-next.45",
-    "houdini-react-wasm": "2.0.0-next.45"
+    "houdini-react-darwin-x64": "2.0.0-next.46",
+    "houdini-react-darwin-arm64": "2.0.0-next.46",
+    "houdini-react-linux-x64": "2.0.0-next.46",
+    "houdini-react-linux-arm64": "2.0.0-next.46",
+    "houdini-react-win32-x64": "2.0.0-next.46",
+    "houdini-react-win32-arm64": "2.0.0-next.46",
+    "houdini-react-wasm": "2.0.0-next.46"
   },
   "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.45'
+const BINARY_DISTRIBUTION_VERSION = '2.0.0-next.46'
 
 // 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

@@ -31,7 +31,10 @@ export function useFragmentHandle<
 	document: { artifact: FragmentArtifact; refetchArtifact?: QueryArtifact }
 ): any {
 	const fragmentData = useFragment<_Data, _ReferenceType, _Input>(reference, document)
-	const { variables } = fragmentReference<_Data, _Input, _ReferenceType>(reference, document)
+	const { variables, loading } = fragmentReference<_Data, _Input, _ReferenceType>(
+		reference,
+		document
+	)
 
 	const client = useClient()
 	const [session] = useSession()
@@ -172,6 +175,8 @@ export function useFragmentHandle<
 				getState: () => displayData as _Data | null,
 				getVariables: () =>
 					(paginationObserver.state.variables ?? variables) as NonNullable<_Input>,
+				// no-op pagination while the parent is still in its @loading state (issue #1408)
+				getLoading: () => loading,
 				fetch: fetchFn,
 				fetchUpdate,
 				getSession: async () => session,
@@ -196,6 +201,8 @@ export function useFragmentHandle<
 				getState: () => displayData as _Data | null,
 				getVariables: () =>
 					(paginationObserver.state.variables ?? variables) as NonNullable<_Input>,
+				// no-op pagination while the parent is still in its @loading state (issue #1408)
+				getLoading: () => loading,
 				storeName: refetchArtifact.name,
 				fetch: fetchFn,
 				fetchUpdate: async (args: any, updates = ['append']) =>
@@ -210,7 +217,15 @@ export function useFragmentHandle<
 		}
 
 		return null
-	}, [refetchArtifact, paginationObserver, displayData, session, forwardPending, backwardPending])
+	}, [
+		refetchArtifact,
+		paginationObserver,
+		displayData,
+		session,
+		forwardPending,
+		backwardPending,
+		loading,
+	])
 
 	// the fragment's current argument values: the initial args overlaid with everything that
 	// has been passed to refetch() so far. we track these explicitly rather than reading them

package/runtime/hydration.tsx

@@ -20,6 +20,7 @@ declare global {
 		__houdini__pending_artifacts__?: Record<string, QueryArtifact>
 		__houdini__pending_data__?: Record<string, any>
 		__houdini__pending_variables__?: Record<string, GraphQLVariables>
+		__houdini__pending_cache__?: any[]
 		__houdini__nav_caches__?: RouterCache
 	}
 }
@@ -57,6 +58,22 @@ export function hydrate_page(
 		window.__houdini__hydration__layer__
 	)
 
+	// apply any cache snapshots that streamed in before this module ran. an @loading query
+	// resolves while the document is still open, so its resolution script runs before this
+	// (deferred) module and couldn't hydrate the cache directly — it queued its snapshot here
+	// instead. drain the queue now that the cache exists so the observers below read the
+	// resolved data rather than the loading-state placeholder. each snapshot goes into its own
+	// layer (hydrate() replaces a layer's contents wholesale, so reusing one would keep only
+	// the last snapshot) and is then merged down so we end up with a single hydration layer.
+	const storage = window.__houdini__cache__?._internal_unstable.storage
+	for (const snapshot of window.__houdini__pending_cache__ ?? []) {
+		const layer = window.__houdini__cache__?.hydrate(snapshot)
+		if (layer && storage) {
+			storage.resolveLayer(layer.id)
+		}
+	}
+	window.__houdini__pending_cache__ = []
+
 	// prime the data/artifact caches from anything the server streamed
 	const initialData: Record<string, any> = {}
 	const initialArtifacts: Record<string, QueryArtifact> = {}

package/runtime/routing/Router.tsx

@@ -314,7 +314,23 @@ function usePageData({
 					injectToStream?.(`
 						<script>
 						{
-								window.__houdini__cache__?.hydrate(${cache.serialize()}, window.__houdini__hydration__layer__)
+								// the resolved cache snapshot for this streamed query. when the bootstrap
+								// module has already run (data arrived after hydration) we hydrate the live
+								// cache directly; otherwise the module is still deferred (an @loading query
+								// streams its data while the document is open) so we queue the snapshot for
+								// hydrate_page to apply once it creates the cache. without this the snapshot
+								// would be dropped and the query would hydrate with null data.
+								const __houdini__snapshot__ = ${cache.serialize()}
+								if (window.__houdini__cache__) {
+									// hydrate into a fresh layer and merge it down, rather than clobbering the
+									// shared hydration layer (which would drop everything hydrated before it)
+									const __houdini__layer__ = window.__houdini__cache__.hydrate(__houdini__snapshot__)
+									if (__houdini__layer__) {
+										window.__houdini__cache__._internal_unstable.storage.resolveLayer(__houdini__layer__.id)
+									}
+								} else {
+									(window.__houdini__pending_cache__ = window.__houdini__pending_cache__ || []).push(__houdini__snapshot__)
+								}
 
 								const artifactName = "${artifact.name}"
 								const value = ${JSON.stringify(