@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 internship-job-portal with MIT License

6 votes

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 #2

Source File: App.js From web-frontend with MIT License

6 votes

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 #3

Source File: App.js From web-frontend with MIT License

6 votes

function App() {
  return (
    <ApolloProvider client={client}>
      <div className="App">
        <Albums 
          artistId="QXJ0aXN0OjllNDIzMWFlLWJjZDMtNGEzYS05YjIwLTk5MjYwZGY0NzdhMQ=="
        />
      </div>
    </ApolloProvider>
  );
}

Example #4

Source File: _app.js From next-ecommerce with MIT License

6 votes

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

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

Example #5

Source File: _app.js From RC4Community with Apache License 2.0

6 votes

function MyApp({ Component, pageProps: {session, ...pageProps}}) {
  return (
    <SSRProvider>
      <ApolloProvider client={client}>
      <SessionProvider session={session}>
        <Layout menu={pageProps}>
          <Component {...pageProps} />
        </Layout>
        </SessionProvider>
      </ApolloProvider>
    </SSRProvider>
  );
}

Example #6

Source File: App.js From ucurtmetre with GNU General Public License v3.0

6 votes

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

Source File: index.jsx From Tai-Shang-NFT-Wallet with MIT License

6 votes

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 #8

Source File: index.js From stack-underflow with MIT License

6 votes

ReactDOM.render(
  <ApolloProvider client={apolloClient}>
    <Router>
      <AuthProvider>
        <StateProvider>
          <App />
        </StateProvider>
      </AuthProvider>
    </Router>
  </ApolloProvider>,
  document.getElementById('root')
);

Example #9

Source File: _app.js From nextjs-boilerplate with MIT License

6 votes

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 #10

Source File: App.js From ReactCookbook-source with MIT License

6 votes

function App() {
  return (
    <div className="App">
      <ApolloProvider client={client}>
        <Forum />
      </ApolloProvider>
    </div>
  )
}

Example #11

Source File: auth.js From grandcast.fm with Apache License 2.0

6 votes

export function AuthProvider({ children }) {
  const auth = useProvideAuth()

  return (
    <authContext.Provider value={auth}>
      <ApolloProvider client={auth.createApolloClient()}>
        {children}
      </ApolloProvider>
    </authContext.Provider>
  )
}

Example #12

Source File: _app.js From realworld with MIT License

6 votes

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

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

Example #13

Source File: AuthApolloProvider.js From generator-webapp-rocket with MIT License

6 votes

export function AuthApolloProvider({ children }) {
    const oidc = useContext(AuthenticationContext);

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

    return (
        <ApolloProvider client={getApolloClient()}>
            {children}
        </ApolloProvider>)
}

Example #14

Source File: _app.js From nextjs-woocommerce with GNU General Public License v3.0

6 votes

App = ({ Component, pageProps }) => (
  <ApolloProvider client={client}>
    <AppProvider>
      <Component {...pageProps} />
      <Footer />

      <Stickynav />
    </AppProvider>
  </ApolloProvider>
)

Example #15

Source File: App.js From web-frontend with MIT License

5 votes

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 #16

Source File: wrapRootElement.js From gatsby-apollo-wpgraphql-jwt-starter with MIT License

5 votes

wrapRootElement = ({element}) => {
  return <ApolloProvider client={client}>
      <AuthProvider>
        {element}
      </AuthProvider>
    </ApolloProvider>
}

Example #17

Source File: App.js From Simplify-Testing-with-React-Testing-Library with MIT License

5 votes

App = () => {
  return (
    <ApolloProvider client={client}>
      <Table />
    </ApolloProvider>
  )
}

Example #18

Source File: AppEntry.js From malware-detection-frontend with Apache License 2.0

5 votes

