Dev. Woojeong

import ky from 'ky'
import { useQuery } from '@tanstack/react-query'
import { userSchema } from '../schema/user.schema'
const api = ky.create({ prefixUrl: '/api/v1' })
export function useUsers() {
  return useQuery({
    queryKey: ['users'],
    queryFn: async () => {
      const data = await api.get('users').json()
      return userSchema.array().parse(data)
    },
  })
}

import { useForm } from '@tanstack/react-form'
import { zodValidator } from '@tanstack/zod-form-adapter'
import { createUserSchema } from '../schema/user.schema'
const form = useForm({
  validatorAdapter: zodValidator(),
  defaultValues: { name: '', email: '' },
  onSubmit: async ({ value }) => {
    await createUser.mutateAsync(value)
  },
})
<form.Subscribe selector={(s) => s.isSubmitting}>
  {(isSubmitting) => (
    <Button disabled={isSubmitting}>
      {isSubmitting ? <Spinner /> : 'Submit'}
    </Button>
  )}
</form.Subscribe>