Cannot call useQuery inside event handler (react-query, react-hook-form)

Question

I have to call useQuery inside event handler. (user registration) and Im trying something like this.

const [postUser, { isError, isLoading, data }] = useQuery('user', () =>
    axios.post(API_URL, { query: GET_TOKEN_QUERY }).then((res) => res.data)
  )

  const openModalCallback = React.useCallback(
    (modalName) => {
      onOpenModal(modalName)
    },
    [onOpenModal]
  )

  async function onSubmit(data: LoginInputs) {
    if (data.checkbox) {
      postUser()
    }
  }

But I get an error like this and cant resolve it. Help me please.

Does this answer your question? [React-Query: How to useQuery when button is clicked](https://stackoverflow.com/questions/62340697/react-query-how-to-usequery-when-button-is-clicked) — Markido, Aug 04 '21 at 07:18

score 1 · Answer 1 · answered Aug 04 '21 at 07:29

1

If you want to create/update/delete data or perform server side-effects (opposed to just read data from server), better use useMutation.

The hook returns a mutate() function which you can call onSubmit().

answered Aug 04 '21 at 07:29

hendra

2,531
5
22
34

score 0 · Answer 2 · edited May 31 '22 at 08:40

0

You cannot simply post the data with the useQuery hook, for that you have to use the useMutation() hook and it returns a function which you can call inside an event handler.

edited May 31 '22 at 08:40

brennanyoung

6,243
3
26
44

answered May 25 '22 at 07:41

Nouman Ahmad

1
1

Cannot call useQuery inside event handler (react-query, react-hook-form)

2 Answers2