@tanstack/solid-query 5.0.0-beta.0 → 5.0.0-beta.4

package/build/dev.cjs

@@ -57,6 +57,25 @@ function reconcileFn(store$1, result, reconcileOption) {
   const newData = store.reconcile(result.data, { key: reconcileOption })(store$1.data);
   return { ...result, data: newData };
 }
+var hydrateableObserverResult = (query, result) => {
+  if (!web.isServer)
+    return result;
+  return {
+    ...store.unwrap(result),
+    // cast to refetch function should be safe, since we only remove it on the server,
+    // and refetch is not relevant on the server
+    refetch: void 0,
+    // 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,
+    isInvalidated: query.state.isInvalidated,
+    // Unsetting these properties on the server since they might not be serializable
+    fetchFailureReason: null,
+    fetchMeta: null
+  };
+};
 function createBaseQuery(options, Observer, queryClient) {
   const client = solidJs.createMemo(() => exports.useQueryClient(queryClient?.()));
   const defaultedOptions = client().defaultQueryOptions(options());
@@ -74,26 +93,10 @@ function createBaseQuery(options, Observer, queryClient) {
     return observer.subscribe((result) => {
       queryCore.notifyManager.batchCalls(() => {
         const query = observer.getCurrentQuery();
-        const { refetch: refetch2, ...rest } = store.unwrap(result);
-        const unwrappedResult = {
-          ...rest,
-          // 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,
-          // Removing these properties since they might not be serializable
-          // fetchFailureReason: query.state.fetchFailureReason,
-          // fetchMeta: query.state.fetchMeta,
-          isInvalidated: query.state.isInvalidated
-        };
+        const unwrappedResult = hydrateableObserverResult(query, result);
         if (unwrappedResult.isError) {
-          {
-            console.error(unwrappedResult.error);
-          }
           reject(unwrappedResult.error);
-        }
-        if (unwrappedResult.isSuccess) {
+        } else {
           resolve(unwrappedResult);
         }
       })();
@@ -137,7 +140,8 @@ function createBaseQuery(options, Observer, queryClient) {
           }
         }
         if (!state.isLoading) {
-          resolve(state);
+          const query = observer.getCurrentQuery();
+          resolve(hydrateableObserverResult(query, state));
         }
       });
     },

package/build/dev.js

@@ -56,6 +56,25 @@ function reconcileFn(store, result, reconcileOption) {
   const newData = reconcile(result.data, { key: reconcileOption })(store.data);
   return { ...result, data: newData };
 }
+var hydrateableObserverResult = (query, result) => {
+  if (!isServer)
+    return result;
+  return {
+    ...unwrap(result),
+    // cast to refetch function should be safe, since we only remove it on the server,
+    // and refetch is not relevant on the server
+    refetch: void 0,
+    // 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,
+    isInvalidated: query.state.isInvalidated,
+    // Unsetting these properties on the server since they might not be serializable
+    fetchFailureReason: null,
+    fetchMeta: null
+  };
+};
 function createBaseQuery(options, Observer, queryClient) {
   const client = createMemo(() => useQueryClient(queryClient?.()));
   const defaultedOptions = client().defaultQueryOptions(options());
@@ -73,26 +92,10 @@ function createBaseQuery(options, Observer, queryClient) {
     return observer.subscribe((result) => {
       notifyManager.batchCalls(() => {
         const query = observer.getCurrentQuery();
-        const { refetch: refetch2, ...rest } = unwrap(result);
-        const unwrappedResult = {
-          ...rest,
-          // 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,
-          // Removing these properties since they might not be serializable
-          // fetchFailureReason: query.state.fetchFailureReason,
-          // fetchMeta: query.state.fetchMeta,
-          isInvalidated: query.state.isInvalidated
-        };
+        const unwrappedResult = hydrateableObserverResult(query, result);
         if (unwrappedResult.isError) {
-          {
-            console.error(unwrappedResult.error);
-          }
           reject(unwrappedResult.error);
-        }
-        if (unwrappedResult.isSuccess) {
+        } else {
           resolve(unwrappedResult);
         }
       })();
@@ -136,7 +139,8 @@ function createBaseQuery(options, Observer, queryClient) {
           }
         }
         if (!state.isLoading) {
-          resolve(state);
+          const query = observer.getCurrentQuery();
+          resolve(hydrateableObserverResult(query, state));
         }
       });
     },

