Mutating too long

[HenrikZabel]

I am currently testing what happens when the server is not online (so there is no connection to the server). The mutation is loading not only super long but the status is also pending. How can I abort the request when tanstack query notices that there is no connection after x seconds?

[TkDodo]

if there is no network connection, we pause requests until connection has been established. We return an isPaused:true flag in that case

[HenrikZabel]

Sorry that my reply comes so late.

Following is basically all that you need:

import { Button, Text, View } from "react-native";
import { useMutation } from "@tanstack/react-query";

const IndexPage = () => {
  const mutate = useMutation({
    // I have to use my local ip adress here. When using a non-existing url it works as intented
    // (isPending is false and status is error)
    // The server is not running but was in the past.
    mutationFn: async () =>
      fetch("https://192.178.26.5:8000/some-path-that-never-existed", {
        method: "PATCH",
      }),
    onError: (e) => {
      console.log(e);
    },
  });

  return (
    <View
      style={{
        height: "100%",
        backgroundColor: "lime",
        justifyContent: "center",
        paddingHorizontal: 50,
      }}
    >
      <Button onPress={() => mutate.mutate()} title="Mutate" />
      <Text>Status: {mutate.status}</Text>
      <Text>Is Pending: {String(mutate.isPending)}</Text>
    </View>
  );
};

export default IndexPage;

The problem only comes with urls that have been mutated once. (or at least that is what I think the problem is)

[TkDodo]

This isn't a minimal reproduction, it's a code snippet: https://tkdodo.eu/blog/how-can-i#3-provide-a-minimal-reproducible-example

[HenrikZabel]

https://github.com/HenrikZabel/tastack-query-issues

Here you go

[TkDodo]

not sure what fetch is doing here but we can clearly see that the fetch call hangs, not the mutation itself:

mutationFn: async () => {
    console.log('mutation starts')
  const result = await fetch("https://192.178.26.5:8000/some-path-that-never-existed", {
    method: "PATCH",
  })
    console.log('mutation ends')
    return result
},

this will log mutation starts, but not mutation ends. So the problem lies within the fetch call itself, not react query.

My browser devtools also show a never ending pending request in the devtools

so, you have to find out why that is, but it has nothing to do with react-query. You would have the same problem if you just make this fetch call without react-query.

[TkDodo]

ah, the thing finally error'd out for me after 1.3 minutes

after that, the status correctly goes to error. So, everything 🟢 from react-query perspective