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 — Markido
– Markido, Commented Aug 4, 2021 at 7:18

hendra · Accepted Answer · 2021-08-04 07:29:17Z

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 4, 2021 at 7:29

hendra

2,6515 gold badges24 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

medeaoblongata · Accepted Answer · 2022-05-31 08:40:34Z

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, 2022 at 8:40

medeaoblongata

6,5923 gold badges30 silver badges45 bronze badges

answered May 25, 2022 at 7:41

Nouman Ahmad

11 bronze badge

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related