RSC preloading mechanism #258

phryneas · 2024-03-27T14:58:48Z

Resolves #212 and also prepares for #248 a bit.

Previews:

https://apollo-git-32cae2-apollo-client-next-package-integration-tests.vercel.app//rsc/dynamic/PreloadQuery/useSuspenseQuery
https://apollo-git-32cae2-apollo-client-next-package-integration-tests.vercel.app//rsc/dynamic/PreloadQuery/queryRef-useReadQuery
https://apollo-git-32cae2-apollo-client-next-package-integration-tests.vercel.app//rsc/dynamic/PreloadQuery/queryRef-refTest

On each you can call __APOLLO_CLIENT__[Symbol.for("apollo.suspenseCache")].queryRefs to investigate the queryRefs (if there are any)

github-actions · 2024-03-27T15:01:01Z

size-limit report 📦

Path	Size
{ ApolloNextAppProvider, NextSSRApolloClient, NextSSRInMemoryCache } from '@apollo/experimental-nextjs-app-support/ssr' (Browser ESM)	7.88 KB (+1.2% 🔺)
{ WrapApolloProvider, ApolloClient, InMemoryCache } from '@apollo/client-react-streaming' (Browser ESM)	1.5 KB (+7.48% 🔺)
{ buildManualDataTransport } from '@apollo/client-react-streaming/manual-transport' (Browser ESM)	6.36 KB (+1.5% 🔺)
@apollo/client-react-streaming (Browser ESM)	2.23 KB (+4.91% 🔺)
@apollo/client-react-streaming (SSR ESM)	2.58 KB (+47.44% 🔺)
@apollo/client-react-streaming (RSC ESM)	1.65 KB (+20.62% 🔺)
@apollo/client-react-streaming/manual-transport (Browser ESM)	6.55 KB (+1.5% 🔺)
@apollo/client-react-streaming/manual-transport (SSR ESM)	7.14 KB (+12.55% 🔺)
@apollo/experimental-nextjs-app-support/ssr (Browser ESM)	8.49 KB (+1% 🔺)
@apollo/experimental-nextjs-app-support/ssr (SSR ESM)	9.12 KB (+9.49% 🔺)
@apollo/experimental-nextjs-app-support/ssr (RSC ESM)	867 B (0%)
@apollo/experimental-nextjs-app-support/rsc (RSC ESM)	626 B (0%)

relativeci · 2024-03-27T15:02:28Z

#194 Bundle Size — 1.03MiB (+2.47%).

74c2fd2(current) vs afa5bcc main#189(baseline)

Warning

Bundle contains 1 duplicate package – View duplicate packages

Bundle metrics

9 changes

3 regressions

1 improvement

	Current #194	Baseline #189
Initial JS	`898.87KiB`(`+0.82%`)	`891.55KiB`
Initial CSS	`70B`(`+100%`)	`0B`
Cache Invalidation	`88.27%`	`0.04%`
Chunks	`29`(`+20.83%`)	`24`
Assets	`53`(`+17.78%`)	`45`
Modules	`528`(`+3.13%`)	`512`
Duplicate Modules	`47`(`+56.67%`)	`30`
Duplicate Code	`2.57%`(`+99.22%`)	`1.29%`
Packages	`26`(`-10.34%`)	`29`
Duplicate Packages	`1`	`1`

Bundle size by type

3 changes

3 regressions

	Current #194	Baseline #189
JS	`1.02MiB` (`+2.28%`)	`1MiB`
Other	`8.06KiB` (`+34.41%`)	`5.99KiB`
CSS	`70B` (`+100%`)	`0B`

Bundle analysis report Branch pr/rsc-preload Project dashboard

phryneas · 2024-04-03T13:18:33Z

integration-test/package.json

