react-apollo#ApolloProvider JavaScript Examples

The following examples show how to use react-apollo#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 React-Messenger-App with MIT License 6 votes vote down vote up 
render() {
    const { Component, pageProps, apolloClient } = this.props;

    return (
      <Container>
        <ApolloProvider client={apolloClient}>
          <Component {...pageProps} />
        </ApolloProvider>
        <style jsx global>{`
          .gradient-primary {
            background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);
          }
        `}</style>
      </Container>
    );
  }
Example #2
Source File: index.jsx    From Spoke with MIT License 6 votes vote down vote up 
ReactDOM.render(
  <MuiThemeProvider muiTheme={muiTheme}>
    <ErrorBoundary>
      <ApolloProvider store={store.data} client={ApolloClientSingleton}>
        <Suspense fallback={<LoadingIndicator />}>
          <Router history={history} routes={makeRoutes()} />
        </Suspense>
      </ApolloProvider>
    </ErrorBoundary>
  </MuiThemeProvider>,
  document.getElementById("mount")
);
Example #3
Source File: _app.js    From shopify-app-banner with MIT License 6 votes vote down vote up 
function MyProvider(props) {
  const app = useAppBridge();

  const client = new ApolloClient({
    fetch: authenticatedFetch(app),
    fetchOptions: {
      credentials: "include",
    },
  });

  const Component = props.Component;

  return (
    <ApolloProvider client={client}>
      <Component {...props} />
    </ApolloProvider>
  );
}
Example #4
Source File: _app.js    From shopify-node-react-app with MIT License 6 votes vote down vote up 
render() {
    const { Component, pageProps } = this.props;
    const config = { apiKey: API_KEY, shopOrigin: Cookies.get("shopOrigin"), forceRedirect: true };
    return (
      <React.Fragment>
        <Head>
          <title>Shopify App</title>
          <meta charSet="utf-8" />
        </Head>
        <Provider config={config}>
          <AppProvider i18n={translations}>
            <ApolloProvider client={client}>
            <Component {...pageProps} />
            </ApolloProvider>
          </AppProvider>
        </Provider>
      </React.Fragment>
    );
  }
