fix(solid-query): fetch on status-only reads

.changeset/solid-query-status-resource.md

@@ -0,0 +1,5 @@
+---
+"@tanstack/solid-query": patch
+---
+
+Start Solid query resources when status fields are read so curried `queryOptions` fetch on mount without requiring `data` access.

packages/query-devtools/src/__tests__/utils.test.ts

@@ -982,6 +982,7 @@ describe('Utils tests', () => {
   describe('setupStyleSheet', () => {
     afterEach(() => {
       document.head.querySelector('#_goober')?.remove()
+      delete (window as Window & { __nonce__?: string }).__nonce__
     })
 
     it('should not insert any style tag when "nonce" is missing', () => {
@@ -1004,6 +1005,14 @@ describe('Utils tests', () => {
       expect(styleTag?.tagName).toBe('STYLE')
     })
 
+    it('should set "window.__nonce__" from the provided nonce', () => {
+      setupStyleSheet('test-nonce')
+
+      expect(
+        (window as Window & { __nonce__?: string }).__nonce__,
+      ).toBe('test-nonce')
+    })
+
     it('should set the "nonce" attribute on the inserted style tag', () => {
       setupStyleSheet('test-nonce')
 

packages/query-devtools/src/utils.tsx

@@ -306,6 +306,7 @@ export const deleteNestedDataByPath = (
 // Adds a nonce to the style tag if needed
 export const setupStyleSheet = (nonce?: string, target?: ShadowRoot) => {
   if (!nonce) return
+  ;(window as Window & { __nonce__?: string }).__nonce__ = nonce
   const styleExists =
     document.querySelector('#_goober') || target?.querySelector('#_goober')
 

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

@@ -30,6 +30,7 @@ import {
   QueryClient,
   QueryClientProvider,
   keepPreviousData,
+  queryOptions,
   useQuery,
 } from '..'
 import { Blink, mockOnlineManagerIsOnline, setActTimeout } from './utils'
@@ -244,6 +245,71 @@ describe('useQuery', () => {
     expect(rendered.getByText('test')).toBeInTheDocument()
   })
 
+  it('should fetch when a curried queryOptions result only reads status fields', async () => {
+    const key = queryKey()
+    const queryFn = vi.fn((slug: string) => `test-${slug}`)
+    const fetchQueryOptions = (slug: string) =>
+      queryOptions({
+        queryKey: [key, slug],
+        queryFn: () => queryFn(slug),
+      })
+
+    function Page() {
+      const options = fetchQueryOptions('slug')
+      const state = useQuery(() => options)
+
+      return (
+        <Switch>
+          <Match when={state.isPending}>pending</Match>
+          <Match when={state.isError}>error</Match>
+          <Match when={state.isSuccess}>success</Match>
+        </Switch>
+      )
+    }
+
+    const rendered = render(() => (
+      <QueryClientProvider client={queryClient}>
+        <Page />
+      </QueryClientProvider>
+    ))
+
+    expect(rendered.getByText('pending')).toBeInTheDocument()
+    await vi.advanceTimersByTimeAsync(10)
+    expect(queryFn).toHaveBeenCalledTimes(1)
+    expect(rendered.getByText('success')).toBeInTheDocument()
+  })
+
+  it('should fetch when a curried queryOptions result only reads resource fields', async () => {
+    const key = queryKey()
+    const queryFn = vi.fn((slug: string) => `test-${slug}`)
+    const fetchQueryOptions = (slug: string) =>
+      queryOptions({
+        queryKey: [key, slug],
+        queryFn: () => queryFn(slug),
+      })
+
+    function Page() {
+      const options = fetchQueryOptions('slug')
+      const state = useQuery(() => options)
+
+      void state.error
+      void state.failureReason
+      void state.refetch
+      void state.promise
+
+      return <div>mounted</div>
+    }
+
+    const rendered = render(() => (
+      <QueryClientProvider client={queryClient}>
+        <Page />
+      </QueryClientProvider>
+    ))
+
+    expect(rendered.getByText('mounted')).toBeInTheDocument()
+    await vi.advanceTimersByTimeAsync(10)
+    expect(queryFn).toHaveBeenCalledTimes(1)
+  })
   it('should return the correct states for a successful query', async () => {
     const key = queryKey()
     const states: Array<UseQueryResult<string>> = []

packages/solid-query/src/useBaseQuery.ts

@@ -99,6 +99,33 @@ const hydratableObserverResult = <
   return obj
 }
 
+const resourceTrackingProps = new Set<PropertyKey>([
+  'dataUpdatedAt',
+  'error',
+  'errorUpdatedAt',
+  'failureCount',
+  'failureReason',
+  'errorUpdateCount',
+  'isError',
+  'isFetched',
+  'isFetchedAfterMount',
+  'isFetching',
+  'isLoading',
+  'isPending',
+  'isLoadingError',
+  'isInitialLoading',
+  'isPaused',
+  'isPlaceholderData',
+  'isRefetchError',
+  'isRefetching',
+  'isStale',
+  'isSuccess',
+  'isEnabled',
+  'refetch',
+  'promise',
+  'status',
+  'fetchStatus',
+])
 // Base Query Function that is used to create the query.
 export function useBaseQuery<
   TQueryFnData,
@@ -381,6 +408,11 @@ export function useBaseQuery<
         }
         return queryResource()?.data
       }
+      if (resourceTrackingProps.has(prop)) {
+        // Solid resources are lazy, so status-only consumers still need to read
+        // the resource once to start the observer subscription and fetch.
+        queryResource()
+      }
       return Reflect.get(target, prop)
     },
   }