TanStackT
TanStack2y ago
4 replies
technological-jade

Console Error: Query data cannot be undefined & handleLogin hangs at `isLoading`

Hey everyone,
I was working on a project and was using Tanstack Query for fetching my user data. I am doing this on Expo + React Native. I have an api running at the address. (localhost in android-emulator uses http://10.0.0.2 as a map to http:127.0.0.1) I have my functions & states defined as
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const handleUserChange = (text: string) => setEmail(text);
  const handlePassChange = (text: string) => setPassword(text);

  // Query function to handle login
  const loginQuery = useQuery({
    queryKey: ["userInfo"],
    queryFn: async () => {
      return axios
        .post("http://10.0.0.2:3000/api/v1/login", {
          email,
          password,
        })
        .then((response): {} => {
          return response.data;
        })
        .catch((error) => {
          console.error(error.message);
        });
    },
  });

  const handleLogin = () => {
    const { isPending, isSuccess, isError, error, data } = loginQuery;
    if (isSuccess) {
      return <Redirect href="/(tabs)/profile" />;
    }
    if (isPending) {
      return <Text>Loading...</Text>; // Render loading indicator
    }
    if (isError) {
      return <Text>An error occurred: {error.message}</Text>; // Render error message
    }
  };
Was this page helpful?