Created
April 7, 2025 08:32
-
-
Save OkancanCosar/4824a305bbbdb6beadde87a9031532ab to your computer and use it in GitHub Desktop.
useMutation cancel signal
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, { useEffect, useRef, useState } from 'react' | |
| import { View } from 'react-native' | |
| import { useMutation } from '@tanstack/react-query' | |
| export const MyScreen = () => { | |
| const [data, setData] = useState<number[]>([]) | |
| const controllerRef = useRef<AbortController | null>(null); | |
| const getListMutation = useMutation({ | |
| mutationFn: async () => { | |
| const abortController = new AbortController(); | |
| controllerRef.current = abortController; | |
| return myApi.getList(abortController.signal); | |
| }, | |
| onSuccess: () => { | |
| setData([1, 2, 3, 4, 5, 6]) | |
| }, | |
| onError: (err: any) => { | |
| // : {"message": "canceled", "name": "CanceledError"} | |
| // {"message": "Request failed with status code 404", "name": "AxiosError"} | |
| console.log('⚡️ : ', { name: err.name, message: err.message }); | |
| }, | |
| }); | |
| useEffect(() => { | |
| getListMutation.mutate() | |
| return () => { | |
| controllerRef.current?.abort(); | |
| } | |
| }, []); | |
| return ( | |
| <View style={{}}> | |
| <></> | |
| </View> | |
| ) | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment