useQuery doesn't return the data and the function is returned

Question

I'm trying to get the list of the chats in my app using react-query(useQuery). my API call is in a different component and I'm using Axios to get the data. but the component is returning the function itself not the data .which part is Wrong?

import { useQuery } from "react-query";
import axios from "axios";

const getContacts = async () => {
  const headers = { Authorization: localStorage.getItem("token") };
  const options = {
    method: "GET",
    url: "http://127.0.0.1:8000/chat/mine/",
    headers: headers,
  };
  const { data } = await axios.request(options);

  return data;
};
function GetUserDataUseQuery() {
  return useQuery("getContacts", getContacts);
}
export default GetUserDataUseQuery;

function getUserData() {
  const data = GetUserDataUseQuery;

  return (dispatch) => {
    dispatch({
      type: GET_CONTACTS,
      payload: [],
    });
  };
}

I am a little confused what the getUserData function is supposed to do, also, const data = GetUserDataUseQuery; should be const data = useUserData() (change to lower case and rename for best practice)` since that's a hook — goto
– goto, Commented Dec 30, 2021 at 15:16
"Which part is wrong?" well, for starters, that's an illegal hook call, hooks can only be called from function components or other hooks. Second, your getUserData returns a function, and I don't see any components, so what's your question? — Jared Smith
– Jared Smith, Commented Dec 30, 2021 at 15:17
getUserData function has been used in a component and actually dispatches the values to reducer .and I didn't use useUserData because getUserData is not in a component.I've used this type of code for useMutation and it worked correctly — Hamid
– Hamid, Commented Dec 30, 2021 at 15:24
the component is in speared place and it calls the getUserData on loading .getUserData is actually an action to dispatch data to reducer — Hamid
– Hamid, Commented Dec 30, 2021 at 15:37
You'll need to refactor your code to properly handle your use case then - whatever you have right now above is not correct. — goto
– goto, Commented Dec 30, 2021 at 15:39

Joel Davey · Accepted Answer · 2022-08-21 20:15:27Z

2

I suggest you refactor your code a little to fix some of your problems:

const getContacts = async () => { /*...*/ }
const useGetContacts = () => {
  return useQuery('getContacts', getContacts)
}

// `useGetContacts` is a hook, so it should be called inside of a 
// component or another hook - you *cannot* call a hook inside of a 
// simple function, which is what you're attempting to do inside `getUserData`

function MyComponent() {
  const contacts = useGetContacts();
  // ...
}

Alternatively, if you do want to use getContacts as if it was a function, then simply don't wrap it inside a useQuery, since that's what turns it into a hook.

async function getUserData() {
  const data = await getContacts()
  // ...
}

edited Aug 21, 2022 at 20:15

Joel Davey

2,6631 gold badge24 silver badges21 bronze badges

answered Dec 30, 2021 at 15:23

goto

4,44517 silver badges23 bronze badges

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

3 Comments

Hamid Over a year ago

the getUserData() is an action and has been called inside a component to get the data, I've used useMutation in exact way and it works very good

goto Over a year ago

I don't have context of how you've used useMutation before, so I can't comment on that, but given your original code, you can only use hooks inside function components and/or custom hooks - see Breaking the Rules of Hooks.

Hamid Over a year ago

I found out what to do based on your suggestion.thank you

Collectives™ on Stack Overflow

useQuery doesn't return the data and the function is returned

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related