@apollo/client#ApolloProvider JavaScript Examples

The following examples show how to use @apollo/client#ApolloProvider. 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: App.js    From web-frontend with MIT License 6 votes vote down vote up 
function App() {
  const [name, setName] = useState(null);

  const onSearch = (name) => {
    setName(name);
  };

  return (
    <ApolloProvider client={client}>
      <div className="App">
        <input id="name" placeholder="Nombre" />
        <button onClick={() => onSearch(document.getElementById("name").value)}>
          Buscar
        </button>
        {name !== null ? <Character name={name} /> : null}
      </div>
    </ApolloProvider>
  );
}
Example #2
Source File: _app.js    From nextjs-woocommerce with GNU General Public License v3.0 6 votes vote down vote up 
App = ({ Component, pageProps }) => (
  <ApolloProvider client={client}>
    <AppProvider>
      <Component {...pageProps} />
      <Footer />

      <Stickynav />
    </AppProvider>
  </ApolloProvider>
)
Example #3
Source File: AuthApolloProvider.js    From generator-webapp-rocket with MIT License 6 votes vote down vote up 
export function AuthApolloProvider({ children }) {
    const oidc = useContext(AuthenticationContext);

    if (oidc.isLoading) {
        return (<>auth loading</>)
    }

    return (
        <ApolloProvider client={getApolloClient()}>
            {children}
        </ApolloProvider>)
}
Example #4
Source File: _app.js    From realworld with MIT License 6 votes vote down vote up 
export default function App({ Component, pageProps }) {
  const apolloClient = useApollo(pageProps.initialApolloState);

  return (
    <ApolloProvider client={apolloClient}>
      <Component {...pageProps} />
    </ApolloProvider>
  );
}
Example #5
Source File: auth.js    From grandcast.fm with Apache License 2.0 6 votes vote down vote up 
export function AuthProvider({ children }) {
  const auth = useProvideAuth()

  return (
    <authContext.Provider value={auth}>
      <ApolloProvider client={auth.createApolloClient()}>
        {children}
      </ApolloProvider>
    </authContext.Provider>
  )
}
Example #6
Source File: App.js    From ReactCookbook-source with MIT License 6 votes vote down vote up 
function App() {
  return (
    <div className="App">
      <ApolloProvider client={client}>
        <Forum />
      </ApolloProvider>
    </div>
  )
}
Example #7
Source File: _app.js    From nextjs-boilerplate with MIT License 6 votes vote down vote up 
render() {
    const { Component, pageProps } = this.props;

    return (
      <React.Fragment>
        <GlobalStyle />
        <Head>
          <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0"
          />
          <title>App</title>
        </Head>
        <ReduxProvider store={store}>
          <ApolloProvider client={client}>
            <Navigation />
            <div className="container">
              <Component {...pageProps} />
            </div>
          </ApolloProvider>
        </ReduxProvider>
      </React.Fragment>
    );
  }
