react-query QueryClientProvider TypeScript Examples

Source File: KeywordPage.tsx From apps with GNU Affero General Public License v3.0

6 votes

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>,
  );
}

Source File: QueryProvider.tsx From anchor-web-app with Apache License 2.0

6 votes

QueryProvider = ({ children }: UIElementProps) => {
  const { network } = useNetwork();

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

  return (
    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
  );
}

Source File: PendingKeywords.tsx From apps with GNU Affero General Public License v3.0

6 votes

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>,
  );
}

Source File: index.tsx From github-deploy-center with MIT License

6 votes

ReactDOM.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <MuiThemeProvider theme={theme}>
        <CssBaseline />
        <Provider value={overmind}>
          <App />
        </Provider>
      </MuiThemeProvider>
      <ReactQueryDevtools />
    </QueryClientProvider>
  </React.StrictMode>,
  document.getElementById('root')
)

Source File: index.tsx From interbtc-ui with Apache License 2.0

6 votes

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')
);

Source File: _app.tsx From livepeer-com with MIT License

6 votes

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>
      </>
    );
  }

Source File: index.tsx From homebridge-zigbee-nt with Apache License 2.0

6 votes

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>
  );
}

Source File: _app.tsx From mui-toolpad with MIT License

6 votes

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>
  );
}

Source File: index.tsx From Riakuto-StartingReact-ja3.1 with Apache License 2.0

6 votes

ReactDOM.render(
  <BrowserRouter>
    <QueryClientProvider client={queryClient}>
      <App />
      {process.env.NODE_ENV === 'development' && (
        <ReactQueryDevtools initialIsOpen={false} />
      )}
    </QueryClientProvider>
  </BrowserRouter>,
  document.getElementById('root') as HTMLElement,
);

Source File: _app.tsx From next-crud with MIT License

6 votes

App = ({ Component, pageProps }: AppProps) => {
  return (
    <QueryClientProvider client={queryClient}>
      <ChakraProvider resetCSS>
        <Component {...pageProps} />
      </ChakraProvider>
    </QueryClientProvider>
  )
}

Source File: _app.tsx From rcvr-app with GNU Affero General Public License v3.0

6 votes

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>
  )
}

Source File: AccountDetailsModal.spec.tsx From apps with GNU Affero General Public License v3.0

6 votes

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>,
  );
}

Source File: App.tsx From github-explorer with MIT License

6 votes

export default function App() {
  return (
    <>
      <ThemeProvider theme={theme}>
        <QueryClientProvider client={queryClient}>
          <Routes />
        </QueryClientProvider>
      </ThemeProvider>
      <GlobalStyles />
    </>
  );
}

Source File: index.tsx From akashlytics with GNU General Public License v3.0

6 votes

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")
);

Source File: _app.tsx From RareCamp with Apache License 2.0

6 votes

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>
  )
}

Source File: index.tsx From rari-dApp with GNU Affero General Public License v3.0

6 votes

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")
);

Source File: ApiClientContextController.tsx From react-starter-boilerplate with MIT License

6 votes

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>
  );
}

Source File: App.tsx From kinopub.webos with MIT License

6 votes

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>
  );
}

Source File: _app.tsx From NextPay with MIT License

6 votes

export default function App({ Component, pageProps }: AppProps) {
  return (
    <QueryClientProvider client={queryClient}>
      <Head>
        <title>NextPay</title>
      </Head>
      <GlobalStyles />
      <Component {...pageProps} />
    </QueryClientProvider>
  );
}

Source File: _app.tsx From frontend-boilerplate with MIT License

6 votes

export default function App({ Component, pageProps, router }: AppProps) {
  return (
    <CookiesProvider>
      <QueryClientProvider client={queryClient}>
        <Header />
        <Component {...pageProps} key={router.route} />
      </QueryClientProvider>
    </CookiesProvider>
  );
}

Source File: App.tsx From platform with MIT License

6 votes

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>
  );
}

Source File: CompanionPermission.spec.tsx From apps with GNU Affero General Public License v3.0

6 votes

renderComponent = (): RenderResult => {
  return render(
    <QueryClientProvider client={client}>
      <FeaturesContext.Provider value={{ flags: {} }}>
        <CompanionPermission />
      </FeaturesContext.Provider>
    </QueryClientProvider>,
  );
}

Source File: _app.tsx From nextclade with MIT License

5 votes

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>
  )
}

Source File: ToolpadApp.tsx From mui-toolpad with MIT License

5 votes

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>
  );
}

Source File: NewCommentModal.spec.tsx From apps with GNU Affero General Public License v3.0

5 votes

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>,
  );
}

Source File: Provider.tsx From tailchat with GNU General Public License v3.0

5 votes

CacheProvider: React.FC = React.memo((props) => {
  return (
    <QueryClientProvider client={queryClient}>
      {props.children}
    </QueryClientProvider>
  );
})

Source File: Sidebar.spec.tsx From apps with GNU Affero General Public License v3.0

5 votes

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>,
  );
}

Source File: App.tsx From kubenav with MIT License

5 votes

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>
)

Source File: index.tsx From Riakuto-StartingReact-ja3.1 with Apache License 2.0

5 votes

createRoot(root).render(
  <QueryClientProvider client={queryClient}>
    <App />
    {process.env.NODE_ENV === 'development' && (
      <ReactQueryDevtools initialIsOpen={false} />
    )}
  </QueryClientProvider>,
);

react-query#QueryClientProvider TypeScript Examples