AppEntry = ({ useLogger, connectToDevTools }) => {
    const tags = useRef();
    const registry = useLogger ? init(logger) : init();
    const selectedWorkloads = useRef();
    const selectedSID = useRef();

    const globalFilterLink = setContext((_, { headers }) => ({
        headers: {
            ...headers,
            ...(tags.current?.length && { 'insights-tags': `${tags.current}` }),
            ...(selectedWorkloads.current?.SAP?.isSelected && { 'insights-sap-system': true }),
            ...(selectedWorkloads.current['Ansible Automation Platform']?.isSelected && { 'insights-ansible-system': true }),
            ...(selectedWorkloads.current['Microsoft SQL']?.isSelected && { 'insights-mssql-system': true }),
            ...(selectedSID.current?.length && { 'insights-sap-sids': `${selectedSID.current}` })
        }
    }));
    const client = useMemo(() =>  new ApolloClient({
        link: globalFilterLink.concat(createHttpLink({
            uri: '/api/malware-detection/v1/graphql'
        })),
        cache,
        connectToDevTools
    }, `${tags.current}`), [connectToDevTools, globalFilterLink]);
    registry.register({ notifications });

    useEffect(() => {
        insights.chrome.init();
        insights.chrome.identifyApp('malware');
        if (insights.chrome?.globalFilterScope) {
            insights.chrome.on('GLOBAL_FILTER_UPDATE', ({ data }) => {
                const [workloads, SID, selectedTags] =
                insights.chrome?.mapGlobalFilter?.(data, false, true) || [];
                tags.current =  selectedTags?.join(',') || '';

                selectedWorkloads.current = workloads || {};
                selectedSID.current = SID || [];

                globalFilters({ workloads, SID, selectedTags });

                client.resetStore();
            });
        }

    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [client]);

    return <IntlProvider locale={navigator.language.slice(0, 2)} messages={messages} onError={console.log}>
        <ApolloProvider client={client}>
            <RegistryContext.Provider value={{ getRegistry: () => registry }}>
                <Provider store={registry.getStore()}>
                    <Router basename={getBaseName(window.location.pathname)}>
                        <NotificationsPortal />
                        <App />
                    </Router>
                </Provider>
            </RegistryContext.Provider>
        </ApolloProvider>
    </IntlProvider>;
}

Example #19

Source File: index.js From resume-github with MIT License

5 votes

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

Example #20

Source File: App.jsx From Consuming-GraphqL-Apollo with MIT License

5 votes

function App() {
  return (
    <ApolloProvider client = {client}>
      <AppRouter />
    </ApolloProvider>
  );
}

Example #21

Source File: index.jsx From moonshot with MIT License

5 votes

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

Example #22

Source File: App.js From ReactNativeApolloOnlineStore with MIT License

5 votes

export default function() {
  const [client, setClient] = React.useState(null);

  React.useEffect(() => {
    persistCache({
      cache,
      storage: AsyncStorage,
      trigger: 'background',
    }).then(() => {
      setClient(
        new ApolloClient({
          uri: GRAPHQL_URL,
          cache: cache,
          resolvers: resolvers,
        }),
      );
    });
  }, []);

  if (!client) {
    return <Loading />;
  }

  return (
    <ApolloProvider client={client}>
      <NavigationContainer>
        <Stack.Navigator
          screenOptions={{
            headerBackTitleVisible: false,
            headerTintColor: 'black',
          }}>
          <Stack.Screen
            name={'ProductsList'}
            component={ProductsList}
            options={{
              headerRight: () => <HeaderFavoriteProductsCount />,
            }}
          />
          <Stack.Screen
            name={'ProductDetails'}
            component={ProductDetails}
            options={{
              headerRight: () => <HeaderFavoriteProductsCount />,
            }}
          />
        </Stack.Navigator>
      </NavigationContainer>
    </ApolloProvider>
  );
}

Example #23

Source File: index.jsx From quadratic-diplomacy with MIT License

5 votes

ReactDOM.render(
  <ApolloProvider client={client}>
    <ThemeSwitcherProvider themeMap={themes} defaultTheme={prevTheme || "light"}>
      <App subgraphUri={subgraphUri} />
    </ThemeSwitcherProvider>
  </ApolloProvider>,
  document.getElementById("root"),
);

Example #24

Source File: index.js From graphql-sample-apps with Apache License 2.0

5 votes

ReactDOM.render(
   <ApolloProvider client={client}>
    <ThemeProvider theme={theme}>
      <App />
    </ThemeProvider>
    </ApolloProvider>,
  document.getElementById('root')
);

Example #25

Source File: App.js From graphql-sample-apps with Apache License 2.0

5 votes

function App() {
  return (
    <ApolloProvider client={apolloClient}>
      <Post />
    </ApolloProvider>
  );
}

Example #26

Source File: App.js From graphql-sample-apps with Apache License 2.0

5 votes

function App() {
  
  const [idToken, setIdToken] = useState("");

  const classes = useStyles();
  const { isLoading, isAuthenticated, getIdTokenClaims } = useAuth0();

  useEffect(() => {
    const initAuth0 = async () => {
      if (isAuthenticated) {
        const idTokenClaims = await getIdTokenClaims();
        setIdToken(idTokenClaims.__raw);
      }
    };
    initAuth0();
  }, [isAuthenticated, getIdTokenClaims]);

  useEffect(() => {
    ReactGA.initialize('UA-177248464-1');
    ReactGA.pageview(window.location.pathname);
  }, [])

  if (isLoading) {
    return <Loading />;
  }
  
  const client = createApolloClient(idToken);
 
  return (
    <ApolloProvider client={client}>
    <div className={classes.root}>
      <CssBaseline />
      <Router history={history}>
        <Suspense fallback={<div />}>
          <ModalSwitch />
        </Suspense>
      </Router>
    </div>
    </ApolloProvider>
  )
}

Example #27

Source File: ApolloWrapper.js From graphql-sample-apps with Apache License 2.0

5 votes

ApolloWrapper = () => {
  const { isAuthenticated, getIdTokenClaims } = useAuth0();
  const [xAuthToken, setXAuthToken] = useState("");

  useEffect(() => {
    const getToken = async () => {
      const token = isAuthenticated ? await getIdTokenClaims() : "";
      setXAuthToken(token);
    };
    getToken();
  }, [getIdTokenClaims, isAuthenticated]);

  const httpLink = createHttpLink({
    uri: process.env.REACT_APP_BACKEND_ENDPOINT,
  });

  const authLink = setContext((_, { headers, ...rest }) => {
    if (!xAuthToken) return { headers, ...rest };

    return {
      ...rest,
      headers: {
        ...headers,
        "X-Auth-Token": xAuthToken.__raw,
      },
    };
  });

  const wsLink = new WebSocketLink({
    uri: process.env.REACT_APP_BACKEND_ENDPOINT.replace("https://", "wss://"),
    options: {
      reconnect: true,
      minTimeout: 30000,
      connectionParams: {
        "X-Auth-Token": xAuthToken.__raw,
      },
    },
  });

  const splitLink = split(
    ({ query }) => {
      const definition = getMainDefinition(query);
      return (
        definition.kind === "OperationDefinition" &&
        definition.operation === "subscription"
      );
    },
    wsLink,
    authLink.concat(httpLink)
  );

  const client = new ApolloClient({
    cache: new InMemoryCache(),
    link: splitLink,
  });

  return (
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  );
}

Example #28

Source File: index.js From horondi_admin with MIT License

5 votes

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

Example #29

Source File: index.js From horondi_client_fe with MIT License

5 votes

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