@apollo/client#ApolloProvider TypeScript Examples

export default function App() {
  return (
    <ApolloProvider client={client}>
      <StorageProvider>
        <SafeAreaProvider>
          <AppearanceProvider>
            <ThemeProvider>
              <PostProvider>
                <ModalProvider>
                  <UserEventProvider>
                    <AppNavigator />
                  </UserEventProvider>
                </ModalProvider>
              </PostProvider>
            </ThemeProvider>
          </AppearanceProvider>
        </SafeAreaProvider>
      </StorageProvider>
    </ApolloProvider>
  );
}

conversationList = (
  <ApolloProvider client={clientForContact}>
    <Router>
      <ConversationList
        searchVal=""
        selectedContactId={2}
        setSelectedContactId={jest.fn()}
        savedSearchCriteria=""
        searchMode={false}
        searchParam={{}}
        entityType="contact"
      />
    </Router>
  </ApolloProvider>
)

AppWrapper: FC = () => {
  return (
    <ApolloProvider client={client}>
      <Provider store={store}>
        <PersistGate persistor={persistor}>
          <App />
        </PersistGate>
      </Provider>
    </ApolloProvider>
  )
}

function App(): React.ReactElement {
  return (
    <ApolloProvider client={client}>
      <ThemeProvider theme={theme}>
        <Router>
          <Switch>
            <Route exact path={Routes.HOME} component={Home} />
          </Switch>
          <Route component={Footer} />
        </Router>
      </ThemeProvider>
    </ApolloProvider>
  );
}

ReactDOM.render(
  <React.StrictMode>
    <GlobalStyle />
    <Provider store={store}>
      <ApolloProvider client={client}>
        <App />
      </ApolloProvider>
    </Provider>
  </React.StrictMode>,
  document.getElementById('root'),
);

ReactDOM.render(
  <React.StrictMode>
    <ApolloProvider client={apolloClient}>
      <ChakraProvider>
        <AuthProvider>
          <GlobalStyle />
          <BrowserRouter>
            <Router />
          </BrowserRouter>
        </AuthProvider>
      </ChakraProvider>
    </ApolloProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

ReactDOM.render(
  <JmixAppProvider
    apolloClient={client}
    jmixREST={jmixREST}
    config={{
      appName: "",
      clientId: REST_CLIENT_ID, // TODO Rename once we remove REST
      secret: REST_CLIENT_SECRET,
      locale: "en",
      graphqlEndpoint: GRAPHQL_URI
    }}
    metadata={metadata}
    Modals={Modals}
  >
    <ApolloProvider client={client}>
      <I18nProvider>
        <IntlDocumentTitle>
          <HotkeyProvider defaultHotkeyConfigs={defaultHotkeyConfigs}>
            <DevSupport
              ComponentPreviews={
                <ScreensContext.Provider value={devScreens}>
                  <ComponentPreviews />
                </ScreensContext.Provider>
              }
              useInitialHook={useDevLogin}
            >
              <AppErrorBoundary>
                <App />
              </AppErrorBoundary>
            </DevSupport>
          </HotkeyProvider>
        </IntlDocumentTitle>
      </I18nProvider>
    </ApolloProvider>
  </JmixAppProvider>,
  document.getElementById("root") as HTMLElement
);

App = ({ Component, pageProps }: AppProps): React.ReactElement => {
  const apolloClient = useApollo();

  return (
    <ClayIconSpriteContext.Provider value={spritemap}>
      <ToastContainer position="bottom-left" />

      <AppContextProvider>
        <AppContext.Consumer>
          {() => (
            <ApolloProvider client={apolloClient}>
              <Layout>
                <Component {...pageProps} />
              </Layout>
            </ApolloProvider>
          )}
        </AppContext.Consumer>
      </AppContextProvider>
    </ClayIconSpriteContext.Provider>
  );
}

export default function App({ Component, pageProps }: AppProps) {
  const apolloClient = useApollo(pageProps);

  return (
    <ApolloProvider client={apolloClient}>
      <Component {...pageProps} />
    </ApolloProvider>
  );
}

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <ChainSubscriber />
      <React.StrictMode>
        <Web3ReactProvider
          getLibrary={
            provider => new Web3Provider(provider) // this will vary according to whether you use e.g. ethers or web3.js
          }
        >
          <ApolloProvider client={client}>
            <PastAuctions />
            <DAppProvider config={useDappConfig}>
              <LanguageProvider>
                <App />
              </LanguageProvider>
              <Updaters />
            </DAppProvider>
          </ApolloProvider>
        </Web3ReactProvider>
      </React.StrictMode>
    </ConnectedRouter>
  </Provider>,
  document.getElementById('root'),
);

