feat(solid-query): SSR streaming support #4840

marbemac · 2023-01-19T17:29:55Z

Working off of the progress in #4803.

This refactors createBaseQuery to an alternative approach that consolidates to a single createResource call. Instead of coordinating two createResource calls - one that sends down the dehydrated query state, and one that sends down the query data - this PR uses a single createResource that tracks the entire query state, and leverages solid's native onHydrate functionality to hydrate that state on the client. This means we also get support for SSR streaming (and optional defer for specific requests just by setting the deferStream option)!

I also expanded the solid-start-streaming example to better showcase the various ssr patterns (and make it easier to experiment in real world).

Changed query checkers to use `isInitialLoading` Fix hydration key bug for streaming SSR Add `deferStream` option for streaming SSR

Store the entire query state in the resource, so that we can leverage native resource hydration to hydrate the query on the client as it’s streamed in.

marbemac · 2023-01-19T17:40:20Z

packages/solid-query/src/createBaseQuery.ts

+          hydrate(queryClient(), {
+            queries: [
+              {
+                queryKey: defaultedOptions.queryKey,
+                queryHash: defaultedOptions.queryHash,
+                state: info.value,
+              },
+            ],
+          })


Here I'm assuming that hydrating mutations from server isn't really a use case - or is it?

Yeah no need to hydrate the mutations here! Looks good

marbemac · 2023-01-19T17:41:28Z

packages/solid-query/src/createBaseQuery.ts