Example #5
Source File: render.js    From tunnel-tool with MIT License 6 votes vote down vote up 
render = ({
  App,
  watchers,
  reducers,
  urls: { graphql, events }
}) => {
  const { store, history } = configureStore({
    reducers,
    initState: window.__PRELOADED_STATE__
  });
  const client = configureGraph({
    url: graphql,
    initState: window.__APOLLO_STATE__
  });

  const AppRoot = () => {
    return (
      <ApolloProvider client={client}>
        <Provider store={store}>
          <ConnectedRouter history={history}>
            <App />
          </ConnectedRouter>
        </Provider>
        <ToastContainer />
        <SocketContainer client={client} events={events} />
      </ApolloProvider>
    );
  };

  hydrate(<AppRoot />, document.getElementById("root"));
}
Example #6
Source File: App.js    From 4noobs-mobile with MIT License 5 votes vote down vote up 
App = () => (
  <ApolloProvider client={client}>
    <Provider store={store}>
      <AppNavigator />
    </Provider>
  </ApolloProvider>
)
Example #7
Source File: index.js    From Lambda with MIT License 5 votes vote down vote up 
ApolloApp = () => (
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>
)
Example #8
Source File: index.js    From graphql-sample-apps with Apache License 2.0 5 votes vote down vote up 
ReactDOM.render(
  <BrowserRouter>
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </BrowserRouter>,
  document.getElementById("root")
);
Example #9
Source File: ApolloWrapper.jsx    From pooltogether-landing-site with MIT License 5 votes vote down vote up 
ApolloWrapper = class extends Component {
  state = {}

  async componentDidMount() {
    if (typeof window === 'object') {
      if (!clientPromise) {
        clientPromise = apolloClient()
      }

      const { client, tightbeam } = await clientPromise

      this.setState({ client, tightbeam })
    }
  }

  render() {
    const { client, tightbeam } = this.state

    let children

    if (client) {
      children = 
        <ApolloProvider
          client={client}
        >
          <TightbeamContext.Provider
            value={tightbeam}
          >
            <ProviderManagerContext.Provider
              value={ProviderManager}
            >
              {this.props.children}
            </ProviderManagerContext.Provider>
          </TightbeamContext.Provider>
        </ApolloProvider>
    } else {
      children = <></>
    }

    return children;
  }
}
Example #10
Source File: render.js    From tunnel-tool with MIT License 5 votes vote down vote up 
render = (
  {
    App,
    paths: { resources: RESOURCES_BASE_ROUTE, base: BASE_ROUTE },
    urls: {
      external: { graphql: EXTERNAL_URL_GRAPH, events: EXTERNAL_URL_EVENTS },
      internal: { graphql: INTERNAL_URL_GRAPH, events: INTERNAL_URL_EVENTS }
    },
    watchers,
    reducers,
    req,
    res
  },
  cxt
) => {
  let routerContext = {};
  const { store } = configureStore({ reducers, initState: {} });
  const { graph } = configureGraph({
    url: INTERNAL_URL_GRAPH,
    req,
    initState: {}
  });

  const AppRoot = (
    <ApolloProvider client={graph}>
      <Provider store={store}>
        <StaticRouter location={req.url} context={routerContext}>
          <App />
        </StaticRouter>
      </Provider>
    </ApolloProvider>
  );

  getDataFromTree(AppRoot)
    .then(() => {
      const preloadedState = store.getState();
      const htmlSteam =
        Template.header({
          paths: { base: BASE_ROUTE, resources: RESOURCES_BASE_ROUTE }
        }) +
        renderToString(AppRoot) +
        Template.footer({
          config: {
            paths: { base: BASE_ROUTE, resources: RESOURCES_BASE_ROUTE },
            urls: {
              graphql: EXTERNAL_URL_GRAPH,
              events: EXTERNAL_URL_EVENTS
            }
          },
          preloadedState,
          preloadedGraphState: graph.extract()
        });

      if (routerContext.url) {
        res.redirect(routerContext.url);
      } else {
        res.status(200);
        res.send(htmlSteam);
      }
    })
    .catch(function(error) {
      console.log(error);
    });
}
Example #11
Source File: App.js    From Gameplayer with MIT License 5 votes vote down vote up 
render() {
    const { withImage, withName, orderBy, showHelpDialog } = this.state

    return (
      <ApolloProvider client={client}>
        <div className="App">
          <Grid container direction="column">
            <Header onHelp={this.toggleHelpDialog} />
            <Filter
              orderBy={orderBy}
              withImage={withImage}
              withName={withName}
              onOrderBy={field => this.setState(state => ({ ...state, orderBy: field }))}
              onToggleWithImage={() =>
                this.setState(state => ({ ...state, withImage: !state.withImage }))
              }
              onToggleWithName={() =>
                this.setState(state => ({ ...state, withName: !state.withName }))
              }
            />
            <Grid item>
              <Grid container>
                <Query
                  query={GRAVATARS_QUERY}
                  variables={{
                    where: {
                      ...(withImage ? { imageUrl_starts_with: 'http' } : {}),
                      ...(withName ? { displayName_not: '' } : {}),
                    },
                    orderBy: orderBy,
                  }}
                >
                  {({ data, error, loading }) => {
                    return loading ? (
                      <LinearProgress variant="query" style={{ width: '100%' }} />
                    ) : error ? (
                      <Error error={error} />
                    ) : (
                      <Gravatars gravatars={data.gravatars} />
                    )
                  }}
                </Query>
              </Grid>
            </Grid>
          </Grid>
          <Dialog
            fullScreen={false}
            open={showHelpDialog}
            onClose={this.toggleHelpDialog}
            aria-labelledby="help-dialog"
          >
            <DialogTitle id="help-dialog">{'Show Quick Guide?'}</DialogTitle>
            <DialogContent>
              <DialogContentText>
                We have prepared a quick guide for you to get started with The Graph at
                this hackathon. Shall we take you there now?
              </DialogContentText>
            </DialogContent>
            <DialogActions>
              <Button onClick={this.toggleHelpDialog} color="primary">
                Nah, I'm good
              </Button>
              <Button onClick={this.gotoQuickStartGuide} color="primary" autoFocus>
                Yes, pease
              </Button>
            </DialogActions>
          </Dialog>
        </div>
      </ApolloProvider>
    )
  }