export function App() {
  return (
    <ApolloProvider client={client}>
      <ThemeProvider>
        <BrowserRouter>
          <NavigationProvider>
            <MainLayout>
              <Routes />
            </MainLayout>
          </NavigationProvider>
        </BrowserRouter>
        <ToastifyContainer />
      </ThemeProvider>
    </ApolloProvider>
  );
}

App: AppType = ({ Component, pageProps }) => {

  useEffect(() => {
    if (publicRuntimeConfig.environment !== 'production') {
      debug.enable('*,-micromark')
    }
  })

  useEffect(() => {
    if (!/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
      return
    }

    const resize = () => {
      const vh = window.innerHeight * 0.01;
      document.documentElement.style.setProperty('--vh', `${vh}px`);
    }

    window.addEventListener('resize', resize)

    return () => window.removeEventListener('resize', resize)
  })

  return (
    <ApolloProvider client={getClient()}>
      <Head>
        <title>OhMyForm</title>
        <meta name="theme-color" content={'#4182e4'} />
      </Head>
      <Component {...pageProps} />
    </ApolloProvider>
  )
}

App = ({ api }: AppProps) => {
	const config = createConfig(api);

	const client = new ApolloClient({
		cache: new InMemoryCache(),
		link: new HttpLink({
			uri: config.grapqhlEndpoint,
			credentials: 'include',
		}),
	});

	return (
		<GlobalConfigContext.Provider value={config}>
			<ApolloProvider client={client}>
				<Main />
			</ApolloProvider>
		</GlobalConfigContext.Provider>
	);
}

App = ({ Component, pageProps }: AppPropsWithLayout) => {
  const { session } = pageProps
  const apolloClient = useApollo(pageProps.initialApolloState, session?.token)
  const getLayout = Component.getLayout || ((page) => page)

  return (
    <>
      <NextAuthProvider session={session}>
        <ApolloProvider client={apolloClient}>
          <ThemeProvider>
            {getLayout(<Component {...pageProps} />)}
          </ThemeProvider>
        </ApolloProvider>
      </NextAuthProvider>
    </>
  )
}

export function Providers({
  children,
}: {
  children: JSX.Element | Array<JSX.Element>;
}): JSX.Element {
  return (
    <Provider store={store}>
      <AntdThemeProviderContainer>
        <PersistGate persistor={persistor}>
          <ApolloProvider client={apolloClient}>{children}</ApolloProvider>
        </PersistGate>
      </AntdThemeProviderContainer>
    </Provider>
  );
}

withApollo = nextWithApollo(
  ({ initialState, headers, ...rest }) => {
    const httpLink = new HttpLink({
      uri: IS_SERVER ? SERVER_API_ENDPOINT : BROWSER_API_ENDPOINT,
      headers: {
        ...headers
      },
      credentials: 'include'
    });

    return new ApolloClient({
      ssrMode: IS_SERVER,
      link: httpLink,
      cache: new InMemoryCache().restore(initialState || {}),
      // A hack to get ctx oin the page's props on the initial render
      // @ts-ignore
      defaultOptions: { ...rest }
    });
  },
  {
    render: ({ Page, props }) => {
      return (
        <ApolloProvider client={props.apollo}>
          <Page {...props} {...props.apollo.defaultOptions.ctx} />
        </ApolloProvider>
      );
    }
  }
)

