Skip to content

[🐞] onResolved cannot return a Promise #7086

@maiieul

Description

@maiieul
Contributor

Which component is affected?

Qwik Runtime

Describe the bug

Trying to await a function inside onResolved in a I get

Type '(appointments: MyCustomType) => Promise' is not assignable to type '(value: MyCustomType) => JSXOutput'.
Type 'Promise' is not assignable to type 'JSXOutput'.ts(2322)
core.d.ts(2280, 5): The expected type comes from property 'onResolved' which is declared here on type 'IntrinsicAttributes & ResourceProps'

But even though typescript complains, the code works on my end. So I guess it's just an easy fix on the ts side.

Reproduction

https://stackblitz.com/edit/github-b7kqvv?file=src%2Froutes%2Findex.tsx

Steps to reproduce

Open stackblitz repro, maybe edit the index.tsx file (add a space anywhere to get the ts highlighter).

System Info

🙅‍♂️

Additional Information

No response

Activity

Varixo

Varixo commented on Nov 23, 2024

@Varixo
Member

This is probably fixed in v2 :D

maiieul

maiieul commented on Nov 26, 2024

@maiieul
ContributorAuthor

Although the type fix is probably an easy fix in v1 too no?

self-assigned this
on Mar 15, 2025
moved this from Backlog to Waiting For Review in Qwik Developmenton Mar 19, 2025
wmertens

wmertens commented on Apr 28, 2025

@wmertens
Member

Ok I see - but why use an async function here? The render functions are like inline components and those aren't supposed to be async, because it breaks reactivity tracking.

So not sure we should support this @maiieul @Varixo

maiieul

maiieul commented on Apr 28, 2025

@maiieul
ContributorAuthor

Hmmm good point. I intuitively went for async inside onResolved to track some analytics data in our codebase. It does work for this use-case but if it breaks reactivity in certain cases then we need to document not to do that and instead create a component$ that can be passed to the onResolved.

maiieul

maiieul commented on Apr 28, 2025

@maiieul
ContributorAuthor

@wmertens are you sure that the render functions behave like inline components and that it breask reactivity tracking? Shouldn't we have a test breaking in that case?

It seems to me that doing

        onResolved={async (data) => {
          return <p>Data: {data}</p>;
        }}

is different from

        onResolved={async (data) => {
          return <InlineComponent data={data} />;
        }}

...

const InlineComponent = async ({data}: {data:string}) => {
  return <p>Data: {data}</p>
}

If returning Promise<JSXOutput> doesn't break reactivity I think it's a more intuitive API than constraining the user into creating a component$ just to handle side effects.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

    Participants

    @wmertens@JerryWu1234@maiieul@Varixo

    Issue actions

      [🐞] onResolved cannot return a Promise · Issue #7086 · QwikDev/qwik