Cancel axios requests in a React context provider using refs
Created May 22 2020
JS1import axios, { Canceler } from "axios";2import * as React from "react";34const fetchData = async (cancelToken: CancelToken) => {5try {6const response = await axios.get("http://my-endpoint.com/api/sample", {7headers: {8"Content-Type": "application/json",9},10/**11* Pass the cancel token in the axios get call12*/13cancelToken,14});1516return response;17} catch (error) {18throw error;19}20};2122type DataContextValue = ReturnType<typeof useData>;2324export const DataContext = React.createContext<DataContextValue | undefined>(25undefined26);2728const useData = () => {29const [data, setData] = React.useState<number>(0);3031/**32* Create a React ref to store the cancel token33*/34const cancelDataRequest = React.useRef<Canceler>();35const getData = React.useCallback(async () => {36/**37* If a cancel token is already present: call it to cancel any previous38* call of fetchData that is still in progress39*/40cancelDataRequest.current && cancelDataRequest.current();4142/**43* Create a new axios cancel token and assign it the React ref44*/45const cancelToken = new axios.CancelToken((c) => {46cancelDataRequest.current = c;47});48try {49const data = await fetchData(cancelToken);50setData(data);51} catch (e) {52throw e;53}54return data;55}, [data]);5657return {58getData,59data,60};61};6263/**64* React context provider that will give access to data65* and getData to any DataContext consumer66*/67const DataProvider: React.FC = (props) => {68const value = useData();6970return (71<DataContext.Provider value={value}>{props.children}</DataContext.Provider>72);73};