package/build/index.cjs

@@ -57,6 +57,25 @@ function reconcileFn(store$1, result, reconcileOption) {
   const newData = store.reconcile(result.data, { key: reconcileOption })(store$1.data);
   return { ...result, data: newData };
 }
+var hydrateableObserverResult = (query, result) => {
+  if (!web.isServer)
+    return result;
+  return {
+    ...store.unwrap(result),
+    // cast to refetch function should be safe, since we only remove it on the server,
+    // and refetch is not relevant on the server
+    refetch: void 0,
+    // 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,
+    isInvalidated: query.state.isInvalidated,
+    // Unsetting these properties on the server since they might not be serializable
+    fetchFailureReason: null,
+    fetchMeta: null
+  };
+};
 function createBaseQuery(options, Observer, queryClient) {
   const client = solidJs.createMemo(() => exports.useQueryClient(queryClient?.()));
   const defaultedOptions = client().defaultQueryOptions(options());
@@ -74,23 +93,10 @@ function createBaseQuery(options, Observer, queryClient) {
     return observer.subscribe((result) => {
       queryCore.notifyManager.batchCalls(() => {
         const query = observer.getCurrentQuery();
-        const { refetch: refetch2, ...rest } = store.unwrap(result);
-        const unwrappedResult = {
-          ...rest,
-          // 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,
-          // Removing these properties since they might not be serializable
-          // fetchFailureReason: query.state.fetchFailureReason,
-          // fetchMeta: query.state.fetchMeta,
-          isInvalidated: query.state.isInvalidated
-        };
+        const unwrappedResult = hydrateableObserverResult(query, result);
         if (unwrappedResult.isError) {
           reject(unwrappedResult.error);
-        }
-        if (unwrappedResult.isSuccess) {
+        } else {
           resolve(unwrappedResult);
         }
       })();
@@ -134,7 +140,8 @@ function createBaseQuery(options, Observer, queryClient) {
           }
         }
         if (!state.isLoading) {
-          resolve(state);
+          const query = observer.getCurrentQuery();
+          resolve(hydrateableObserverResult(query, state));
         }
       });
     },

package/build/index.js

@@ -56,6 +56,25 @@ function reconcileFn(store, result, reconcileOption) {
   const newData = reconcile(result.data, { key: reconcileOption })(store.data);
   return { ...result, data: newData };
 }
