Manual Query Cancellation not working

[SujithKannaa98]

In Query cancellation, I tried to cancel the query by manual by referring your code in but it doesn't work properly. but i tired it different way then also it doesn't work. can you give correct code regarding that with working. and my code is

import React, { useState, useRef } from "react";
import { View, Button, Text, Alert } from "react-native";
import { useQueryClient, useQuery } from "@tanstack/react-query";

const ManualCancellation = () => {
    const queryClient = useQueryClient();
    const [isAborted, setIsAborted] = useState(false);

    const { isLoading, isError, isSuccess, data, error } = useQuery({
        queryKey: ['todos'],
        queryFn: async () => {
            try {
                const resp = await fetch(`https://jsonplaceholder.typicode.com/posts?_page=5&_limit=10`, { signal });
                if (!resp.ok) {
                    throw new Error('Network response was not ok');
                }
                return resp.json();
            } catch (err) {
                throw err;
            }
        },
    });

    // Function to handle the button press and cancel the query
    const handleCancel = () => {
        queryClient.cancelQueries(['todos']);
        Alert.alert("Query cancelled");
    };

    return (
        <View style={{ padding: 20 }}>
            <Button
                onPress={handleCancel}
                title="Cancel Query"
            />
            {isLoading && <Text>Loading...</Text>}
            {isError && <Text>Error: {error.message}</Text>}
            {isSuccess && <Text>Data fetched successfully!</Text>}
            {isAborted && <Text>Request was aborted</Text>}
        </View>
    );
};

export default ManualCancellation;

while using this queryClient.cancelQueries(['todos']), it is not throwing me the error inside the catch block. give me an example regarding this

[romain-trotard]

Hello

In your example, there is 2 errors for me:

• you don't get the signal from queryFn parameter:

const { isLoading, isError, isSuccess, data, error } = useQuery({
        queryKey: ['todos'],
        // Get the signal to pass to the fetch
        queryFn: async ({ signal }) => {
            try {
                const resp = await fetch(`https://jsonplaceholder.typicode.com/posts?_page=5&_limit=10`, { signal });
                if (!resp.ok) {
                    throw new Error('Network response was not ok');
                }
                return resp.json();
            } catch (err) {
                throw err;
            }
        },
    });

• the API for queryClient.cancelQueries is not right: https://tanstack.com/query/latest/docs/reference/QueryClient/#queryclientcancelqueries

// Function to handle the button press and cancel the query
    const handleCancel = () => {
        // You need to pass an object
        queryClient.cancelQueries({ queryKey: ['todos'] });
        Alert.alert("Query cancelled");
    };

You can see full example here https://tanstack.com/query/latest/docs/framework/react/guides/query-cancellation#manual-cancellation.

[SujithKannaa98]

import React, { useState, useRef } from "react";
import { View, Button, Text, Alert } from "react-native";
import { useQueryClient, useQuery } from "@tanstack/react-query";

const ManualCancellation = () => {
    const queryClient = useQueryClient();
    const [isAborted, setIsAborted] = useState(false);

    const { isLoading, isError, isSuccess, data, error } = useQuery({
        queryKey: ['todos'],
        queryFn: async ({signal}) => {
            try {
                const resp = await fetch(`https://jsonplaceholder.typicode.com/posts?_page=5&_limit=10`, { signal });
                if (!resp.ok) {
                    throw new Error('Network response was not ok');
                }
                return resp.json();
            } catch (err) {
                throw err;
            }
        },
    });

    // Function to handle the button press and cancel the query
    const handleCancel = () => {
        queryClient.cancelQueries({ queryKey: ['todos']});
        Alert.alert("Query cancelled");
    };

    return (
        <View style={{ padding: 20 }}>
            <Button
                onPress={handleCancel}
                title="Cancel Query"
            />
            {isLoading && <Text>Loading...</Text>}
            {isError && <Text>Error: {error.message}</Text>}
            {isSuccess && <Text>Data fetched successfully!</Text>}
            {isAborted && <Text>Request was aborted</Text>}
        </View>
    );
};

export default ManualCancellation;

yeah, i have used like this in this case but still I am not getting the error in catch block.

[romain-trotard]

useQuery does not return the error in this case because it aborts the query and returns the previous state as mentioned in the documentation: https://tanstack.com/query/latest/docs/framework/react/guides/query-cancellation#default-behavior