react-query#QueryClientProvider TypeScript Examples

The following examples show how to use react-query#QueryClientProvider. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: KeywordPage.tsx    From apps with GNU Affero General Public License v3.0 6 votes vote down vote up 
renderComponent = (
  mocks: MockedGraphQLResponse[] = [createKeywordMock()],
  user: LoggedUser = defaultUser,
): RenderResult => {
  const client = new QueryClient();

  mocks.forEach(mockGraphQL);
  return render(
    <QueryClientProvider client={client}>
      <AuthContext.Provider
        value={{
          user,
          shouldShowLogin: false,
          showLogin: jest.fn(),
          logout: jest.fn(),
          updateUser: jest.fn(),
          tokenRefreshed: true,
          getRedirectUri: jest.fn(),
        }}
      >
        <KeywordsPage keyword={defaultKeyword.value} />
      </AuthContext.Provider>
    </QueryClientProvider>,
  );
}
Example #2
Source File: QueryProvider.tsx    From anchor-web-app with Apache License 2.0 6 votes vote down vote up 
QueryProvider = ({ children }: UIElementProps) => {
  const { network } = useNetwork();

  useEffect(() => {
    queryClient.invalidateQueries();
  }, [network.chainID]);

  return (
    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
  );
}
Example #3
Source File: PendingKeywords.tsx    From apps with GNU Affero General Public License v3.0 6 votes vote down vote up 
renderComponent = (
  mocks: MockedGraphQLResponse[] = [createRandomKeywordMock()],
  user: LoggedUser = defaultUser,
): RenderResult => {
  const client = new QueryClient();

  mocks.forEach(mockGraphQL);
  return render(
    <QueryClientProvider client={client}>
      <AuthContext.Provider
        value={{
          user,
          shouldShowLogin: false,
          showLogin: jest.fn(),
          logout: jest.fn(),
          updateUser: jest.fn(),
          tokenRefreshed: true,
        }}
      >
        <PendingKeywords />
      </AuthContext.Provider>
    </QueryClientProvider>,
  );
}
Example #4
Source File: index.tsx    From github-deploy-center with MIT License 6 votes vote down vote up 
ReactDOM.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <MuiThemeProvider theme={theme}>
        <CssBaseline />
        <Provider value={overmind}>
          <App />
        </Provider>
      </MuiThemeProvider>
      <ReactQueryDevtools />
    </QueryClientProvider>
  </React.StrictMode>,
  document.getElementById('root')
)
Example #5
Source File: index.tsx    From interbtc-ui with Apache License 2.0 6 votes vote down vote up 
ReactDOM.render(
  <React.StrictMode>
    <Router>
      <QueryClientProvider client={queryClient}>
        <HelmetProvider>
          <Provider store={store}>
            <PersistGate loading={null} persistor={persistor}>
              <App />
            </PersistGate>
          </Provider>
        </HelmetProvider>
        <ReactQueryDevtools initialIsOpen={false} />
      </QueryClientProvider>
    </Router>
  </React.StrictMode>,
  document.getElementById('root')
);
Example #6
Source File: _app.tsx    From livepeer-com with MIT License 6 votes vote down vote up 
render() {
    const { Component, pageProps }: any = this.props;
    globalStyles();
    return (
      <>
        <title>Livepeer Video Services</title>
        <Head>
          <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0"
          />
        </Head>
        <ThemeProvider
          forcedTheme={Component.theme || undefined}
          disableTransitionOnChange
          attribute="class"
          defaultTheme={DEFAULT_THEME}
          value={{
            ...themeMap,
            dark: "dark-theme-violet",
            light: "light-theme-violet",
          }}>
          <SnackbarProvider>
            <QueryClientProvider client={queryClient}>
              <MetaMaskProvider>
                <ApiProvider>
                  <AnalyzerProvider>
                    <DefaultSeo {...SEO} />
                    <Component {...pageProps} />
                  </AnalyzerProvider>
                </ApiProvider>
              </MetaMaskProvider>
            </QueryClientProvider>
          </SnackbarProvider>
        </ThemeProvider>
      </>
    );
  }
