fix(solid-query): SSR fixes - Inconsistent state (#5093)

* fix(solid-query): do not call unsubscribe on the server

* fix(solid-query): prefer val from queryResource if

it is available there

* chore: add hydration debugger to solid ssr example

* bump minimum solid-js version

* chore: pnpm i

* chore: fix rollup babel typings

Result of this change upstream that types the “targets” property -> https://github.com/DefinitelyTyped/DefinitelyTyped/pull/63927/files#diff-a4da813bfdc10bbb7d4d9ee9b811309e7e2a16c0484b9a334752db84be4b0f31

Signed-off-by: marbemac <[email protected]>

* replace void 0

Signed-off-by: marbemac <[email protected]>

* chore: remove uncessary onMount

Signed-off-by: marbemac <[email protected]>

* chore: skip this onComputed on first render

Signed-off-by: marbemac <[email protected]>

* fix: copy state properties over for ssr hydration

Signed-off-by: marbemac <[email protected]>

---------

Signed-off-by: marbemac <[email protected]>

Author: Marc MacLeod

examples/solid/basic-graphql-request/package.json

@@ -13,7 +13,7 @@
     "@tanstack/solid-query": "^4.3.9",
     "graphql": "^16.6.0",
     "graphql-request": "^5.0.0",
-    "solid-js": "^1.6.2"
+    "solid-js": "^1.6.13"
   },
   "devDependencies": {
     "typescript": "4.7.4",

examples/solid/basic-typescript/package.json

@@ -11,7 +11,7 @@
   "license": "MIT",
   "dependencies": {
     "@tanstack/solid-query": "^4.3.9",
-    "solid-js": "^1.6.2"
+    "solid-js": "^1.6.13"
   },
   "devDependencies": {
     "typescript": "4.7.4",

examples/solid/default-query-function/package.json

@@ -11,7 +11,7 @@
   "license": "MIT",
   "dependencies": {
     "@tanstack/solid-query": "^4.3.9",
-    "solid-js": "^1.6.2"
+    "solid-js": "^1.6.13"
   },
   "devDependencies": {
     "typescript": "4.7.4",

examples/solid/simple/package.json

@@ -11,7 +11,7 @@
   "license": "MIT",
   "dependencies": {
     "@tanstack/solid-query": "^4.3.9",
-    "solid-js": "^1.6.2"
+    "solid-js": "^1.6.13"
   },
   "devDependencies": {
     "@tanstack/eslint-plugin-query": "^4.13.0",

examples/solid/solid-start-streaming/package.json

@@ -11,15 +11,15 @@
     "esbuild": "^0.14.54",
     "postcss": "^8.4.18",
     "solid-start-node": "^0.2.0",
-    "typescript": "^4.8.4",
-    "vite": "^3.1.8"
+    "typescript": "^4.9.4",
+    "vite": "^4.1.4"
   },
   "dependencies": {
-    "@tanstack/solid-query": "^4.3.9",
+    "@tanstack/solid-query": "^5.0.0-alpha.3",
     "@solidjs/meta": "^0.28.2",
-    "@solidjs/router": "^0.6.0",
-    "solid-js": "^1.6.9",
-    "solid-start": "^0.2.15",
+    "@solidjs/router": "^0.7.0",
+    "solid-js": "^1.6.13",
+    "solid-start": "^0.2.23",
     "undici": "^5.11.0"
   },
   "engines": {

examples/solid/solid-start-streaming/src/root.css

@@ -85,3 +85,13 @@ p {
   font-weight: bold;
   flex-grow: 1;
 }
+
+.example--table {
+  padding: 0.5rem;
+}
+
+.example--table th,
+.example--table td {
+  padding: 4px 12px;
+  white-space: nowrap;
+}

examples/solid/solid-start-streaming/src/root.tsx

@@ -20,7 +20,7 @@ export default function Root() {
   const queryClient = new QueryClient({
     defaultOptions: {
       queries: {
-        retry: 0,
+        retry: false,
       },
     },
   })
@@ -43,6 +43,7 @@ export default function Root() {
               <A href="/deferred">Deferred</A>
               <A href="/mixed">Mixed</A>
               <A href="/with-error">With Error</A>
+              <A href="/hydration">Hydration</A>
 
               <Routes>
                 <FileRoutes />

examples/solid/solid-start-streaming/src/routes/hydration.tsx

@@ -0,0 +1,99 @@
+import type { CreateQueryResult } from '@tanstack/solid-query'
+import { createQuery } from '@tanstack/solid-query'
+import { createSignal, Suspense } from 'solid-js'
+import { fetchUser } from '~/utils/api'
+import { NoHydration } from 'solid-js/web'
+import { Title } from 'solid-start'
+
+export default function Hydration() {
+  const query = createQuery(() => ({
+    queryKey: ['user'],
+    queryFn: () => fetchUser({ sleep: 500 }),
+    deferStream: true,
+  }))
+
+  const [initialQueryState] = createSignal(JSON.parse(JSON.stringify(query)))
+
+  return (
+    <main>
+      <Title>Solid Query - Hydration</Title>
+
+      <h1>Solid Query - Hydration Example</h1>
+
+      <div class="description">
+        <p>
+          Lists the query state as seen on the server, initial render on the
+          client (right after hydration), and current client value. Ideally, if
+          SSR is setup correctly, these values are exactly the same in all three
+          contexts.
+        </p>
+      </div>
+
+      <button onClick={() => query.refetch()}>Refetch</button>
+
+      <table class="example example--table">
+        <thead>
+          <tr>
+            <th>Context</th>
+            <th>data.name</th>
+            <th>isFetching</th>
+            <th>isFetched</th>
+            <th>isPending</th>
+            <th>isRefetching</th>
+            <th>isLoading</th>
+            <th>isStale</th>
+            <th>isSuccess</th>
+            <th>isError</th>
+            <th>error</th>
+            <th>fetchStatus</th>
+            <th>dataUpdatedAt</th>
+          </tr>
+        </thead>
+
+        <tbody>
+          <Suspense>
+            <NoHydration>
+              <QueryStateRow context="server" query={query} />
+            </NoHydration>
+
+            <QueryStateRow
+              context="client (initial render)"
+              query={initialQueryState()!}
+            />
+
+            <QueryStateRow context="client" query={query} />
+          </Suspense>
+        </tbody>
+      </table>
+    </main>
+  )
+}
+
+type QueryState = CreateQueryResult<
+  {
+    id: string
+    name: string
+    queryTime: number
+  },
+  Error
+>
+
+const QueryStateRow = (props: { context: string; query: QueryState }) => {
+  return (
+    <tr>
+      <td>{props.context}</td>
+      <td>{props.query.data?.name}</td>
+      <td>{String(props.query.isFetching)}</td>
+      <td>{String(props.query.isFetched)}</td>
+      <td>{String(props.query.isPending)}</td>
+      <td>{String(props.query.isRefetching)}</td>
+      <td>{String(props.query.isLoading)}</td>
+      <td>{String(props.query.isStale)}</td>
+      <td>{String(props.query.isSuccess)}</td>
+      <td>{String(props.query.isError)}</td>
+      <td>{String(props.query.error)}</td>
+      <td>{String(props.query.fetchStatus)}</td>
+      <td>{String(props.query.dataUpdatedAt)}</td>
+    </tr>
+  )
+}

package.json

@@ -92,7 +92,7 @@
     "rollup-plugin-visualizer": "^5.9.0",
     "rollup-preset-solid": "^1.4.0",
     "semver": "^7.3.8",
-    "solid-js": "^1.5.7",
+    "solid-js": "^1.6.13",
     "solid-testing-library": "^0.3.0",
     "stream-to-array": "^2.3.0",
     "ts-node": "^10.9.1",

packages/solid-query/package.json

@@ -54,7 +54,7 @@
     "@tanstack/query-core": "workspace:*"
   },
   "peerDependencies": {
-    "solid-js": "^1.6.2"
+    "solid-js": "^1.6.13"
   },
   "peerDependenciesMeta": {}
 }

packages/solid-query/src/createBaseQuery.ts

@@ -18,7 +18,6 @@ import {
   createResource,
   on,
   onCleanup,
-  onMount,
 } from 'solid-js'
 import { createStore, unwrap } from 'solid-js/store'
 import { useQueryClient } from './QueryClientProvider'
@@ -64,7 +63,20 @@ export function createBaseQuery<
   ) => {
     return observer.subscribe((result) => {
       notifyManager.batchCalls(() => {
-        const unwrappedResult = { ...unwrap(result) }
+        const query = observer.getCurrentQuery()
+        const unwrappedResult = {
+          ...unwrap(result),
+
+          // hydrate() expects a QueryState object, which is similar but not
+          // quite the same as a QueryObserverResult object. Thus, for now, we're
+          // copying over the missing properties from state in order to support hydration
+          dataUpdateCount: query.state.dataUpdateCount,
+          fetchFailureCount: query.state.fetchFailureCount,
+          fetchFailureReason: query.state.fetchFailureReason,
+          fetchMeta: query.state.fetchMeta,
+          isInvalidated: query.state.isInvalidated,
+        }
+
         if (unwrappedResult.isError) {
           if (process.env['NODE_ENV'] === 'development') {
             console.error(unwrappedResult.error)
@@ -178,13 +190,17 @@ export function createBaseQuery<
     }
   })
 
-  onMount(() => {
-    observer.setOptions(defaultedOptions, { listeners: false })
-  })
-
-  createComputed(() => {
-    observer.setOptions(client().defaultQueryOptions(options()))
-  })
+  createComputed(
+    on(
+      () => client().defaultQueryOptions(options()),
+      () => observer.setOptions(client().defaultQueryOptions(options())),
+      {
+        // Defer because we don't need to trigger on first render
+        // This only cares about changes to options after the observer is created
+        defer: true,
+      },
+    ),
+  )
 
   createComputed(
     on(
@@ -209,10 +225,8 @@ export function createBaseQuery<
       target: QueryObserverResult<TData, TError>,
       prop: keyof QueryObserverResult<TData, TError>,
     ): any {
-      if (prop === 'data') {
-        return queryResource()?.data
-      }
-      return Reflect.get(target, prop)
+      const val = queryResource()?.[prop]
+      return val !== undefined ? val : Reflect.get(target, prop)
     },
   }