@@ -9,7 +9,7 @@
    "*"
  ],
  "scripts": {
-    "trigger-rebuild": "find . -regextype posix-extended -regex '.*/node_modules/@apollo/(client-react-streaming|experimental-nextjs-app-support)' -printf 'rm -r %p\n' -exec rm -r {} +; glob \"../.yarn/cache/@apollo-*exec*\" \"$HOME/.yarn/berry/cache/@apollo-*exec*\" --cmd='rm -v' ; yarn"
+    "trigger:rebuild": "find . -regextype posix-extended -regex '.*/node_modules/@apollo/(client-react-streaming|experimental-nextjs-app-support)' -printf 'rm -r %p\n' -exec rm -r {} +; glob \"../.yarn/cache/@apollo-*exec*\" \"$HOME/.yarn/berry/cache/@apollo-*exec*\" --cmd='rm -v' ; yarn"


Scripts with a : can be called from any child project in a yarn monorepo. Big DX improvement for a single char :D

phryneas · 2024-04-09T09:32:50Z

Quick thought: we need some warning if people add cookies or headers to context here as that could result in secrets to be dumped into the stream on accident.

integration-test/nextjs/src/app/rsc/dynamic/PreloadQuery/queryRef-useReadQuery/ClientChild.tsx

vercel · 2024-04-09T14:54:25Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
apollo-client-nextjs-experimental-nextjs-app-support	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 18, 2024 9:24am

see apollographql/apollo-client#11772

jerelmiller

I had a few questions and a couple minor comments, but I am SO STOKED for this feature. Incredible work 🎉

integration-test/nextjs/src/app/rsc/dynamic/PreloadQuery/queryRef-refTest/page.tsx

jerelmiller · 2024-04-26T15:36:13Z

integration-test/nextjs/src/shared/delayLink.ts

@@ -1,5 +1,11 @@
 import { ApolloLink, Observable } from "@apollo/client";

+declare module "@apollo/client" {
+  export interface DefaultContext {


Ooooo this is really something we should add to our docs. I don't think we recommend this at all and I'm sure lots of users would really appreciate being able to do this.

packages/client-react-streaming/src/DataTransportAbstraction/WrappedApolloClient.tsx

packages/client-react-streaming/src/registerApolloClient.tsx

packages/client-react-streaming/src/PreloadQuery.tsx

…rappedApolloClient.tsx Co-authored-by: Jerel Miller <jerelmiller@gmail.com>

phryneas · 2024-05-03T12:38:00Z

packages/client-react-streaming/src/transportedQueryRef.ts

+  const unwrapped = unwrapQueryRef<any>(queryRef);
+  useEffect(() => {
+    if (cacheKey) {
+      if (unwrapped.disposed) {
+        getSuspenseCache(client).add(cacheKey, unwrapped);
+      }
+    }
+    // Omitting the deps is intentional. This avoids stale closures and the
+    // conditional ensures we aren't running the logic on each render.
+  });


@jerelmiller should I still do all this?

I left it for useBackgroundQuery here to avoid issues where the queryRef gets disposed by the auto dispose timeout and the hook re-renders (which was a bug before that change in 3.9.10). I did update that check to use a setTimeout though since dispose is now again wrapped in a setTimeout.

I don't remember exactly where you use this hook, but if you're in the same situation as what I described above, then keeping this makes sense.

This wraps around useReadQuery and useQueryRefHandlers, and it can also create a queryRef by reviving a transportedQueryRef. We can remove these effects once React deduplicates transported objects, but for now they're in here.

jerelmiller · 2024-05-03T14:31:28Z

yarn.lock

@@ -49,14 +49,14 @@ __metadata:
  version: 0.0.0-use.local
  resolution: "@apollo/client-react-streaming@workspace:packages/client-react-streaming"
  dependencies:
-    "@apollo/client": "npm:3.9.9"
+    "@apollo/client": "npm:3.10.1"


We might want to get apollographql/apollo-client#11821 out before we go live with the change in useTransportedQueryRef just to make sure its still compatible with the change in that PR.

Should be included in the latest build from apollographql/apollo-client#11824

jerelmiller

Love it! Let's test this with apollographql/apollo-client#11821 just to make sure that doesn't break something here as well, but otherwise this is incredible work!

phryneas · 2024-05-14T10:38:02Z

packages/client-react-streaming/src/transportedQueryRef.ts

+  useEffect(() => {
+    // We only want this to execute if the queryRef is a transported query.
+    if (!isTransported) return;
+    // We want to always keep this queryRef in the suspense cache in case another component has another instance of this transported queryRef.
+    // This effect could be removed after https://github.com/facebook/react/pull/28996 has been merged and we've updated deps to that version.
+    if (cacheKey) {
+      if (unwrapped.disposed) {
+        getSuspenseCache(client).add(cacheKey, unwrapped);
+      }
+    }
+    // Omitting the deps is intentional. This avoids stale closures and the
+    // conditional ensures we aren't running the logic on each render.
+  });
+  // Soft-retaining because useQueryRefHandlers doesn't do it for us.
+  // This effect could be removed after https://github.com/facebook/react/pull/28996 has been merged and we've updated deps to that version.
+  useEffect(() => {
+    if (isTransported) {
+      return unwrapped.softRetain();
+    }
+  }, [isTransported, unwrapped]);


@jerelmiller could you please take a final look at this bit before I merge this in?

jerelmiller

💯

phryneas changed the title ~~ApolloClient: make browser event-replaying logic available in SSR~~ RSC preloading mechanism Mar 27, 2024

phryneas added 4 commits April 3, 2024 10:57

ApolloClient: make browser event-replaying logic available in SSR

c6119dd

RSC preloading mechanism prototype

08ba665

fix build, update expected shape

047482c

remove console.log

a47cac9

phryneas force-pushed the pr/rsc-preload branch from 3f4327c to a47cac9 Compare April 3, 2024 08:57

progress

e8057fc

phryneas force-pushed the pr/rsc-preload branch from c048ef5 to e8057fc Compare April 3, 2024 13:13

phryneas commented Apr 3, 2024

View reviewed changes

[WIP] queryRef

293e03e

phryneas mentioned this pull request Apr 5, 2024

Adjust useReadQuery wrapper logic to work with transported objects. apollographql/apollo-client#11757

Merged

phryneas added 4 commits April 5, 2024 13:20

tests for both notations

50642e4

fix up import

fd7a7ed

different resolutions

558e52c

test fixups

8600cdc

phryneas changed the base branch from main to v0.11.0 April 8, 2024 10:07

phryneas added this to the 0.11.0 milestone Apr 8, 2024

phryneas mentioned this pull request Apr 9, 2024

Wrap useQueryRefHandlers in wrapHook. apollographql/apollo-client#11771

Merged

integrate useQueryRefHandlers

3a014a4

phryneas commented Apr 9, 2024

View reviewed changes

integration-test/nextjs/src/app/rsc/dynamic/PreloadQuery/queryRef-useReadQuery/ClientChild.tsx Show resolved Hide resolved

typings

106e0c3

vercel bot deployed to Preview April 9, 2024 14:54 View deployment

phryneas mentioned this pull request Apr 9, 2024

When using useReadQuery directly before useQueryRefHandlers, refetch won't update the useReadQuery result apollographql/apollo-client#11772

Open

fix up test

8ac604e

see apollographql/apollo-client#11772

vercel bot deployed to Preview April 10, 2024 08:29 View deployment

Merge remote-tracking branch 'origin/v0.11.0' into pr/rsc-preload

eb0e41b

vercel bot deployed to Preview April 26, 2024 14:21 View deployment

adjust react version for vite-streaming

ba35077

vercel bot deployed to Preview April 26, 2024 14:34 View deployment

jerelmiller approved these changes Apr 26, 2024

View reviewed changes

phryneas mentioned this pull request May 2, 2024

Proper way to use with Next SSR caching - Always seeing loading state / data not caching #291

Open

phryneas added 2 commits May 3, 2024 12:36

TransportedQueryRef: inherit QueryReferenceBase

2d454ff

split TransportedQueryReference type

e64236d

vercel bot deployed to Preview May 3, 2024 11:08 View deployment

queryOptions as props on PreloadQuery

e08acd9

vercel bot deployed to Preview May 3, 2024 12:16 View deployment

Update packages/client-react-streaming/src/DataTransportAbstraction/W…

1e97538

…rappedApolloClient.tsx Co-authored-by: Jerel Miller <jerelmiller@gmail.com>

vercel bot deployed to Preview May 3, 2024 12:33 View deployment

adjust generic name and comment

b162c52

phryneas commented May 3, 2024

View reviewed changes

vercel bot deployed to Preview May 3, 2024 12:38 View deployment

phryneas requested a review from jerelmiller May 3, 2024 12:44

jerelmiller reviewed May 3, 2024

View reviewed changes

jerelmiller approved these changes May 3, 2024

View reviewed changes

change to QueryRef base type

4735d7a

vercel bot deployed to Preview May 8, 2024 11:21 View deployment

phryneas requested a review from jerelmiller May 8, 2024 12:05

phryneas commented May 14, 2024

View reviewed changes

jerelmiller approved these changes May 14, 2024

View reviewed changes

rename command to match parent project

50e1a7c

vercel bot had a problem deploying to Preview May 15, 2024 09:44 Failure

phryneas added 2 commits May 15, 2024 11:48

Merge branch 'v0.11.0' into pr/rsc-preload

799a6a1

update dependency "@apollo/client": "^3.10.4"

74c2fd2

vercel bot deployed to Preview May 15, 2024 10:00 View deployment

phryneas merged commit cc189b8 into v0.11.0 May 15, 2024
14 checks passed

phryneas deleted the pr/rsc-preload branch May 15, 2024 10:05

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

RSC preloading mechanism #258

RSC preloading mechanism #258

phryneas commented Mar 27, 2024 •

edited

github-actions bot commented Mar 27, 2024 •

edited

relativeci bot commented Mar 27, 2024 •

edited

phryneas Apr 3, 2024

phryneas commented Apr 9, 2024

vercel bot commented Apr 9, 2024 •

edited

jerelmiller left a comment

jerelmiller Apr 26, 2024

phryneas May 3, 2024

phryneas May 3, 2024

jerelmiller May 3, 2024

phryneas May 8, 2024 •

edited

jerelmiller May 3, 2024

phryneas May 8, 2024 •

edited

jerelmiller left a comment

phryneas May 14, 2024

jerelmiller left a comment

RSC preloading mechanism #258

RSC preloading mechanism #258

Conversation

phryneas commented Mar 27, 2024 • edited

Previews:

github-actions bot commented Mar 27, 2024 • edited

size-limit report 📦

relativeci bot commented Mar 27, 2024 • edited

#194 Bundle Size — 1.03MiB (+2.47%).

phryneas Apr 3, 2024

Choose a reason for hiding this comment

phryneas commented Apr 9, 2024

vercel bot commented Apr 9, 2024 • edited

jerelmiller left a comment

Choose a reason for hiding this comment

jerelmiller Apr 26, 2024

Choose a reason for hiding this comment

phryneas May 3, 2024

Choose a reason for hiding this comment

phryneas May 3, 2024

Choose a reason for hiding this comment

jerelmiller May 3, 2024

Choose a reason for hiding this comment

phryneas May 8, 2024 • edited

Choose a reason for hiding this comment

jerelmiller May 3, 2024

Choose a reason for hiding this comment

phryneas May 8, 2024 • edited

Choose a reason for hiding this comment

jerelmiller left a comment

Choose a reason for hiding this comment

phryneas May 14, 2024

Choose a reason for hiding this comment

jerelmiller left a comment

Choose a reason for hiding this comment

phryneas commented Mar 27, 2024 •

edited

github-actions bot commented Mar 27, 2024 •

edited

relativeci bot commented Mar 27, 2024 •

edited

vercel bot commented Apr 9, 2024 •

edited

phryneas May 8, 2024 •

edited

phryneas May 8, 2024 •

edited