How to use useSelect and useUpdate at the same time ?

[francoisdtm]

Hi!

I would like to fetch a user's profile using the useSelect hook, and then setting text fields accordingly. This part is pretty simple. I would also want to edit those text fields; and update all values when a button is pressed. For this part, I guess I need to use the useUpdate hook. My question is: how to make this possible ? I manage to render values correctly, but I cannot manage to make the text fields editable.

Here is a simple code that explains the problem:

interface Profile {
    firstname: string
}

const Account: NextPage = () => {
    const [{ data }, _] = useSelect<Profile>('profiles')
    const [ __, update] = useUpdate<Profile>('profiles')

    const [firstname, setFirstname] = useState('')
    
    const updateProfile = async () => await update({firstname}, (query) => query)

    return <>
        <input type="text" id="firstname" name="firstname" value={data? data[0].firstname: ''} onChange={(e) => setFirstname(e.target.value)}/>
        <input type="submit" value="Submit" onClick={updateProfile}/>
    </>
}

Thanks in advance,