How do I pass the params to the react query using hooks

Question

I am trying to pass the params to the react query through the hook.

export const useUserInfo = (enabled, {token}) => {
  return useQuery(
    ["users-info", token],
    () => fetchUserInfo(token),
    {
      enabled: enabled,
    },
  );
};

const Auth = () => {
    const { refetch } = useUserInfo(false);  // calling this hook and getting refetch
    
      const handleLoginPopup = async () => {
       try {
           const token = "abcd121212"

         const { data: userInfo } = await refetch(true, {token:token }); // Here I want to pass a token 

         dispatch({ type: "SET_USER", payload: userInfo });

         navigate("/");
         location.reload();
    } catch (error) {
      console.error(error);
    }
  };
}

Here, But I am not able to pass it. as I am getting an error as token is undefined here even after defining it . also I tried giving a default value as well.

Can any one help me in passing the extra params to the react query hook.

Does this answer your question? https://stackoverflow.com/questions/67796103/refetch-with-different-data-react-query — Lin Du, Aug 23 '23 at 06:36
Can you not pass the token while initializing, `const { refetch } = useUserInfo(false, TOKEN);`? — Rayon, Aug 23 '23 at 07:10
No @Rayon at that time I don't have token with me. That's why I need to do like this — ganesh kaspate, Aug 23 '23 at 07:11
@ganeshkaspate - Try this - https://tkdodo.eu/blog/react-query-fa-qs#how-can-i-pass-parameters-to-refetch — Rayon, Aug 23 '23 at 07:21

score 0 · Answer 1 · answered Aug 23 '23 at 08:48

As explained in the link presented by @Rayon, I think you have the wrong approach altogether.

The token is a state and the query should be disabled until the token state is updated with the token. After the userInfo has been fetched we call dispatch and navigate in a useEffect.

export const useUserInfo = (token) => {
  return useQuery(
    ["users-info", token],
    () => fetchUserInfo(token),
    {
      enabled: !!token, // disable when we don't have a token
    },
  );
};

const Auth = () => {
  const [token, setToken] = useState();

  const { data: userInfo } = useUserInfo(false);
    
  const handleLoginPopup = async () => {
      const token = setToken("abcd121212")
  };

  useEffect(() => {
    if (userInfo) {
      dispatch({ type: "SET_USER", payload: userInfo });
      navigate("/");
    }
  }, [userInfo]);
}

How do I pass the params to the react query using hooks

1 Answers1