Skip to content

Commit 5725903

Browse files
authored
docs(playgrounds): prevent server-side execution of SSE query in Nuxt (#1516)
This PR fixes an issue in the Nuxt example that uses `useQuery` with oRPC's SSE (`experimental_streamedOptions`). Previously, the query would run during server-side rendering, leading to hydration errors because SSE requires a persistent client-side connection. <img width="790" height="308" alt="image" src="https://github.com/user-attachments/assets/bc1ddfe5-1ff7-4f73-9eda-b2b73527f95f" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * Improved handling of streamed data output to ensure it displays correctly across all rendering scenarios. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
1 parent 562f88f commit 5725903

File tree

1 file changed

+5
-2
lines changed

1 file changed

+5
-2
lines changed

playgrounds/nuxt/app/components/orpc-stream.vue

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,17 @@ const { $orpc } = useNuxtApp()
55
66
const query = useQuery($orpc.sse.experimental_streamedOptions({
77
queryFnOptions: { maxChunks: 3 },
8+
enabled: import.meta.client,
89
}))
910
</script>
1011

1112
<template>
1213
<div>
1314
<h2>oRPC and Tanstack Query | Event Iterator example</h2>
14-
<pre>
15+
<ClientOnly>
16+
<pre>
1517
{{ JSON.stringify(query.data.value, null, 2) }}
16-
</pre>
18+
</pre>
19+
</ClientOnly>
1720
</div>
1821
</template>

0 commit comments

Comments
 (0)