Example #8
Source File: index.js    From stack-underflow with MIT License 6 votes vote down vote up 
ReactDOM.render(
  <ApolloProvider client={apolloClient}>
    <Router>
      <AuthProvider>
        <StateProvider>
          <App />
        </StateProvider>
      </AuthProvider>
    </Router>
  </ApolloProvider>,
  document.getElementById('root')
);
Example #9
Source File: index.jsx    From Tai-Shang-NFT-Wallet with MIT License 6 votes vote down vote up 
function listen(){
  if(document.readyState ==="complete"){
    ReactDOM.render(
      <ApolloProvider client={client}>
            <ThemeSwitcherProvider themeMap={themes} defaultTheme={prevTheme || "light"}>
              <App subgraphUri={subgraphUri} />
            </ThemeSwitcherProvider>
          </ApolloProvider>,
      document.getElementById('root')
    )
  }else{
    ReactDOM.render(
      <Loading />,
      document.getElementById('root')
    )
  }
}
Example #10
Source File: App.js    From ucurtmetre with GNU General Public License v3.0 6 votes vote down vote up 
function App() {
  return (
    <ApolloProvider client={client}>
      <Suspense fallback={<p>Loading</p>}>
        <Router>
          <div>
            <Header />

            <Switch>
              <Route path="/auth/*" component={Redirecting} />
              <Route
                path="/transaction-history"
                component={TransactionHistory}
              />
              <Route path="/donate-all" component={DonateAll} />
              <Route path="/kvkk" component={ClarificationText} />
              <Route path="/direct-consent" component={DirectConsent} />
              <Route path="/user-agreement" component={UserAgreement} />
              <Route path="/cookie-policy" component={CookiePolicy} />
              <Route path="/" component={Home} />
              <Route path="*" exact component={NotFound} />
            </Switch>
          </div>
          <Footer />
          <Stairs />
        </Router>
      </Suspense>
    </ApolloProvider>
  );
}
Example #11
Source File: _app.js    From RC4Community with Apache License 2.0 6 votes vote down vote up 
function MyApp({ Component, pageProps: {session, ...pageProps}}) {
  return (
    <SSRProvider>
      <ApolloProvider client={client}>
      <SessionProvider session={session}>
        <Layout menu={pageProps}>
          <Component {...pageProps} />
        </Layout>
        </SessionProvider>
      </ApolloProvider>
    </SSRProvider>
  );
}
Example #12
Source File: App.js    From internship-job-portal with MIT License 6 votes vote down vote up 
function App() {
  return (
    <ApolloProvider client={apolloClient}>
      <Router>
        <Switch>
          <Route path="/home">
            <Home />
          </Route>
          <Route path="/english">
            <English />
          </Route>
          <Route path="/portuguese">
            <Portuguese />
          </Route>
          <Route path="/spanish">
            <Spanish />
          </Route>
        </Switch>
      </Router>
    </ApolloProvider>
  );
}
Example #13
Source File: App.js    From web-frontend with MIT License 6 votes vote down vote up 
function App() {
  return (
    <ApolloProvider client={client}>
      <div className="App">
        <Albums 
          artistId="QXJ0aXN0OjllNDIzMWFlLWJjZDMtNGEzYS05YjIwLTk5MjYwZGY0NzdhMQ=="
        />
      </div>
    </ApolloProvider>
  );
}
Example #14
Source File: _app.js    From next-ecommerce with MIT License 6 votes vote down vote up 
export default function App({ Component, pageProps }) {
  const apolloClient = useApollo(pageProps.initialApolloState);

  return (
    <ApolloProvider client={apolloClient}>
      <Component {...pageProps} />
    </ApolloProvider>
  );
}
Example #15
Source File: index.js    From horondi_client_fe with MIT License 5 votes vote down vote up 
ReactDOM.render(
  <ApolloProvider client={client}>
    <Provider store={store}>
      <App />
    </Provider>
  </ApolloProvider>,
  document.getElementById('root')
);
Example #16
Source File: index.js    From resume-github with MIT License 5 votes vote down vote up 
ReactDOM.render(
  <React.StrictMode>
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </React.StrictMode>,
  document.getElementById("root")
);
Example #17
Source File: _app.js    From redis-examples with MIT License 5 votes vote down vote up 
function MyApp({ Component, pageProps }) {
  return <ApolloProvider client={client}><Component {...pageProps} /> </ApolloProvider>
}
Example #18
Source File: _app.js    From stacker.news with MIT License 5 votes vote down vote up 
function MyApp ({ Component, pageProps: { session, ...props } }) {
  const client = getApolloClient()

  /*
    If we are on the client, we populate the apollo cache with the
    ssr data
  */
  if (typeof window !== 'undefined') {
    const { apollo, data } = props
    if (apollo) {
      client.writeQuery({
        query: gql`${apollo.query}`,
        data: data,
        variables: apollo.variables
      })
    }
  }

  const { me, price } = props

  return (
    <>
      <NextNProgress
        color='var(--primary)'
        startPosition={0.3}
        stopDelayMs={200}
        height={2}
        showOnShallow
        options={{ showSpinner: false }}
      />
      <Head>
        <meta name='viewport' content='initial-scale=1.0, width=device-width' />
      </Head>
      <PlausibleProvider domain='stacker.news' trackOutboundLinks>
        <Provider session={session}>
          <ApolloProvider client={client}>
            <MeProvider me={me}>
              <PriceProvider price={price}>
                <LightningProvider>
                  <FundErrorProvider>
                    <FundErrorModal />
                    <ItemActProvider>
                      <ItemActModal />
                      <Component {...props} />
                    </ItemActProvider>
                  </FundErrorProvider>
                </LightningProvider>
              </PriceProvider>
            </MeProvider>
          </ApolloProvider>
        </Provider>
      </PlausibleProvider>
    </>
  )
}
Example #19
Source File: App.js    From bedav with GNU General Public License v3.0 5 votes vote down vote up 
function App() {
  const [client, setClient] = useState(null);

  useEffect(() => {
    if ("serviceWorker" in navigator) {
      navigator.serviceWorker.register("/sw.js");
    }
  }, []);

  useEffect(() => {
    getClient().then((client) => setClient(client));
  }, []);

  useEffect(() => {
    window.localStorage.removeItem("apollo-cache-persist");
  }, []);

  if (!client) return null;

  return (
    <ApolloProvider client={client}>
      <Router>
        <GlobalStyle />
        <Header />
        <Suspense fallback={<div>Loading...</div>}>
          <ContentWrapper>
            <Switch>
              <Route exact path="/about/">
                <AboutPage />
              </Route>
              <Route exact path="/hospital/:hospitalId/">
                <HospitalPage />
              </Route>
              <Route exact path="/">
                <HomePage />
              </Route>
              <Route exact path="/:localityName/" />
              <Route component={NotFoundPage} />
            </Switch>
            <LiveRoute
              exact
              alwaysLive={true}
              path="/:localityName/"
              render={(props) => <LocalityPage {...props} />}
            />
          </ContentWrapper>
        </Suspense>
      </Router>
    </ApolloProvider>
  );
}
Example #20
Source File: wrap-root-element.js    From jamstack-serverless with MIT License 5 votes vote down vote up 
wrapRootElement = ({ element }) => (
  <ApolloProvider client={client}>{element}</ApolloProvider>
)
Example #21
Source File: wrap-root-element.js    From jamstack-ecommerce with MIT License 5 votes vote down vote up 
wrapRootElement = ({element})=>(
    <ApolloProvider client={client}>
        {element}
    </ApolloProvider>
)
Example #22
Source File: App.jsx    From Consuming-GraphqL-Apollo with MIT License 5 votes vote down vote up 
function App() {
  return (
    <ApolloProvider client = {client}>
      <AppRouter />
    </ApolloProvider>
  );
}
Example #23
Source File: index.js    From openeew-dashboard with Apache License 2.0 5 votes vote down vote up 
ReactDOM.render(
  <React.StrictMode>
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </React.StrictMode>,
  document.getElementById('root')
)
Example #24
Source File: server.js    From react-workshop with MIT License 5 votes vote down vote up 
server
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', (req, res) => {
    const apolloClient = new ApolloClient({
      ssrMode: true,
      cache: new InMemoryCache(),
      link: createHttpLink({
        uri: 'https://asia-southeast2-minitokopedia.cloudfunctions.net/graphql',
      }),
    });

    const context = {};
    const markup = (
      <ApolloProvider client={apolloClient}>
        <StaticRouter context={context} location={req.url}>
          <App />
        </StaticRouter>
      </ApolloProvider>
    );

    if (context.url) {
      res.redirect(context.url);
    } else {
      getDataFromTree(markup).then((content) => {
        const initialState = apolloClient.extract();

        const html = renderToString(
          <html lang="en">
            <head>
              <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
              <meta charset="utf-8" />
              <title>Welcome to Razzle</title>
              <meta name="viewport" content="width=device-width, initial-scale=1" />
              {cssLinksFromAssets(razzleAssets, 'client')}
            </head>
            <body>
              <div id="root" dangerouslySetInnerHTML={{ __html: content }} />
              <script
                dangerouslySetInnerHTML={{
                  __html: `window.__APOLLO_STATE__=${JSON.stringify(initialState).replace(/</g, '\\u003c')};`,
                }}
              />
              {jsScriptTagsFromAssets(razzleAssets, 'client')}
            </body>
          </html>,
        );

        res.status(200).header('Content-Type', 'text/html').send(`<!doctype html>\n${html}`);
      });
    }
  });
