Using the refetch function useQuery, put the refetch function in the button, and when the button is clicked, the data is fetched again through the api-call. I wanted to, but it didn’t happen.
function SeedMaterialDetails(id: number) {
return axios.get(`/detail/${id}`, {
headers: {
"Content-Type": "application/json",
},
})
}
const { data: SeedDetail, refetch: SeedDetaiList } = useQuery(
["seedId", seedId],
() => SeedMaterialDetails(seedId),
{
onSuccess: (data) => {
console.log(data);
},
onError: () => {},
onSettled: (data, context) => {
}
}
);
const [value, setValue] = useState("");
const onChangeValue = (event: event: React.ChangeEvent<HTMLInputElement>) => {
setValue(event.target.value)
}
const handleMaterialSave = useCallback(
(event: React.ChangeEvent<FormEvent>) => {
event.preventDefault();
console.log([value]);
SeedDetaiList();
},
[SeedDetaiList]
);
return (
<>
<input
type="text"
value={value}
onChange={onChangeValue}
<button onClick={handleMaterialSave}>저장</button>
</>
)
I put the refetch function in handleMaterialSave and when the button works, I thought the useQuery api would call but it doesn’t respond.
I want to call the useQuery api again when I click the Button, but how do I do it?
