Closed
Description
Please provide the ability to use toValue to pass reactive parameters.
Why in solidjs parameters are passed in callback, at the same time Vue, which is also built on the signal system, does not have such a possibility. This requires writing additional abstractions that worsen dx and affect performance.
Example
Vue js
<script setup lang="ts">
import { useForm } from '@tanstack/vue-form'
import { useQuery } from '@tanstack/vue-query'
import { watchEffect, reactive } from 'vue'
const { data, isLoading } = useQuery({
queryKey: ['data'],
queryFn: async () => {
await new Promise((resolve) => setTimeout(resolve, 1000))
return { firstName: 'FirstName', lastName: 'LastName' }
},
})
const firstName = computed(() => data.value?.firstName || '')
const lastName = computed(() => data.value?.lastName || '')
const defaultValues = reactive({
firstName,
lastName,
})
const form = useForm({
defaultValues,
onSubmit: async ({ value }) => {
// Do something with form data
console.log(value)
},
})
</script>
<template>
<p v-if="isLoading">Loading..</p>
<form v-else @submit.prevent.stop="form.handleSubmit">
<!-- ... -->
</form>
</template>import { createForm } from '@tanstack/solid-form'
import { createQuery } from '@tanstack/solid-query'
export default function App() {
const { data, isLoading } = createQuery(() => ({
queryKey: ['data'],
queryFn: async () => {
await new Promise((resolve) => setTimeout(resolve, 1000))
return { firstName: 'FirstName', lastName: 'LastName' }
},
}))
const form = createForm(() => ({
defaultValues: {
firstName: data?.firstName ?? '',
lastName: data?.lastName ?? '',
},
onSubmit: async ({ value }) => {
// Do something with form data
console.log(value)
},
}))
if (isLoading) return <p>Loading..</p>
return null
}The same problem exists in other tanstack libraries
An example of how pinia-colada fixes the shortcomings of vue-query
Metadata
Metadata
Assignees
Labels
No labels