Example #25
Source File: App.js    From web-frontend with MIT License 5 votes vote down vote up 
function App() {
  const [token, setToken] = useState(null);

  const onAuthenticate = (token) => {
    setToken(token);
  };

  if (!token)
    return (
      <div>
        <input id="token" placeholder="github token" />
        <button
          onClick={() => onAuthenticate(document.getElementById("token").value)}
        >
          Authenticate
        </button>
      </div>
    );
  else {
    const httpLink = createHttpLink({
      uri: "https://api.github.com/graphql",
    });

    const authLink = setContext((_, { headers }) => {
      return {
        headers: {
          ...headers,
          authorization: token ? `Bearer ${token}` : "",
        },
      };
    });

    const client = new ApolloClient({
      link: authLink.concat(httpLink),
      cache: new InMemoryCache(),
    });

    return (
      <ApolloProvider client={client}>
        <div className="App">
          <GitHubQuery />
        </div>
      </ApolloProvider>
    );
  }
}
Example #26
Source File: wrapRootElement.js    From gatsby-apollo-wpgraphql-jwt-starter with MIT License 5 votes vote down vote up 
wrapRootElement = ({element}) => {
  return <ApolloProvider client={client}>
      <AuthProvider>
        {element}
      </AuthProvider>
    </ApolloProvider>
}
Example #27
Source File: index.jsx    From moonshot with MIT License 5 votes vote down vote up 
ReactDOM.render(
  <ApolloProvider client={client}>
    <App subgraphUri={subgraphUri} />
  </ApolloProvider>,
  document.getElementById("root"),
);
Example #28
Source File: index.js    From horondi_admin with MIT License 5 votes vote down vote up 
ReactDOM.render(
  <ApolloProvider client={client}>
    <Provider store={store}>
      <App />
    </Provider>
  </ApolloProvider>,
  document.getElementById('root')
);
Example #29
Source File: App.js    From Simplify-Testing-with-React-Testing-Library with MIT License 5 votes vote down vote up 
App = () => {
  return (
    <ApolloProvider client={client}>
      <Table />
    </ApolloProvider>
  )
}