import React , { Suspense , useMemo } from "react" ; import ReactDOM from "react-dom" ; import { QueryCache , QueryClient , QueryClientProvider } from "react-query" ; import { RecoilRoot } from "recoil" ; import axios , { AxiosContext } from "./api/request" ; import "./index.css" ; import App from "./App" ; import { ErrorBoundary } from "react-error-boundary" ; import SuspendFallbackLoading from "./pages/layout/suspendFallbackLoading" ; const queryClient = new QueryClient ( { defaultOptions : { queries : { retry : 0 , suspense : true , refetchOnMount : false , refetchOnWindowFocus : false , refetchOnReconnect : true , refetchInterval : false , } , } , } ) ; const AxiosProvider = ( { children } ) => { const axiosValue = useMemo ( ( ) => { return axios ; } , [ ] ) ; return ( < AxiosContext . Provider value = { axiosValue } > { children } < /AxiosContext.Provider>); } ; ReactDOM . render ( < AxiosProvider > < QueryClientProvider client = { queryClient } > < RecoilRoot > < ErrorBoundary fallbackRender = { ( { error , resetErrorBoundary } ) => ( < div > There was an error ! { " " } < button onClick = { ( ) => resetErrorBoundary ( ) } > Try again < /button> < pre style = { { whiteSpace : "normal" } } > { error . message } < /pre> < /div>)}> < Suspense fallback = { < SuspendFallbackLoading / > } > < App /> < /Suspense> < /ErrorBoundary> < /RecoilRoot> < /QueryClientProvider> < /AxiosProvider>,  document . getElementById ( "root" ) ) ;