fix(svelte-query): fix error when creating query outside of component

.github/workflows/release.yml

@@ -38,10 +38,13 @@ jobs:
         run: pnpm run changeset:version
       - name: Commit version files
         run: |
-          git config --global user.name 'Tanner Linsley'
-          git config --global user.email '[email protected]'            git add -A
-          git commit -m "ci: Version Packages"
-          git push
+          if [[ -n "$(git status --porcelain)" ]]; then
+            git config --global user.name 'Tanner Linsley'
+            git config --global user.email '[email protected]'
+            git add -A
+            git commit -m "ci: Version Packages"
+            git push
+          fi
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       - name: Publish Packages

packages/svelte-query/src/createBaseQuery.svelte.ts

@@ -57,26 +57,29 @@ export function createBaseQuery<
     createResult(),
   )
 
-  $effect(() => {
-    const unsubscribe = isRestoring.current
-      ? () => undefined
-      : observer.subscribe(() => update(createResult()))
-    observer.updateResult()
-    return unsubscribe
-  })
+  // Avoid effect_orphan error when creating a query inside an event handler instead of during component initialization
+  $effect.root(() => {
+    $effect(() => {
+      const unsubscribe = isRestoring.current
+        ? () => undefined
+        : observer.subscribe(() => update(createResult()))
+      observer.updateResult()
+      return unsubscribe
+    })
 
-  $effect.pre(() => {
-    observer.setOptions(resolvedOptions)
-    // The only reason this is necessary is because of `isRestoring`.
-    // Because we don't subscribe while restoring, the following can occur:
-    // - `isRestoring` is true
-    // - `isRestoring` becomes false
-    // - `observer.subscribe` and `observer.updateResult` is called in the above effect,
-    //   but the subsequent `fetch` has already completed
-    // - `result` misses the intermediate restored-but-not-fetched state
-    //
-    // this could technically be its own effect but that doesn't seem necessary
-    update(createResult())
+    $effect.pre(() => {
+      observer.setOptions(resolvedOptions)
+      // The only reason this is necessary is because of `isRestoring`.
+      // Because we don't subscribe while restoring, the following can occur:
+      // - `isRestoring` is true
+      // - `isRestoring` becomes false
+      // - `observer.subscribe` and `observer.updateResult` is called in the above effect,
+      //   but the subsequent `fetch` has already completed
+      // - `result` misses the intermediate restored-but-not-fetched state
+      //
+      // this could technically be its own effect but that doesn't seem necessary
+      update(createResult())
+    })
   })
 
   return query

packages/svelte-query/tests/createQuery.svelte.test.ts

@@ -1892,4 +1892,91 @@ describe('createQuery', () => {
       expect(query.error?.message).toBe('Local Error')
     }),
   )
+
+  it('should return the correct states for a successful query when running without effect root', async () => {
+    const { promise, resolve } = promiseWithResolvers<string>()
+
+    const query = createQuery<string, Error>(
+      () => ({
+        queryKey: ['test'],
+        queryFn: () => promise,
+      }),
+      () => queryClient,
+    )
+
+    if (query.isPending) {
+      expectTypeOf(query.data).toEqualTypeOf<undefined>()
+      expectTypeOf(query.error).toEqualTypeOf<null>()
+    } else if (query.isLoadingError) {
+      expectTypeOf(query.data).toEqualTypeOf<undefined>()
+      expectTypeOf(query.error).toEqualTypeOf<Error>()
+    } else {
+      expectTypeOf(query.data).toEqualTypeOf<string>()
+      expectTypeOf(query.error).toEqualTypeOf<Error | null>()
+    }
+
+    const promise1 = query.promise
+
+    expect(query).toEqual({
+      data: undefined,
+      dataUpdatedAt: 0,
+      error: null,
+      errorUpdatedAt: 0,
+      failureCount: 0,
+      failureReason: null,
+      errorUpdateCount: 0,
+      isEnabled: true,
+      isError: false,
+      isFetched: false,
+      isFetchedAfterMount: false,
+      isFetching: true,
+      isPaused: false,
+      isPending: true,
+      isInitialLoading: true,
+      isLoading: true,
+      isLoadingError: false,
+      isPlaceholderData: false,
+      isRefetchError: false,
+      isRefetching: false,
+      isStale: true,
+      isSuccess: false,
+      refetch: expect.any(Function),
+      status: 'pending',
+      fetchStatus: 'fetching',
+      promise: expect.any(Promise),
+    })
+    resolve('resolved')
+    await vi.waitFor(() =>
+      expect(query).toEqual({
+        data: 'resolved',
+        dataUpdatedAt: expect.any(Number),
+        error: null,
+        errorUpdatedAt: 0,
+        failureCount: 0,
+        failureReason: null,
+        errorUpdateCount: 0,
+        isEnabled: true,
+        isError: false,
+        isFetched: true,
+        isFetchedAfterMount: true,
+        isFetching: false,
+        isPaused: false,
+        isPending: false,
+        isInitialLoading: false,
+        isLoading: false,
+        isLoadingError: false,
+        isPlaceholderData: false,
+        isRefetchError: false,
+        isRefetching: false,
+        isStale: true,
+        isSuccess: true,
+        refetch: expect.any(Function),
+        status: 'success',
+        fetchStatus: 'idle',
+        promise: expect.any(Promise),
+      }),
+    )
+
+    expect(promise1).toBe(query.promise)
+  })
 })