CODEWITHSUNDEEP
reactjsreact-query
user9361329
user9361329

Reputation:

how to call reactQuery refetch in input onchange event in reactjs

In my React application, I need to call does exit API. API call should happen when change event in the input for that, I am using the reactQuery refetch to do that.

I had tried with below code

const [createObj, setCreateObj] = useState(mCreateObj);

const { data: doexit, refetch: doexitRefetch } = useQuery('getDoexit', () => api.doexitAPI(createObj.c_name), { enabled: false });

const handleInput = ({ target: { name, value } }) => { setCreateObj(state => ({ ...state, [name]: value }), []); }

export const doexitAPI= (value) => axios.get(/doexist/${value}, { headers: setHeader }).then(res => res);

useEffect(() => { console.log(createObj) doexitRefetch(); }, [createObj.mx_name])

How to call in input onchange event

Upvotes: 1

Views: 5371

Answers (2)

Rocky
Rocky

Reputation: 117

You can include the input in your query key, for example if bar is your input

useQuery([endpoints.foo, bar], queryFn);

Upvotes: 0

Saeed Hemmati
Saeed Hemmati

Reputation: 505

You can invalidate your query and handle fetch data again with query keys.

https://react-query.tanstack.com/guides/query-keys#if-your-query-function-depends-on-a-variable-include-it-in-your-query-key

const { data: doexit, refetch: doexitRefetch } = useQuery(['getDoexit',  createObj.mx_name], () => api.doexitAPI(createObj.c_name), { enabled: false });

Upvotes: 2

Related Questions