Example #7
Source File: index.tsx    From homebridge-zigbee-nt with Apache License 2.0 6 votes vote down vote up 
function App() {
  return (
    <Pane display="flex" height="100%">
      <QueryClientProvider client={queryClient}>
        <Router>
          <Pane padding={sizes.padding.large}>
            <NavBar />
          </Pane>
          <Pane padding={sizes.padding.large} flex="1">
            <Switch>
              <Route path="/devices/:ieeAddr?">
                <Devices />
              </Route>
              <Route path="/coordinator">
                <Coordinator />
              </Route>
              <Route path="/">
                <Home />
              </Route>
            </Switch>
          </Pane>
        </Router>
      </QueryClientProvider>
    </Pane>
  );
}
Example #8
Source File: _app.tsx    From mui-toolpad with MIT License 6 votes vote down vote up 
export default function MyApp(props: MyAppProps) {
  const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
  return (
    <CacheProvider value={emotionCache}>
      <Head>
        <title>My page</title>
        <meta name="viewport" content="initial-scale=1, width=device-width" />
      </Head>
      <QueryClientProvider client={queryClient}>
        <ThemeProvider theme={theme}>
          {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
          <CssBaseline />
          <Component {...pageProps} />
        </ThemeProvider>
      </QueryClientProvider>
    </CacheProvider>
  );
}
Example #9
Source File: index.tsx    From Riakuto-StartingReact-ja3.1 with Apache License 2.0 6 votes vote down vote up 
ReactDOM.render(
  <BrowserRouter>
    <QueryClientProvider client={queryClient}>
      <App />
      {process.env.NODE_ENV === 'development' && (
        <ReactQueryDevtools initialIsOpen={false} />
      )}
    </QueryClientProvider>
  </BrowserRouter>,
  document.getElementById('root') as HTMLElement,
);
Example #10
Source File: _app.tsx    From next-crud with MIT License 6 votes vote down vote up 
App = ({ Component, pageProps }: AppProps) => {
  return (
    <QueryClientProvider client={queryClient}>
      <ChakraProvider resetCSS>
        <Component {...pageProps} />
      </ChakraProvider>
    </QueryClientProvider>
  )
}
Example #11
Source File: _app.tsx    From rcvr-app with GNU Affero General Public License v3.0 6 votes vote down vote up 
RecoverApp: RecoverAppFC = ({
  Component,
  pageProps: { localeContext, ...pageProps },
}) => {
  useA11yFocusRing()

  return (
    <ThemeProvider theme={theme}>
      <QueryClientProvider client={queryClient}>
        <LocalesContextProvider value={localeContext}>
          <Global styles={globalStyles} />
          <AnimateSharedLayout>
            <SupportedBrowsersAlert />
            <Component {...pageProps} />
          </AnimateSharedLayout>
        </LocalesContextProvider>
      </QueryClientProvider>
    </ThemeProvider>
  )
}
Example #12
Source File: AccountDetailsModal.spec.tsx    From apps with GNU Affero General Public License v3.0 6 votes vote down vote up 
renderComponent = (user: Partial<LoggedUser> = {}): RenderResult => {
  const client = new QueryClient();

  return render(
    <QueryClientProvider client={client}>
      <AuthContext.Provider
        value={{
          user: { ...defaultUser, ...user },
          shouldShowLogin: false,
          showLogin: jest.fn(),
          updateUser: jest.fn(),
          logout,
          tokenRefreshed: true,
        }}
      >
        <AccountDetailsModal
          isOpen
          onRequestClose={onRequestClose}
          ariaHideApp={false}
        />
      </AuthContext.Provider>
    </QueryClientProvider>,
  );
}
Example #13
Source File: App.tsx    From github-explorer with MIT License 6 votes vote down vote up 
export default function App() {
  return (
    <>
      <ThemeProvider theme={theme}>
        <QueryClientProvider client={queryClient}>
          <Routes />
        </QueryClientProvider>
      </ThemeProvider>
      <GlobalStyles />
    </>
  );
}
Example #14
Source File: index.tsx    From akashlytics with GNU General Public License v3.0 6 votes vote down vote up 
ReactDOM.render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <QueryClientProvider client={queryClient}>
        <IntlProvider locale={navigator.language}>
          <HelmetProvider>
            <SnackbarProvider maxSnack={3} dense hideIconVariant>
              <MediaQueryProvider>
                <Router>
                  <ScrollToTop />
                  <App />
                </Router>
              </MediaQueryProvider>
            </SnackbarProvider>
          </HelmetProvider>
        </IntlProvider>
      </QueryClientProvider>
    </ThemeProvider>
  </React.StrictMode>,
  document.getElementById("root")
);
Example #15
Source File: _app.tsx    From RareCamp with Apache License 2.0 6 votes vote down vote up 
function MyAppWrapper(props: AppProps) {
  const router = useRouter()
  axios.interceptors.request.use(async function (config) {
    try {
      const currentUserSession = await Auth.currentSession()
      const Authorization = currentUserSession
        .getIdToken()
        .getJwtToken()
      config.headers.Authorization = Authorization
    } catch (e) {
      await router.push('/auth/login')
    }

    return config
  })

  return (
    <QueryClientProvider client={queryClient}>
      <MyApp {...props} />
    </QueryClientProvider>
  )
}
Example #16
Source File: index.tsx    From rari-dApp with GNU Affero General Public License v3.0 6 votes vote down vote up 
ReactDOM.render(
  <>
    <PWAPrompt
      timesToShow={2}
      permanentlyHideOnDismiss={false}
      copyTitle="Add Rari to your homescreen!"
      copyBody="The Rari Portal works best when added to your homescreen. Without doing this, you may have a degraded experience."
      copyClosePrompt="Close"
    />
    <ChakraProvider theme={customTheme}>
      <ErrorBoundary FallbackComponent={ErrorPage}>
        <QueryClientProvider client={queryClient}>
          <ReactQueryDevtools initialIsOpen={false} />
          <BrowserRouter>
            <RariProvider>
              <ScrollToTop />
              <App />
            </RariProvider>
          </BrowserRouter>
        </QueryClientProvider>
      </ErrorBoundary>
    </ChakraProvider>
  </>,
  document.getElementById("root")
);
Example #17
Source File: ApiClientContextController.tsx    From react-starter-boilerplate with MIT License 6 votes vote down vote up 
ApiClientContextController = ({ children }: ApiClientControllerProps) => {
  const { queryFn, mutationFn, infiniteQueryFn } = useAxiosStrategy();
  /** example of usage of different strategy **/
  // const { queryFn, mutationFn, infiniteQueryFn } = useKyStrategy();

  const queryClient = useMemo(() => {
    return new QueryClient({
      defaultOptions: {
        queries: {
          queryFn: queryFn(),
        },
      },
    });
  }, [queryFn]);

  const ctxValue: ApiClientContextValue = useMemo(
    () => ({
      queryFn,
      mutationFn,
      infiniteQueryFn,
    }),
    [queryFn, mutationFn, infiniteQueryFn],
  );

  return (
    <ApiClientContext.Provider value={ctxValue}>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </ApiClientContext.Provider>
  );
}
Example #18
Source File: App.tsx    From kinopub.webos with MIT License 6 votes vote down vote up 
App: React.FC<Props> = (props) => {
  return (
    <Router>
      <QueryClientProvider client={queryClient}>
        <Views {...props}>
          <View path={PATHS.Index} component={IndexView} layout="fill" exact />
          <View path={PATHS.Home} component={HomeView} />
          <View path={PATHS.Search} component={SearchView} />
          <View path={PATHS.Category} component={CategoryView} />
          <View path={PATHS.Genre} component={GenreView} />
          <View path={PATHS.Watching} component={WatchingView} />
          <View path={PATHS.Releases} component={ReleasesView} />
          <View path={PATHS.Bookmark} component={BookmarkView} />
          <View path={PATHS.Bookmarks} component={BookmarksView} />
          <View path={PATHS.Collection} component={CollectionView} />
          <View path={PATHS.Collections} component={CollectionsView} />
          <View path={PATHS.Channel} component={ChannelView} layout="fill" />
          <View path={PATHS.Channels} component={ChannelsView} />
          <View path={PATHS.History} component={HistoryView} />
          <View path={PATHS.Item} component={ItemView} layout="fill" />
          <View path={PATHS.Video} component={VideoView} layout="fill" />
          <View path={PATHS.Trailer} component={TrailerView} layout="fill" />
          <View path={PATHS.Pair} component={PairView} layout="fill" />
          <View path={PATHS.Donate} component={DonateView} />
          <View path={PATHS.Speed} component={SpeedView} />
          <View path={PATHS.Settings} component={SettingsView} />
          <View component={NotFoundView} />
        </Views>
      </QueryClientProvider>
    </Router>
  );
}
Example #19
Source File: _app.tsx    From NextPay with MIT License 6 votes vote down vote up 
export default function App({ Component, pageProps }: AppProps) {
  return (
    <QueryClientProvider client={queryClient}>
      <Head>
        <title>NextPay</title>
      </Head>
      <GlobalStyles />
      <Component {...pageProps} />
    </QueryClientProvider>
  );
}
Example #20
Source File: _app.tsx    From frontend-boilerplate with MIT License 6 votes vote down vote up 
export default function App({ Component, pageProps, router }: AppProps) {
  return (
    <CookiesProvider>
      <QueryClientProvider client={queryClient}>
        <Header />
        <Component {...pageProps} key={router.route} />
      </QueryClientProvider>
    </CookiesProvider>
  );
}
Example #21
Source File: App.tsx    From platform with MIT License 6 votes vote down vote up 
export default function App() {

  useEffect(() => {
    if (process.env.NODE_ENV === "production") {
      ReactGA.pageview(window.location.pathname + window.location.search);
    }
  }, []);

  return (
    <QueryClientProvider client={queryClient}>
      <AuthProvider>
        <LiveGameProvider>
          <Elements stripe={stripePromise}>
            <ToastProvider>
              <Router>
                <Switch>
                  {routes.map((route, index) => (
                    <AppRoutes
                      key={route.path + index}
                      path={route.path}
                      component={route.component}
                      isPrivate={route.isPrivate}
                      exact={route.exact}
                    />
                  ))}
                  <Redirect exact from="/festival" to={`/events/festival/${FESTIVAL_ID}`} />
                  <Route component={Page404} />
                </Switch>
              </Router>
            </ToastProvider>
          </Elements>
        </LiveGameProvider>
      </AuthProvider>
    </QueryClientProvider>
  );
}
Example #22
Source File: CompanionPermission.spec.tsx    From apps with GNU Affero General Public License v3.0 6 votes vote down vote up 
renderComponent = (): RenderResult => {
  return render(
    <QueryClientProvider client={client}>
      <FeaturesContext.Provider value={{ flags: {} }}>
        <CompanionPermission />
      </FeaturesContext.Provider>
    </QueryClientProvider>,
  );
}
Example #23
Source File: _app.tsx    From nextclade with MIT License 5 votes vote down vote up 
export function MyApp({ Component, pageProps, router }: AppProps) {
  const queryClient = useMemo(() => new QueryClient(), [])
  const { store } = useMemo(() => configureStore(), [])
  const fallback = useMemo(() => <Loading />, [])

  useEffect(() => {
    if (process.env.NODE_ENV !== 'development' && router.pathname === '/results') {
      void router.replace('/') // eslint-disable-line no-void
    }

    void router.prefetch('/') // eslint-disable-line no-void
    void router.prefetch('/results') // eslint-disable-line no-void
  }, [router])

  return (
    <Suspense fallback={fallback}>
      <ReactReduxProvider store={store}>
        <RecoilRoot>
          <ThemeProvider theme={theme}>
            <MDXProvider components={mdxComponents}>
              <Plausible domain={DOMAIN_STRIPPED} />
              <QueryClientProvider client={queryClient}>
                <I18nextProvider i18n={i18n}>
                  <ErrorBoundary>
                    <Suspense>
                      <RecoilStateInitializer />
                    </Suspense>
                    <Suspense fallback={fallback}>
                      <SEO />
                      <Component {...pageProps} />
                      <ErrorPopup />
                      <ReactQueryDevtools initialIsOpen={false} />
                    </Suspense>
                  </ErrorBoundary>
                </I18nextProvider>
              </QueryClientProvider>
            </MDXProvider>
          </ThemeProvider>
        </RecoilRoot>
      </ReactReduxProvider>
    </Suspense>
  )
}
Example #24
Source File: ToolpadApp.tsx    From mui-toolpad with MIT License 5 votes vote down vote up 
export default function ToolpadApp({ basename, appId, version, dom }: ToolpadAppProps) {
  const root = appDom.getApp(dom);
  const { pages = [], themes = [] } = appDom.getChildNodes(dom, root);

  const theme = themes.length > 0 ? themes[0] : null;

  const appContext = React.useMemo(() => ({ appId, version }), [appId, version]);

  const queryClient = React.useMemo(
    () =>
      new QueryClient({
        defaultOptions: {
          queries: {
            retry: false,
          },
        },
      }),
    [],
  );

  const [resetNodeErrorsKey, setResetNodeErrorsKey] = React.useState(0);

  React.useEffect(() => setResetNodeErrorsKey((key) => key + 1), [dom]);

  return (
    <AppRoot id={HTML_ID_APP_ROOT}>
      <NoSsr>
        <DomContextProvider value={dom}>
          <AppThemeProvider node={theme}>
            <CssBaseline />
            <ErrorBoundary FallbackComponent={AppError}>
              <ResetNodeErrorsKeyProvider value={resetNodeErrorsKey}>
                <React.Suspense fallback={<AppLoading />}>
                  <JsRuntimeProvider>
                    <AppContextProvider value={appContext}>
                      <QueryClientProvider client={queryClient}>
                        <BrowserRouter basename={basename}>
                          <Routes>
                            <Route path="/" element={<Navigate replace to="/pages" />} />
                            <Route path="/pages" element={<AppOverview dom={dom} />} />
                            {pages.map((page) => (
                              <Route
                                key={page.id}
                                path={`/pages/${page.id}`}
                                element={
                                  <ComponentsContext dom={dom} page={page}>
                                    <RenderedPage nodeId={page.id} />
                                  </ComponentsContext>
                                }
                              />
                            ))}
                          </Routes>
                        </BrowserRouter>
                      </QueryClientProvider>
                    </AppContextProvider>
                  </JsRuntimeProvider>
                </React.Suspense>
              </ResetNodeErrorsKeyProvider>
            </ErrorBoundary>
          </AppThemeProvider>
        </DomContextProvider>
      </NoSsr>
    </AppRoot>
  );
}
Example #25
Source File: NewCommentModal.spec.tsx    From apps with GNU Affero General Public License v3.0 5 votes vote down vote up 
renderComponent = (
  props: Partial<NewCommentModalProps> = {},
  mocks: MockedGraphQLResponse[] = [],
  user: Partial<LoggedUser> = {},
): RenderResult => {
  const defaultProps: NewCommentModalProps = {
    authorImage: 'https://daily.dev/nimrod.png',
    authorName: 'Nimrod',
    publishDate: new Date(2017, 1, 10, 0, 0),
    content: 'This is the main comment',
    contentHtml: '<p>This is the main comment</p>',
    commentId: null,
    post: {
      id: 'p1',
      title: 'Title',
      image: 'https://image.com',
      commentsPermalink: 'https://daily.dev',
    },
    isOpen: true,
    ariaHideApp: false,
    onRequestClose,
    onComment,
  };

  const client = new QueryClient();

  mocks.forEach(mockGraphQL);
  return render(
    <QueryClientProvider client={client}>
      <AuthContext.Provider
        value={{
          user: { ...defaultUser, ...user },
          shouldShowLogin: false,
          showLogin: jest.fn(),
          logout: jest.fn(),
          updateUser: jest.fn(),
          tokenRefreshed: true,
          closeLogin: jest.fn(),
          getRedirectUri: jest.fn(),
        }}
      >
        <NewCommentModal {...defaultProps} {...props} />
      </AuthContext.Provider>
    </QueryClientProvider>,
  );
}
Example #26
Source File: Provider.tsx    From tailchat with GNU General Public License v3.0 5 votes vote down vote up 
CacheProvider: React.FC = React.memo((props) => {
  return (
    <QueryClientProvider client={queryClient}>
      {props.children}
    </QueryClientProvider>
  );
})
Example #27
Source File: Sidebar.spec.tsx    From apps with GNU Affero General Public License v3.0 5 votes vote down vote up 
renderComponent = (
  alertsData = defaultAlerts,
  mocks: MockedGraphQLResponse[] = [createMockFeedSettings()],
  user: LoggedUser = defaultUser,
  sidebarExpanded = true,
): RenderResult => {
  const settingsContext: SettingsContextData = {
    spaciness: 'eco',
    showOnlyUnreadPosts: false,
    openNewTab: true,
    setTheme: jest.fn(),
    themeMode: ThemeMode.Dark,
    setSpaciness: jest.fn(),
    toggleOpenNewTab: jest.fn(),
    toggleShowOnlyUnreadPosts: jest.fn(),
    insaneMode: false,
    loadedSettings: true,
    toggleInsaneMode: jest.fn(),
    showTopSites: true,
    toggleShowTopSites: jest.fn(),
    sidebarExpanded,
    toggleSidebarExpanded,
  };
  client = new QueryClient();
  mocks.forEach(mockGraphQL);

  return render(
    <QueryClientProvider client={client}>
      <FeaturesContext.Provider value={features}>
        <AlertContextProvider
          alerts={alertsData}
          updateAlerts={updateAlerts}
          loadedAlerts
        >
          <AuthContext.Provider
            value={{
              user,
              shouldShowLogin: false,
              showLogin: jest.fn(),
              logout: jest.fn(),
              updateUser: jest.fn(),
              tokenRefreshed: true,
              getRedirectUri: jest.fn(),
              closeLogin: jest.fn(),
            }}
          >
            <ProgressiveEnhancementContext.Provider
              value={{
                windowLoaded: true,
                nativeShareSupport: true,
                asyncImageSupport: true,
              }}
            >
              <SettingsContext.Provider value={settingsContext}>
                <Sidebar sidebarRendered />
              </SettingsContext.Provider>
            </ProgressiveEnhancementContext.Provider>
          </AuthContext.Provider>
        </AlertContextProvider>
      </FeaturesContext.Provider>
    </QueryClientProvider>,
  );
}
Example #28
Source File: App.tsx    From kubenav with MIT License 5 votes vote down vote up 
App: React.FunctionComponent = () => (
  <IonApp>
    <QueryClientProvider client={queryClient}>
      <AppContextProvider>
        <TerminalContextProvider>
          <PortForwardingContextProvider>
            <IonReactRouter>
              <IonSplitPane contentId="main" className={isPlatform('hybrid') ? '' : 'menu-width'}>
                <Menu sections={resources} />
                <IonRouterOutlet id="main">
                  <Route path="/" component={OverviewPage} exact={true} />
                  <Route path="/bookmarks" component={BookmarksPage} exact={true} />
                  <Route path="/resources/:section/:type" component={ListPage} exact={true} />
                  <Route path="/resources/:section/:type/:namespace/:name" component={DetailsPage} exact={true} />
                  <Route
                    path="/customresources/:group/:version/:name"
                    component={CustomResourcesListPage}
                    exact={true}
                  />
                  <Route
                    path="/customresources/:group/:version/:name/:crnamespace/:crname"
                    component={CustomResourcesDetailsPage}
                    exact={true}
                  />
                  <Route path="/plugins/elasticsearch" component={ElasticsearchQueryPage} exact={true} />
                  <Route path="/plugins/helm" component={HelmReleasesPage} exact={true} />
                  <Route path="/plugins/helm/:namespace/:name" component={HelmReleasePage} exact={true} />
                  <Route path="/plugins/jaeger" component={JaegerTracesPage} exact={true} />
                  <Route path="/plugins/jaeger/trace/:trace" component={JaegerTracePage} exact={true} />
                  <Route path="/plugins/prometheus" component={PrometheusDashboardsPage} exact={true} />
                  <Route path="/plugins/prometheus/:namespace/:name" component={PrometheusDashboardPage} exact={true} />
                  <Route path="/settings/clusters" component={ClustersPage} exact={true} />
                  <Route path="/settings/clusters/aws" component={ClustersAWSPage} exact={true} />
                  <Route path="/settings/clusters/awssso" component={ClustersAWSSSOPage} exact={true} />
                  <Route path="/settings/clusters/azure" component={ClustersAzurePage} exact={true} />
                  <Route path="/settings/clusters/digitalocean" component={ClustersDigitalOceanPage} exact={true} />
                  <Route path="/settings/clusters/google" component={ClustersGooglePage} exact={true} />
                  <Route path="/settings/clusters/rancher" component={ClustersRancherPage} exact={true} />
                  <Route path="/settings/clusters/kubeconfig" component={ClustersKubeconfigPage} exact={true} />
                  <Route path="/settings/clusters/manual" component={ClustersManualPage} exact={true} />
                  <Route path="/settings/clusters/oidc" component={ClustersOIDCPage} exact={true} />
                  <Route path="/settings/clusters/oidc/redirect" component={ClustersOIDCRedirectPage} exact={true} />
                  <Route path="/settings/general" component={GeneralPage} exact={true} />
                  <Route path="/settings/info" component={InfoPage} exact={true} />
                </IonRouterOutlet>
              </IonSplitPane>
            </IonReactRouter>
          </PortForwardingContextProvider>
        </TerminalContextProvider>
      </AppContextProvider>
    </QueryClientProvider>
  </IonApp>
)
Example #29
Source File: index.tsx    From Riakuto-StartingReact-ja3.1 with Apache License 2.0 5 votes vote down vote up 
createRoot(root).render(
  <QueryClientProvider client={queryClient}>
    <App />
    {process.env.NODE_ENV === 'development' && (
      <ReactQueryDevtools initialIsOpen={false} />
    )}
  </QueryClientProvider>,
);