Example #12
Source File: App.js    From spooky-info with GNU General Public License v3.0 4 votes vote down vote up 
function App() {
  const [savedOpen, setSavedOpen] = useState(false)

  const globalData = useGlobalData()
  const globalChartData = useGlobalChartData()
  const [latestBlock, headBlock] = useLatestBlocks()

  // show warning
  const showWarning = headBlock && latestBlock ? headBlock - latestBlock > BLOCK_DIFFERENCE_THRESHOLD : false

  return (
    <ApolloProvider client={client}>
      <AppWrapper>
        {showWarning && (
          <WarningWrapper>
            <WarningBanner>
              {`Warning: The data on this site has only synced to Fantom block ${latestBlock} (out of ${headBlock}). Please check back soon.`}
            </WarningBanner>
          </WarningWrapper>
        )}
        {globalData &&
        Object.keys(globalData).length > 0 &&
        globalChartData &&
        Object.keys(globalChartData).length > 0 ? (
          <BrowserRouter>
            <Route component={GoogleAnalyticsReporter} />
            <Switch>
              <Route
                exacts
                strict
                path="/token/:tokenAddress"
                render={({ match }) => {
                  if (
                    isAddress(match.params.tokenAddress.toLowerCase()) &&
                    !Object.keys(TOKEN_BLACKLIST).includes(match.params.tokenAddress.toLowerCase())
                  ) {
                    return (
                      <LayoutWrapper savedOpen={savedOpen} setSavedOpen={setSavedOpen}>
                        <TokenPage address={match.params.tokenAddress.toLowerCase()} />
                      </LayoutWrapper>
                    )
                  } else {
                    return <Redirect to="/home" />
                  }
                }}
              />
              <Route
                exacts
                strict
                path="/pair/:pairAddress"
                render={({ match }) => {
                  if (
                    isAddress(match.params.pairAddress.toLowerCase()) &&
                    !Object.keys(PAIR_BLACKLIST).includes(match.params.pairAddress.toLowerCase())
                  ) {
                    return (
                      <LayoutWrapper savedOpen={savedOpen} setSavedOpen={setSavedOpen}>
                        <PairPage pairAddress={match.params.pairAddress.toLowerCase()} />
                      </LayoutWrapper>
                    )
                  } else {
                    return <Redirect to="/home" />
                  }
                }}
              />

              <Route path="/home">
                <LayoutWrapper savedOpen={savedOpen} setSavedOpen={setSavedOpen}>
                  <GlobalPage />
                </LayoutWrapper>
              </Route>

              <Route path="/tokens">
                <LayoutWrapper savedOpen={savedOpen} setSavedOpen={setSavedOpen}>
                  <AllTokensPage />
                </LayoutWrapper>
              </Route>

              <Route path="/pairs">
                <LayoutWrapper savedOpen={savedOpen} setSavedOpen={setSavedOpen}>
                  <AllPairsPage />
                </LayoutWrapper>
              </Route>

              <Redirect to="/home" />
            </Switch>
          </BrowserRouter>
        ) : (
          <LocalLoader fill="true" />
        )}
      </AppWrapper>
    </ApolloProvider>
  )
}
Example #13
Source File: App.js    From pancake-info-v1 with GNU General Public License v3.0 4 votes vote down vote up 
function App() {
  const [savedOpen, setSavedOpen] = useState(false)

  const globalData = useGlobalData()
  const globalChartData = useGlobalChartData()
  const [latestBlock, headBlock] = useLatestBlocks()

  // show warning
  const showWarning = headBlock && latestBlock ? headBlock - latestBlock > BLOCK_DIFFERENCE_THRESHOLD : false

  return (
    <ApolloProvider client={client}>
      <AppWrapper>
        {showWarning && (
          <WarningWrapper>
            <WarningBanner>
              {`The data on this site has only synced to Binance Smart Chain block ${latestBlock} (out of ${headBlock}). Please check back soon.`}
            </WarningBanner>
          </WarningWrapper>
        )}
        {globalData &&
        Object.keys(globalData).length > 0 &&
        globalChartData &&
        Object.keys(globalChartData).length > 0 ? (
          <BrowserRouter>
            <Switch>
              <Route
                exacts
                strict
                path="/token/:tokenAddress"
                render={({ match }) => {
                  if (OVERVIEW_TOKEN_BLACKLIST.includes(match.params.tokenAddress.toLowerCase())) {
                    return <Redirect to="/home" />
                  }
                  if (isAddress(match.params.tokenAddress.toLowerCase())) {
                    return (
                      <LayoutWrapper savedOpen={savedOpen} setSavedOpen={setSavedOpen}>
                        <TokenPage address={match.params.tokenAddress.toLowerCase()} />
                      </LayoutWrapper>
                    )
                  } else {
                    return <Redirect to="/home" />
                  }
                }}
              />
              <Route
                exacts
                strict
                path="/pair/:pairAddress"
                render={({ match }) => {
                  if (PAIR_BLACKLIST.includes(match.params.pairAddress.toLowerCase())) {
                    return <Redirect to="/home" />
                  }
                  if (isAddress(match.params.pairAddress.toLowerCase())) {
                    return (
                      <LayoutWrapper savedOpen={savedOpen} setSavedOpen={setSavedOpen}>
                        <PairPage pairAddress={match.params.pairAddress.toLowerCase()} />
                      </LayoutWrapper>
                    )
                  } else {
                    return <Redirect to="/home" />
                  }
                }}
              />
              <Route
                exacts
                strict
                path="/account/:accountAddress"
                render={({ match }) => {
                  if (isAddress(match.params.accountAddress.toLowerCase())) {
                    return (
                      <LayoutWrapper savedOpen={savedOpen} setSavedOpen={setSavedOpen}>
                        <AccountPage account={match.params.accountAddress.toLowerCase()} />
                      </LayoutWrapper>
                    )
                  } else {
                    return <Redirect to="/home" />
                  }
                }}
              />

              <Route path="/home">
                <LayoutWrapper savedOpen={savedOpen} setSavedOpen={setSavedOpen}>
                  <GlobalPage />
                </LayoutWrapper>
              </Route>

              <Route path="/tokens">
                <LayoutWrapper savedOpen={savedOpen} setSavedOpen={setSavedOpen}>
                  <AllTokensPage />
                </LayoutWrapper>
              </Route>

              <Route path="/pairs">
                <LayoutWrapper savedOpen={savedOpen} setSavedOpen={setSavedOpen}>
                  <AllPairsPage />
                </LayoutWrapper>
              </Route>

              <Route path="/accounts">
                <LayoutWrapper savedOpen={savedOpen} setSavedOpen={setSavedOpen}>
                  <AccountLookup />
                </LayoutWrapper>
              </Route>

              <Redirect to="/home" />
            </Switch>
          </BrowserRouter>
        ) : (
          <LocalLoader fill="true" />
        )}
      </AppWrapper>
    </ApolloProvider>
  )
}