Question regarding last blog post

[gmcamposano]

So, I read the following:

const [issues, setIssues] = React.useState()

const {data} = useQuery({ queryKey: ['issues'], queryFn: ()=> axios.get('/issues').then(res => res.data) onSuccess: data => setIssues(data) })

I am guitly of doing this. It says that react query is already a state manager. So, if i have an input <input value={data.inputValue} /> how would i use the onChange to set the issue without having to use react useState?

PS. Right now what i do it: update the react state and then use it as value inside the input, so when it is updated, it rerenders the changed value -- but reading the blog post thats a big no no.

[TkDodo]

you still need local state to perform ephemeral updates. You're looking at "form state", which gets initialized with values from the server. Have a read at: https://tkdodo.eu/blog/react-query-and-forms

in your contrived example, I'd do:

const [issues, setIssues] = React.useState()

const { data } = useQuery({
  queryKey: ['issues'],
  queryFn: ()=> axios.get('/issues').then(res => res.data)
})

const inputValue = issues ?? data.inputValue

<input value={inputValue} onChange={e => setIssues(e.target.value) } />

[gmcamposano]

Thank you for your answer.
Somehow I thought i had to use the useMutation hook without calling mutate or something. I figured that as you said that its not quite the right thing to do, to track state with react query and also to retrack them with useState.