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

[arnolicious]

Description

This fixes an effect_orphan error that occurs, when createQuery gets called in an event listener, or simply outside of component initialization.

I simply added $effect.root around the $effects in createBaseQuery.svelte.ts which fixed the error on my end while seemingly not breaking anything.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 383aaa5

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing touches

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment

Tip

👮 Agentic pre-merge checks are now available in preview!

Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.

• Built-in checks – Quickly apply ready-made checks to enforce title conventions, require pull request descriptions that follow templates, validate linked issues for compliance, and more.
• Custom agentic checks – Define your own rules using CodeRabbit’s advanced agentic capabilities to enforce organization-specific policies and workflows. For example, you can instruct CodeRabbit’s agent to verify that API documentation is updated whenever API schema files are modified in a PR. Note: Upto 5 custom checks are currently allowed during the preview period. Pricing for this feature will be announced in a few weeks.

Please see the documentation for more information.

Example:

reviews:
  pre_merge_checks:
    custom_checks:
      - name: "Undocumented Breaking Changes"
        mode: "warning"
        instructions: |
          Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).

Please share your feedback with us on this Discord post.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[lachlancollins]

Hi @arnolicious , could you also create a repro or a test for your bug?

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 84fe536

Command	Status	Duration	Result
nx affected --targets=test:sherif,test:knip,tes...	⛔ Cancelled	23s	View ↗
nx run-many --target=build --exclude=examples/*...	✅ Succeeded	6s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-09-26 10:13:10 UTC

[arnolicious]

I wasn't sure how best to do this, because in the tests this change basically only results in not needing the withEffectRoot setup.
In practice, this comes in handy when you do something like this, which would throw an error otherwise:

<script>
  const onCreateQuery = () => {
    createQuery({...})
  }
</script>

<button onclick={onCreateQuery} />

Let me know if you have other ideas for the tests

[lachlancollins]

I wasn't sure how best to do this, because in the tests this change basically only results in not needing the withEffectRoot setup. In practice, this comes in handy when you do something like this, which would throw an error otherwise:

<script>
  const onCreateQuery = () => {
    createQuery({...})
  }
</script>

<button onclick={onCreateQuery} />

Let me know if you have other ideas for the tests

What's the purpose of calling createQuery in an event like that? It seems like there might be a better way to achieve what you're after, but I might be missing something!

[arnolicious]

I encountered this when working on a decently complex use case, but very roughly:

• The underlying data structure is a list of items, that can be nested twice, each level being paginated.
• At first, a query is created for the root element, which returns the root and it's children, and in those each of those children, the first few grandchildren
• The user then can decide to want to load more of those grandchildren for a given child X
• In that moment, I create a new query specifically for X

The end result is basically:

• root query
  • potential child query 1
  • potential child query 2
  • etc

And the child queries being created on demand, imperatively. Considering the small fix, this seemed like the easiest solution

[lachlancollins]

I encountered this when working on a decently complex use case, but very roughly:

• The underlying data structure is a list of items, that can be nested twice, each level being paginated.
• At first, a query is created for the root element, which returns the root and it's children, and in those each of those children, the first few grandchildren
• The user then can decide to want to load more of those grandchildren for a given child X
• In that moment, I create a new query specifically for X

The end result is basically:

• root query

  • potential child query 1
  • potential child query 2
  • etc

And the child queries being created on demand, imperatively. Considering the small fix, this seemed like the easiest solution

It sounds like this might be more easily and more "correctly" solved with child components - are you able to spin up a repro?

[arnolicious]

I won't really be able to create a reproduction for this use case, since the corresponding api is the central reason why this is needed.

Child components cannot be used, because to work with the data and display it, I actually flatten all items into a simple array.

If this doesn't get merged, I would be fine with it, as I have been running this patch since discovering the issue.
However I also have not seen any disadvantage when using effect.root...