-  onCleanup(() => unsubscribe())
+  onCleanup(() => {


Observing some strange behavior on the server with onCleanup. Pop a log in here, and load one of the pages that contains two queries... note how onCleanup is only triggered once on the server, despite two queries. Not sure why.

The PR I just created will solve this issue

marbemac · 2023-01-19T17:43:52Z

packages/solid-query/src/createBaseQuery.ts

-    })()
-  })
+        if (!unsubscribe) {
+          unsubscribe = createClientSubscriber(


For queries that were created in SSR, onHydrate will be called on the client, at which point we can hydrate the queryClient for that particular query, and then lazy subscribe to the observer.

marbemac · 2023-01-19T17:44:52Z

packages/solid-query/src/createBaseQuery.ts

          }
-          resolve(unwrap(state.data))


TBH, wasn't sure when/where/why to unwrap versus not unwrap... I understand what unwrap does, but any rules of thumb re where we need to use it?

codesandbox-ci · 2023-01-19T20:09:09Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 43d3fb1:

Sandbox	Source
@tanstack/query-example-react-basic-typescript	Configuration
@tanstack/query-example-solid-basic-typescript	Configuration
@tanstack/query-example-svelte-basic	Configuration
@tanstack/query-example-vue-basic	Configuration

marbemac · 2023-01-19T20:14:14Z

packages/solid-query/src/__tests__/createQuery.test.tsx

@@ -1579,7 +1579,6 @@ describe('createQuery', () => {

    // Fetch query
    expect(states[0]).toMatchObject({
-      data: undefined,


Is it important that this property be defined on the original state object (e.g. when we states.push({ ...state }))? When accessing through the proxy, e.g. state.data, it will come back as undefined as expected.

This fine for now! I think libraries built on top of solid-query would need to know about this caveat. That's worth a consideration

ardeora · 2023-01-19T22:32:10Z

Thanks for working on this! I really like it. Any idea why refetchOnWindowFocus doesn't seem to work?

… just one possible approach

ardeora · 2023-01-20T04:21:26Z

Sorry I dont know what just happened. I accidentally edited your comment. But take a look at the codesandbox example created above! Doesn't seem to work on my device :/

Screen.Recording.2023-01-19.at.10.52.12.PM.mov

marbemac · 2023-01-20T15:12:49Z

Ah, maybe that behavior is due to 096da93? I branched off of your ssr branch, and then merged in latest v5 before starting my work. Perhaps trying switching back and forth between browser tabs to see if the refetch on visibility change occurs?

ardeora · 2023-01-20T15:32:38Z

Ah, maybe that behavior is due to 096da93? I branched off of your ssr branch, and then merged in latest v5 before starting my work. Perhaps trying switching back and forth between browser tabs to see if the refetch on visibility change occurs?

That seems to be it! If I change tabs I can see it refetch on coming back to the tab

ardeora · 2023-01-20T15:35:00Z

packages/solid-query/src/createBaseQuery.ts

+  const createClientSubscriber = (refetch: (info?: unknown) => void) => {
+    return observer.subscribe((result) => {
+      notifyManager.batchCalls(() => {
+        const unwrappedResult = { ...unwrap(result) }
+        setState(unwrappedResult)
+        refetch()
+      })()
+    })
+  }


Suggested change

const createClientSubscriber = (refetch: (info?: unknown) => void) => {

return observer.subscribe((result) => {

notifyManager.batchCalls(() => {

const unwrappedResult = { ...unwrap(result) }

setState(unwrappedResult)

refetch()

})()

})

}

const createClientSubscriber = (refetch: (info?: unknown) => void, hydrated: boolean = false) => {

if (hydrated) {

defaultedOptions.refetchOnMount = false

observer.setOptions(defaultedOptions)

}

return observer.subscribe((result) => {

notifyManager.batchCalls(() => {

const unwrappedResult = { ...unwrap(result) }

setState(unwrappedResult)

refetch()

})()

})

}

Can we also add this to the client subscriber? This would allow us to not refetch a query that was rendered on the server, even if a staleTime wasn't set. Similar to how CSR apps behave

For sure - I'll give it a try now. Would also be nice if we could figure out an actual "ssr" test that covers that hydrate code branch, and this stale behavior. Will see if I can figure that out.

👍 done in 9fc9e3d. Haven't figured out the ssr test... was looking for inspiration, but can't even find tests in the solidjs repo that cover ssr related functionality.

Great work! I can add the tests for SSR in a separate PR. Could you resolve the conflicts before I run the CI workflow?

packages/solid-query/src/createBaseQuery.ts

Even if staleTime is not set

# Conflicts: # packages/solid-query/src/createBaseQuery.ts # packages/solid-query/src/types.ts

codecov-commenter · 2023-01-20T23:43:56Z

Codecov Report

❗ No coverage uploaded for pull request base (v5@8c373d2). Click here to learn what that means.
Patch has no changes to coverable lines.

Additional details and impacted files

@@          Coverage Diff          @@
##             v5    #4840   +/-   ##
=====================================
  Coverage      ?   90.76%           
=====================================
  Files         ?       85           
  Lines         ?     3488           
  Branches      ?      881           
=====================================
  Hits          ?     3166           
  Misses        ?      301           
  Partials      ?       21

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

ardeora · 2023-01-20T23:47:02Z

@TkDodo @marbemac made some awesome additions to createBaseQuery and this should be a good way to integrate both CSR and SSR in solid-query! Would love it if you could review it and merge the changes whenever convenient 😄 I'll close my PR once this gets merged

# Conflicts: # pnpm-lock.yaml

vercel · 2023-02-01T16:24:01Z

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

1 Ignored Deployment

Name	Status	Preview	Comments	Updated
query	⬜️ Ignored (Inspect)			Feb 3, 2023 at 4:22PM (UTC)

ardeora · 2023-02-03T01:30:54Z

@marbemac I made a PR with some fixes with this approach.

The PR fixes two issues:

If we just use SSR (no Streaming) with Solid Start, when the query is hydrated, The data is updated due to it being a part of the resource. But the state store will be in its initial state. Where stuff like isFetching will be true, dataUpdatedAt will be 0, etc. This happens because there is no reactivity on the server! So even though we update the state store in the server subscription handler. The state variable never updates on server rendered DOM elements. So after the query is hydrated we can safely update the store
The second issue will be noticed if we have two queries with the same key but one of them has initialData set. When the second query mounts, it will already have data set but it will still wait for the fetcher to resolve instead of deduping the data.

This also was the reason why the unsubscribe function wasn't working correctly on the server. It is fixed now.

marbemac · 2023-02-03T14:45:36Z

@ardeora great! I'll take a look in a few hours.

fix(solid-query): SSR fixes

ardeora · 2023-02-14T17:12:43Z

Hello @marbemac! Could you rebase again from the v5 branch? I'll create another PR to fix the svelte-query tests then :D If they haven't been fixed already and get this PR merged

marbemac · 2023-02-16T14:08:41Z

Sure thing! Can get that done today.

# Conflicts: # packages/solid-query/src/__tests__/createQuery.test.tsx # packages/solid-query/src/createBaseQuery.ts # pnpm-lock.yaml

marbemac · 2023-02-16T20:18:49Z

@ardeora should be all set

vercel · 2023-02-16T20:48:01Z

Deployment failed with the following error:

Creating the Deployment Timed Out.

ardeora · 2023-02-17T09:44:11Z

@marbemac Thanks again for all the hard work on this. The changes have been merged now. v5 is going to be 💯

ardeora and others added 7 commits January 12, 2023 06:00

feat(solid-query): createQuery SSR support

f080a14

fix(solid-query):Bug Fixes & Streaming SSR Support

dc14404

Changed query checkers to use `isInitialLoading` Fix hydration key bug for streaming SSR Add `deferStream` option for streaming SSR

fix(solid-query): Infinite query types

fd866cf

Merge branch 'v5' into solid-query-streaming-ssr

840cb16

docs(solid-query): re-work ssr example

979f30d

fix(solid-query): improved async + stream support

7c9798f

refactor(solid-query): entire state in resource

f61d4b6

Store the entire query state in the resource, so that we can leverage native resource hydration to hydrate the query on the client as it’s streamed in.

marbemac mentioned this pull request Jan 19, 2023

feat(solid-query): SSR support #4803

Closed

marbemac commented Jan 19, 2023

View reviewed changes

marbemac added 2 commits January 19, 2023 15:01

passing tests

860996a

pnpm install

b899aaa

marbemac commented Jan 19, 2023

View reviewed changes

marbemac marked this pull request as ready for review January 19, 2023 20:29

Add example of generatlized query boundary

15e8485

… just one possible approach

TanStack deleted a comment from marbemac Jan 20, 2023

ardeora reviewed Jan 20, 2023

View reviewed changes

packages/solid-query/src/createBaseQuery.ts Outdated Show resolved Hide resolved

marbemac added 5 commits January 20, 2023 11:53

fix(solid-query): do not refetch if hydrated

9fc9e3d

Even if staleTime is not set

add wrapping div back to example

c52264e

Merge branch 'v5' into solid-query-streaming-ssr

4da51a4

this setState is not necessary

632651c

Merge branch 'v5' into solid-query-streaming-ssr

88f8cc8

# Conflicts: # packages/solid-query/src/createBaseQuery.ts # packages/solid-query/src/types.ts

ardeora requested a review from TkDodo January 20, 2023 23:47

marbemac and others added 2 commits January 25, 2023 11:06

Merge branch 'v5' into solid-query-streaming-ssr

806cd14

# Conflicts: # pnpm-lock.yaml

Merge branch 'v5' into solid-query-streaming-ssr

bc5a2a1

fix(solid-query): SSR fixes

5d008b1

Merge pull request #1 from ardeora/solid-query-streaming-ssr

80f10f3

fix(solid-query): SSR fixes

TkDodo requested a review from ardeora February 12, 2023 20:36

Merge branch 'v5' into solid-query-streaming-ssr

43d3fb1

# Conflicts: # packages/solid-query/src/__tests__/createQuery.test.tsx # packages/solid-query/src/createBaseQuery.ts # pnpm-lock.yaml

ardeora merged commit e87d483 into TanStack:v5 Feb 17, 2023

marbemac deleted the solid-query-streaming-ssr branch February 17, 2023 20:00

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(solid-query): SSR streaming support #4840

feat(solid-query): SSR streaming support #4840

marbemac commented Jan 19, 2023 •

edited

marbemac Jan 19, 2023

ardeora Jan 20, 2023

marbemac Jan 19, 2023

ardeora Feb 3, 2023

marbemac Jan 19, 2023

marbemac Jan 19, 2023 •

edited

codesandbox-ci bot commented Jan 19, 2023 •

edited

marbemac Jan 19, 2023

ardeora Jan 20, 2023

ardeora commented Jan 19, 2023

ardeora commented Jan 20, 2023

marbemac commented Jan 20, 2023

ardeora commented Jan 20, 2023

ardeora Jan 20, 2023

marbemac Jan 20, 2023

marbemac Jan 20, 2023

ardeora Jan 20, 2023

marbemac Jan 20, 2023

codecov-commenter commented Jan 20, 2023

ardeora commented Jan 20, 2023

vercel bot commented Feb 1, 2023 •

edited

ardeora commented Feb 3, 2023

marbemac commented Feb 3, 2023

ardeora commented Feb 14, 2023

marbemac commented Feb 16, 2023

marbemac commented Feb 16, 2023

vercel bot commented Feb 16, 2023

ardeora commented Feb 17, 2023

feat(solid-query): SSR streaming support #4840

feat(solid-query): SSR streaming support #4840

Conversation

marbemac commented Jan 19, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

marbemac Jan 19, 2023 • edited

Choose a reason for hiding this comment

codesandbox-ci bot commented Jan 19, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ardeora commented Jan 19, 2023

ardeora commented Jan 20, 2023

marbemac commented Jan 20, 2023

ardeora commented Jan 20, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

codecov-commenter commented Jan 20, 2023

Codecov Report

ardeora commented Jan 20, 2023

vercel bot commented Feb 1, 2023 • edited

ardeora commented Feb 3, 2023

marbemac commented Feb 3, 2023

ardeora commented Feb 14, 2023

marbemac commented Feb 16, 2023

marbemac commented Feb 16, 2023

vercel bot commented Feb 16, 2023

ardeora commented Feb 17, 2023

marbemac commented Jan 19, 2023 •

edited

marbemac Jan 19, 2023 •

edited

codesandbox-ci bot commented Jan 19, 2023 •

edited

vercel bot commented Feb 1, 2023 •

edited