+var hydrateableObserverResult = (query, result) => {
+  if (!isServer)
+    return result;
+  return {
+    ...unwrap(result),
+    // cast to refetch function should be safe, since we only remove it on the server,
+    // and refetch is not relevant on the server
+    refetch: void 0,
+    // 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,
+    isInvalidated: query.state.isInvalidated,
+    // Unsetting these properties on the server since they might not be serializable
+    fetchFailureReason: null,
+    fetchMeta: null
+  };
+};
 function createBaseQuery(options, Observer, queryClient) {
   const client = createMemo(() => useQueryClient(queryClient?.()));
   const defaultedOptions = client().defaultQueryOptions(options());
@@ -73,23 +92,10 @@ function createBaseQuery(options, Observer, queryClient) {
     return observer.subscribe((result) => {
       notifyManager.batchCalls(() => {
         const query = observer.getCurrentQuery();
-        const { refetch: refetch2, ...rest } = unwrap(result);
-        const unwrappedResult = {
-          ...rest,
-          // 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,
-          // Removing these properties since they might not be serializable
-          // fetchFailureReason: query.state.fetchFailureReason,
-          // fetchMeta: query.state.fetchMeta,
-          isInvalidated: query.state.isInvalidated
-        };
+        const unwrappedResult = hydrateableObserverResult(query, result);
         if (unwrappedResult.isError) {
           reject(unwrappedResult.error);
-        }
-        if (unwrappedResult.isSuccess) {
+        } else {
           resolve(unwrappedResult);
         }
       })();
@@ -133,7 +139,8 @@ function createBaseQuery(options, Observer, queryClient) {
           }
         }
         if (!state.isLoading) {
-          resolve(state);
+          const query = observer.getCurrentQuery();
+          resolve(hydrateableObserverResult(query, state));
         }
       });
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/solid-query",
-  "version": "5.0.0-beta.0",
+  "version": "5.0.0-beta.4",
   "description": "Primitives for managing, caching and syncing asynchronous and remote data in Solid",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -16,22 +16,24 @@
   "types": "./build/index.d.ts",
   "browser": {},
   "exports": {
-    "solid": {
-      "development": "./build/dev.js",
-      "import": "./build/index.js"
-    },
     "development": {
       "import": {
         "types": "./build/index.d.ts",
         "default": "./build/dev.js"
       },
-      "require": "./build/dev.cjs"
+      "require": {
+        "types": "./build/index.d.cts",
+        "default": "./build/dev.cjs"
+      }
     },
     "import": {
       "types": "./build/index.d.ts",
       "default": "./build/index.js"
     },
-    "require": "./build/index.cjs"
+    "require": {
+      "types": "./build/index.d.cts",
+      "default": "./build/index.cjs"
+    }
   },
   "sideEffects": [
     "./src/setBatchUpdatesFn.ts"
@@ -41,21 +43,22 @@
     "src"
   ],
   "dependencies": {
+    "solid-js": "^1.7.8",
     "@tanstack/query-core": "5.0.0-beta.0"
   },
   "devDependencies": {
-    "tsup-preset-solid": "^0.1.8",
-    "vite-plugin-solid": "^2.5.0"
+    "tsup-preset-solid": "^2.0.1",
+    "vite-plugin-solid": "^2.7.0"
   },
   "peerDependencies": {
-    "solid-js": "^1.6.13"
+    "solid-js": "^1.6.0"
   },
   "scripts": {
     "clean": "rimraf ./build && rimraf ./coverage",
     "test:eslint": "eslint --ext .ts,.tsx ./src",
     "test:types": "tsc",
     "test:lib": "vitest run --coverage",
-    "test:lib:dev": "pnpm run test:lib --watch",
+    "test:lib:dev": "vitest watch --coverage",
     "test:build": "publint --strict",
     "build": "tsup"
   }

package/src/__tests__/createQuery.test.tsx

@@ -1452,7 +1452,7 @@ describe('createQuery', () => {
       return (
         <div>
           <h1>
-            data: {state.data}, count: {count}, isFetching:{' '}
+            data: {state.data}, count: {count()}, isFetching:{' '}
             {String(state.isFetching)}
           </h1>
           <button onClick={() => setCount(1)}>inc</button>
@@ -4265,7 +4265,7 @@ describe('createQuery', () => {
       return (
         <div>
           <h2>Data: {JSON.stringify(state.data)}</h2>
-          <h2>forceValue: {forceValue}</h2>
+          <h2>forceValue: {forceValue()}</h2>
           <button onClick={forceUpdate}>forceUpdate</button>
         </div>
       )
@@ -4320,7 +4320,7 @@ describe('createQuery', () => {
       return (
         <div>
           <h2>Data: {JSON.stringify(state.data)}</h2>
-          <h2>forceValue: {forceValue}</h2>
+          <h2>forceValue: {forceValue()}</h2>
           <button onClick={forceUpdate}>forceUpdate</button>
         </div>
       )

package/src/__tests__/useIsFetching.test.tsx

@@ -239,7 +239,7 @@ describe('useIsFetching', () => {
 
       return (
         <div>
-          <div>isFetching: {isFetching}</div>
+          <div>isFetching: {isFetching()}</div>
         </div>
       )
     }

package/src/__tests__/useIsMutating.test.tsx

@@ -175,7 +175,7 @@ describe('useIsMutating', () => {
       })
       return (
         <div>
-          <div>mutating: {isMutating}</div>
+          <div>mutating: {isMutating()}</div>
         </div>
       )
     }

package/src/createBaseQuery.ts

@@ -18,9 +18,11 @@ import type { CreateBaseQueryOptions } from './types'
 import type { Accessor } from 'solid-js'
 import type { QueryClient } from './QueryClient'
 import type {
+  Query,
   QueryKey,
   QueryObserver,
   QueryObserverResult,
+  QueryState,
 } from '@tanstack/query-core'
 
 function reconcileFn<TData, TError>(
@@ -40,6 +42,49 @@ function reconcileFn<TData, TError>(
   return { ...result, data: newData } as typeof result
 }
 
+type HydrateableQueryState<TData, TError> = QueryObserverResult<TData, TError> &
+  QueryState<TData, TError>
+
+/**
+ * Solid's `onHydrated` functionality will silently "fail" (hydrate with an empty object)
+ * if the resource data is not serializable.
+ */
+const hydrateableObserverResult = <
+  TQueryFnData,
+  TError,
+  TData,
+  TQueryKey extends QueryKey,
+  T2,
+>(
+  query: Query<TQueryFnData, TError, TData, TQueryKey>,
+  result: QueryObserverResult<T2, TError>,
+): HydrateableQueryState<T2, TError> => {
+  // Including the extra properties is only relevant on the server
+  if (!isServer) return result as HydrateableQueryState<T2, TError>
+
+  return {
+    ...unwrap(result),
+
+    // cast to refetch function should be safe, since we only remove it on the server,
+    // and refetch is not relevant on the server
+    refetch: undefined as unknown as HydrateableQueryState<
+      T2,
+      TError
+    >['refetch'],
+
+    // 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,
+    isInvalidated: query.state.isInvalidated,
+
+    // Unsetting these properties on the server since they might not be serializable
+    fetchFailureReason: null,
+    fetchMeta: null,
+  }
+}
+
 // Base Query Function that is used to create the query.
 export function createBaseQuery<
   TQueryFnData,
@@ -54,6 +99,10 @@ export function createBaseQuery<
   Observer: typeof QueryObserver,
   queryClient?: Accessor<QueryClient>,
 ) {
+  type ResourceData =
+    | HydrateableQueryState<TData, TError>
+    | QueryObserverResult<TData, TError>
+
   const client = createMemo(() => useQueryClient(queryClient?.()))
 
   const defaultedOptions = client().defaultQueryOptions(options())
@@ -71,41 +120,19 @@ export function createBaseQuery<
 
   const createServerSubscriber = (
     resolve: (
-      data:
-        | QueryObserverResult<TData, TError>
-        | PromiseLike<QueryObserverResult<TData, TError> | undefined>
-        | undefined,
+      data: ResourceData | PromiseLike<ResourceData | undefined> | undefined,
     ) => void,
     reject: (reason?: any) => void,
   ) => {
     return observer.subscribe((result) => {
       notifyManager.batchCalls(() => {
         const query = observer.getCurrentQuery()
-        const { refetch, ...rest } = unwrap(result)
-        const unwrappedResult = {
-          ...rest,
-
-          // 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,
-          // Removing these properties since they might not be serializable
-          // fetchFailureReason: query.state.fetchFailureReason,
-          // fetchMeta: query.state.fetchMeta,
-          isInvalidated: query.state.isInvalidated,
-        }
+        const unwrappedResult = hydrateableObserverResult(query, result)
 
         if (unwrappedResult.isError) {
-          if (process.env['NODE_ENV'] === 'development') {
-            console.error(unwrappedResult.error)
-          }
           reject(unwrappedResult.error)
-        }
-        if (unwrappedResult.isSuccess) {
-          // Use of any here is fine
-          // We cannot include refetch since it is not serializable
-          resolve(unwrappedResult as any)
+        } else {
+          resolve(unwrappedResult)
         }
       })()
     })
@@ -148,7 +175,7 @@ export function createBaseQuery<
   let unsubscribe: (() => void) | null = null
 
   const [queryResource, { refetch, mutate }] = createResource<
-    QueryObserverResult<TData, TError> | undefined
+    ResourceData | undefined
   >(
     () => {
       return new Promise((resolve, reject) => {
@@ -159,8 +186,10 @@ export function createBaseQuery<
             unsubscribe = createClientSubscriber()
           }
         }
+
         if (!state.isLoading) {
-          resolve(state)
+          const query = observer.getCurrentQuery()
+          resolve(hydrateableObserverResult(query, state))
         }
       })
     },