Single fetch typesafety when using unstable_data conditionally

[goamaan]

Reproduction

Tested on my remix project

System Info

System:
    OS: macOS 14.5
    CPU: (8) arm64 Apple M1 Pro
    Memory: 159.25 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.17.1 - ~/.nvm/versions/node/v18.17.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.17.1/bin/yarn
    npm: 9.6.7 - ~/.nvm/versions/node/v18.17.1/bin/npm
    pnpm: 9.10.0 - ~/.nvm/versions/node/v18.17.1/bin/pnpm
    bun: 1.1.26 - ~/.bun/bin/bun
  Browsers:
    Chrome: 128.0.6613.138
    Safari: 17.5
  npmPackages:
    @remix-run/dev: ^2.12.0 => 2.12.0 
    @remix-run/node: ^2.12.0 => 2.12.0 
    @remix-run/react: ^2.12.0 => 2.12.0 
    @remix-run/serve: ^2.12.0 => 2.12.0 
    vite: ^5.1.0 => 5.4.3

Used Package Manager

npm

Expected Behavior

Related to #9834
Has this been fixed with the newest single fetch typesafety changes in 2.12.0? (it was mentioned in this PR #9893) I'm using conform and am conditionally using unstable_data when returning a reply with a toast (need to add commit session headers) or without a toast (just a form response)

this is in my action:

    if (submission.status !== "success") {
        return {
            reply: submission.reply(),
        }
    }

    switch (submission.value.intent) {
        case "create": {
            const { name, description, enabled } = submission.value
            try {
                await db.featureFlag.create({
                    data: { name, description, enabled },
                })
            } catch (e) {
                return toastReply(session, {
                    message: "Feature flag already exists",
                    reply: submission.reply({ resetForm: true }),
                })
            }

            return toastReply(session, {
                message: "Feature flag created",
                reply: submission.reply({ resetForm: true }),
            })
        }
        case "update": {
            const { id, description, enabled } = submission.value
            await db.featureFlag.update({
                where: { id },
                data: { description, enabled },
            })

            return toastReply(session, {
                message: "Feature flag updated",
                reply: submission.reply({ resetForm: true }),
            })
        }
        case "delete": {
            const { id } = submission.value
            await db.featureFlag.delete({
                where: { id },
            })

            return toastReply(session, {
                message: "Feature flag updated",
                reply: submission.reply({ resetForm: true }),
            })
        }
        default:
            return {
                reply: submission.reply({ resetForm: true }),
            }
    }

and this is the implementation of toastReply

export async function toastReply(
    session: Session,
    {
        message,
        description,
        reply,
        headers,
    }: {
        message: string
        description?: string
        reply: SubmissionResult<string[]>
        headers?: ResponseInit["headers"]
    }
) {
    session.flash("flash", {
        type: "success",
        message,
        description,
    })
    const cookie = await commitSession(session)
    const newHeaders = new Headers(headers)
    newHeaders.append("Set-Cookie", cookie)

    return data(
        {
            reply,
        },
        {
            headers: newHeaders,
        }
    )
}

Actual Behavior

i get an error on fetcher.data?.reply when using the action result for conform's server side validation

const [form, fields] = useForm({
        id: "create-feature-flag",
        onValidate({ formData }) {
            return parseWithZod(formData, { schema: FeatureFlagSchema })
        },
        lastResult: fetcher.data?.reply,
        constraint: getZodConstraint(FeatureFlagSchema),
        shouldValidate: "onBlur",
        shouldRevalidate: "onInput",
})

Property 'reply' does not exist on type '{ type: string; data: { reply: SubmissionResult<string[]>; }; init: { headers?: [string, string][] | Record<string, string> | { append: undefined; delete: undefined; ... 8 more ...; [Symbol.iterator]: undefined; } | undefined; status?: number | undefined; statusText?: string | undefined; } | null; }'.ts(2339)

[brophdawg11]

Duplicate of #9826

[github-actions]

🤖 Hello there,

We just published version 2.12.1-pre.0 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[github-actions]

🤖 Hello there,

We just published version 2.12.1 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!