function MyApp(props) {
  const { Component, pageProps, apollo } = props;

  React.useEffect(() => {
    // Remove the server-side injected CSS.
    const jssStyles = document.querySelector('#jss-server-side');
    if (jssStyles) {
      jssStyles.parentElement.removeChild(jssStyles);
    }
  }, []);

  if (process.browser) {
    const router = useRouter();
    if (!canVisit(router.pathname)) {
      router.push('/login');
    }
  }

  return (
    <ThemeProvider theme={theme}>
      <ApolloProvider client={apollo}>
        {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
        <CssBaseline />
        <Component {...pageProps} client={apollo} />
      </ApolloProvider>
    </ThemeProvider>
  );
}

WebApp = ({ Component, pageProps }: AppProps): JSX.Element => {
  const apolloClient = useApollo(pageProps.initialApolloState);

  React.useEffect(() => {
    // Remove the server-side injected CSS.
    const jssStyles = document.querySelector('#jss-server-side');

    if (jssStyles) {
      jssStyles.parentElement?.removeChild(jssStyles);
    }
  }, []);

  return (
    <ApolloProvider client={apolloClient}>
      <ThemeProvider theme={theme}>
        <MuiThemeProvider theme={theme}>
          <Component {...pageProps} />
        </MuiThemeProvider>
      </ThemeProvider>
    </ApolloProvider>
  );
}

test('simulator should render template message', () => {
  HSMProps.message = {
    type: 'TEXT',
    location: null,
    media: { caption: 'This is time for play. | [view contact, +917834811114]\n' },
    body: 'This is time for play. | [view contact, +917834811114]\n',
  };
  render(
    <ApolloProvider client={client}>
      <Simulator {...HSMProps} />
    </ApolloProvider>
  );
});

ReactDOM.render(
  <JmixAppProvider apolloClient={client}
                   jmixREST={jmixREST}
                   config={{
                     appName: '<%=project.namespace%>',
                     clientId: REST_CLIENT_ID, // TODO Rename once we remove REST
                     secret: REST_CLIENT_SECRET,
                     locale: '<%= clientLocales.length > 0 ? clientLocales[0].localeName : 'en' %>',
                     graphqlEndpoint: GRAPHQL_URI
                   }}
                   metadata={metadata}
                   Modals={Modals}
  >
    <ApolloProvider client={client}>
      <I18nProvider>
        <IntlDocumentTitle>
          <HotkeyProvider defaultHotkeyConfigs={defaultHotkeyConfigs}>
            <DevSupport
              ComponentPreviews={
                <ScreensContext.Provider value={devScreens}>
                    <ComponentPreviews />
                </ScreensContext.Provider>
              }
              useInitialHook={useDevLogin}>
              <AppErrorBoundary>
                <App />
              </AppErrorBoundary>
            </DevSupport>
          </HotkeyProvider>
        </IntlDocumentTitle>
      </I18nProvider>
    </ApolloProvider>
  </JmixAppProvider>,
  document.getElementById('root') as HTMLElement
);

App = () => {
  // App doesn't accept props and doesn't contain state so should never rerender
  const apolloClient = createApolloClient()

  return (
    <>
      <GlobalStyles />
      <AnalyticsManager />
      <ApolloProvider client={apolloClient}>
        <BrowserRouter>
          <OperatorsContextProvider>
            <OverlayManagerProvider>
              <ConfirmationModalProvider>
                <ActiveUserProvider>
                  <JoystreamProvider>
                    <NftActionsProvider>
                      <MainLayout />
                      <Snackbars />
                      <AssetsManager />
                      <TransactionManager />
                      <NotificationsManager />
                      <SignInStepsStepper />
                      <NftSettlementBottomDrawer />
                      <NftPurchaseBottomDrawer />
                      <NftSaleBottomDrawer />
                    </NftActionsProvider>
                  </JoystreamProvider>
                </ActiveUserProvider>
              </ConfirmationModalProvider>
            </OverlayManagerProvider>
          </OperatorsContextProvider>
        </BrowserRouter>
      </ApolloProvider>
    </>
  )
}

ReactDOM.render(
  <Provider store={configureStore()}>
    <BrowserRouter>
      <ApolloProvider client={client}>
        <ErrorBoundary>{[<App key="App" />]}</ErrorBoundary>
      </ApolloProvider>
    </BrowserRouter>
  </Provider>,
  document.getElementById("root")
);

ReactDOM.render(
  <React.StrictMode>
    <HashRouter>
      <ApolloProvider client={client}>
        <Main />
      </ApolloProvider>
    </HashRouter>
  </React.StrictMode>,
  document.getElementById("root")
)

ReactDOM.render(
  <>
    <ApolloProvider client={client}>
      <React.StrictMode>
        <Router>
          <ThemeProvider>
            <UserPrefProvider>
              <NetworkProvider>
                <Layout />
              </NetworkProvider>
            </UserPrefProvider>
          </ThemeProvider>
        </Router>
      </React.StrictMode>
    </ApolloProvider>
  </>,
  document.getElementById("root")
);

AppContainer: React.FC<IContainerProps> = ({ app: App }) => {
  const [keycloakInitialized, setKeycloakInitialized] = useState(false);

  // Initialize the client
  useEffect(() => {
    const init = async () => {
      keycloak = await getKeycloakInstance();
      if (keycloak) {
        await keycloak?.loadUserProfile();
      }
      setKeycloakInitialized(true);
    }
    init();
  }, []);

  if (!keycloakInitialized || !keycloak.profile) return <Loading loading={true} />;

  // return container with keycloak provider
  return (
    <AuthContextProvider value={{ keycloak, profile: keycloak.profile }}>
      <ApolloProvider client={apolloClient}>
        <App />
      </ApolloProvider>
    </AuthContextProvider>
  );
}

ReactDOM.render(
  <React.StrictMode>
    <ApolloProvider client={apolloClient}>
      <Router>
        <App />
      </Router>
    </ApolloProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

function App() {

    return (
        <ApolloProvider client={client}>
            <DependencyManagerProvider defaultRegisterDependencies={true}>
                <div className={css`display:flex`}>
                    <div className={css`width:50%`}>
                        <DepartmentList/>
                    </div>
                    <div className={css`width:50%`}>
                        <EmployeeList/>
                    </div>
                </div>
            </DependencyManagerProvider>
        </ApolloProvider>
    );
}

function MyApp(props) {
  const {Component, pageProps, req} = props;
  const getLayout = Component.getLayout ?? (page => page);
  const apolloClient = useApollo(pageProps, req);

  React.useEffect(() => {
    // Remove the server-side injected CSS.
    const jssStyles = document.querySelector('#jss-server-side');
    if (jssStyles) {
      jssStyles.parentElement.removeChild(jssStyles);
    }
  }, []);

  return (
    <React.Fragment>
      <Head>
        <title>BounceCode CMS</title>
        <meta
          name="viewport"
          content="minimum-scale=1, initial-scale=1, width=device-width"
        />
      </Head>
      <ApolloProvider client={apolloClient}>
        <ThemeProvider theme={theme}>
          {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
          <CssBaseline />
          <PageLoading />
          <SnackbarProvider>
            {getLayout(<Component {...pageProps} />)}
          </SnackbarProvider>
        </ThemeProvider>
      </ApolloProvider>
    </React.Fragment>
  );
}

render() {
    return (
      <ApolloProvider client={client}>
        <div className='app'>
          <Routes />
        </div>
      </ApolloProvider>
    );
  }