@apollo/react-hooks#ApolloProvider JavaScript Examples

The following examples show how to use @apollo/react-hooks#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 reactnative-best-practice with MIT License 6 votes vote down vote up 
function App() {
  return (
    <ApolloProvider client={client}>
      <ContextProvider>
        <NavigationNativeContainer>
          <AppNavigator />
        </NavigationNativeContainer>
      </ContextProvider>
    </ApolloProvider>
  );
}
Example #2
Source File: _app.jsx    From teach-yourself-code with MIT License 6 votes vote down vote up 
export default function MyApp({ Component, pageProps }) {
  const router = useRouter();
  // Sets tab title using a modified version of the route name
  let title =
    router.pathname.slice(1).charAt(0).toUpperCase() + router.pathname.slice(2);

  return (
    <ApolloProvider client={client}>
      <Head>
        <title>{title ? title : "Home"}</title>
        <link rel="shortcut icon" href="/favicon.ico" />
      </Head>
      {/* Inject store props into unique Apollo component */}
      <Provider store={store}>
        <Component {...pageProps} />
      </Provider>
    </ApolloProvider>
  );
}
Example #3
Source File: apollo.js    From mailmask with GNU Affero General Public License v3.0 6 votes vote down vote up 
withApollo = withApolloBase(
  ({ initialState }) => {
    return createApolloClient({
      endpoint: `/api/graphql`,
      initialState,
    })
  },
  {
    render: ({ Page, props }) => {
      return (
        <ApolloProvider client={props.apollo}>
          <Page {...props} />
        </ApolloProvider>
      )
    }
  }
)
Example #4
Source File: index.js    From pathways with GNU General Public License v3.0 6 votes vote down vote up 
app = (
  <Provider store={store}>
    <ApolloProvider client={client}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </ApolloProvider>
  </Provider>
)
Example #5
Source File: App.test.js    From willow-grandstack with Apache License 2.0 6 votes vote down vote up 
it('renders without crashing', () => {
  const div = document.createElement('div')
  ReactDOM.render(
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>,
    div
  )
  ReactDOM.unmountComponentAtNode(div)
})
Example #6
Source File: index.js    From willow-grandstack with Apache License 2.0 6 votes vote down vote up 
AppWithApollo = () => {
  const [accessToken, setAccessToken] = useState()
  const { getAccessTokenSilently, loginWithRedirect } = useAuth0()

  const getAccessToken = useCallback(async () => {
    try {
      const token = await getAccessTokenSilently()
      console.log(token)
      setAccessToken(token)
    } catch (err) {
      //loginWithRedirect()
    }
  }, [getAccessTokenSilently, loginWithRedirect])

  useEffect(() => {
    getAccessToken()
  }, [getAccessToken])

  const client = new ApolloClient({
    uri: process.env.REACT_APP_GRAPHQL_URI || '/graphql',
    request: async (operation) => {
      if (accessToken) {
        operation.setContext({
          headers: {
            Authorization: `Bearer ${accessToken}`,
          },
        })
      }
    },
  })

  return (
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  )
}
Example #7
Source File: index.js    From lifebank with MIT License 6 votes vote down vote up 
render(
  <ThemeProvider theme={theme}>
    <ApolloProvider client={client}>
      <CookiesProvider>
        <UserProvider>
          <CssBaseline />
          <App />
        </UserProvider>
      </CookiesProvider>
    </ApolloProvider>
  </ThemeProvider>,
  document.getElementById('root')
)
Example #8
Source File: App.js    From project-avocado-web with MIT License 6 votes vote down vote up 
render () {
    let navbarComponent = !this.state.isFullPageLayout ? <Navbar/> : '';
    let sidebarComponent = !this.state.isFullPageLayout ? <Sidebar/> : '';
    let footerComponent = !this.state.isFullPageLayout ? <Footer/> : '';
    return (
      <ApolloProvider client={client}>
      <div className="container-scroller">
        { navbarComponent }
        <div className="container-fluid page-body-wrapper">
          { sidebarComponent }
          <div className="main-panel">
            <div className="content-wrapper">
              <AppRoutes/>
            </div>
            { footerComponent }
          </div>
        </div>
      </div>
      </ApolloProvider>
    );
  }
Example #9
Source File: App.js    From graphql-sample-apps with Apache License 2.0 6 votes vote down vote up 
App = ({idToken}) => {
  const { loading } = useContext(AuthContext);
  if (loading) {
    return <div>Loading...</div>;
  }
  console.log(idToken)
  const client = createApolloClient(idToken);
  return (
    <ApolloProvider client={client}>
      <div>
        <Router history={history}>
        <header className="navheader">
          <NavBar/>
        </header>
        <Switch>
        <PrivateRoute path="/" component= {TodoApp} exact />
        <PrivateRoute path="/profile" component={Profile} exact/>
        <Route exact path="/login" component = {Login} />
        <Route exact path="/signup" component={SignUp} />
      </Switch>
      </Router>
    </div>
    </ApolloProvider>
  );
}
Example #10
Source File: App.js    From graphql-sample-apps with Apache License 2.0 6 votes vote down vote up 
App = ({ idToken }) => {
  const { loading } = useAuth0();

  if (loading) {
    return <div>Loading...</div>;
  }

  const client = createApolloClient(idToken);

  return (
    <ApolloProvider client={client}>
      <div class="todoapp">
        <Router history={history}>
          <h1>todos</h1>
          <header className="navheader">
            <NavBar />
          </header>
          <Switch>
            <PrivateRoute path="/" component={TodoApp} exact />
            <PrivateRoute path="/profile" component={Profile} />
          </Switch>
        </Router>
      </div>

      <AuthToken token={idToken} />
    </ApolloProvider>
  );
}
Example #11
Source File: App.js    From graphql-sample-apps with Apache License 2.0 6 votes vote down vote up 
App = () => {
  const client = createApolloClient();
  return (
    <ApolloProvider client={client}>
      <div>
        <h1>todos</h1>
        <TodoApp />
    </div>
    </ApolloProvider>
  );
}
Example #12
Source File: wrapper.js    From about-1hive with GNU General Public License v3.0 6 votes vote down vote up 
export function wrapRootElement({ element }) {
  return (
    <ApolloProvider client={client}>
      <ApplicationContextProvider>
        <ApplicationContextUpdater />
        <Helmet>
          <link rel="stylesheet" href={DOCSEARCH_STYLESHEET_URL} />
        </Helmet>
        {element}
      </ApplicationContextProvider>
    </ApolloProvider>
  )
}
Example #13
Source File: Application.js    From react-blog-github with MIT License 6 votes vote down vote up 
Application = () => {
  const urlParams = new URLSearchParams(window.location.search);
  const [theme, themeToggler] = useDarkMode();
  const themeMode = theme === 'light' ? lightTheme : darkTheme;

  if (urlParams.get('code')) {
    return <GithubCallback />
  }

  return (
    <>
      <Helmet>
          <title>{config.title}</title>
          <meta charSet="utf-8" />
          <meta name="description" content={config.subtitle} />
          <meta name="theme-color" content={config.header.backgroundColor} />
      </Helmet>
      <ApolloProvider client={client}>
        <ThemeProvider theme={themeMode} toggleTheme={themeToggler}>
          <GlobalStyles />
          <Router />
          <Toggle theme={theme} toggleTheme={themeToggler} />
        </ThemeProvider>
      </ApolloProvider>
    </>
  )
}
Example #14
Source File: App.js    From designcode-app with MIT License 6 votes vote down vote up 
export default function App() {
  return (
    <ApolloProvider client={client}>
      <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
          <Navigator />
        </PersistGate>
      </Provider>
      <StatusBar barStyle="dark-content" />
    </ApolloProvider>
  );
}
Example #15
Source File: App.js    From react-sample-projects with MIT License 6 votes vote down vote up 
function App() {
  const client = new ApolloClient({
    uri: 'https://graphql-pokemon2.vercel.app/',
    cache: new InMemoryCache(),
  });

  return (
    <ApolloProvider client={client}>
      <Provider store={store}>
        <Router hashType="slash">
          <Routes>
            <Route exact path="/" element={<Home />}></Route>
            <Route
              exact
              path="/pokemon/:id"
              element={<PokemonDetail />}
            ></Route>
          </Routes>
        </Router>
      </Provider>
    </ApolloProvider>
  );
}
Example #16
Source File: App.js    From spells-fyi with MIT License 6 votes vote down vote up 
function App() {
  const platforms = getFilteredPlatforms();
  const [filteredPlatforms, setFilteredPlatforms] = useState(platforms);
  return (
    <MuiThemeProvider theme={theme}>
      <FilteredPlatformsContext.Provider value={{ value: filteredPlatforms, set: setFilteredPlatforms }}>
        <ApolloProvider client={client}>
          <Header />
          <SupportedPlatforms />
          <Contributors />
          <GitCoin />
          <GridLayout />
        </ApolloProvider>
      </FilteredPlatformsContext.Provider>
    </MuiThemeProvider>
  );
}
Example #17
Source File: App.jsx    From web-frontend with MIT License 6 votes vote down vote up 
App = ({
  Component,
  pageProps,
  apolloCache,
  apolloClient = createApolloClient(apolloCache),
}) => (
  <ApolloProvider client={apolloClient}>
    <RecoilRoot>
      <Main>
        <Header />
        <Body />
      </Main>
    </RecoilRoot>
  </ApolloProvider>
)
Example #18
Source File: App.js    From mongodb-graphql-demo with Apache License 2.0 6 votes vote down vote up 
function InstaPostApp() {
	const client = initGraphQLClient();

	return (
		<ApolloProvider client={client}>
			<Router>
				<div>
					<Route exact path="/" component={ListPage} />
					<Route path="/post/:id" component={DetailPage} />
					<Route path="/create" component={CreatePage} />
				</div>
			</Router>
		</ApolloProvider>
	);
}
Example #19
Source File: App.js    From saasgear with MIT License 6 votes vote down vote up 
function App() {
  useDocumentHeader({ title: 'SaaSgear' });
  const { error } = useSelector((state) => state.user);

  useEffect(() => {
    if (error) {
      toast.error(error);
    }
  }, [error]);

  return (
    <ApolloProvider client={client}>
      <BrowserRouter>
        <GlobalStyle />
        <GlobalLoading />
        <ToastContainer />
        <Switch>
          <Route path="/verify-email" component={VerifyEmail} />
          <Route path="/social/:provider/callback" component={Social} />
          <Route
            path="/teams/invitation/:invitationToken"
            component={AcceptInvitation}
          />
          <PublicRoute path="/auth" component={Auth} />
          <PrivateRoute render={(props) => <AdminLayout {...props} />} />
          <Redirect from="*" to="/" />
        </Switch>
      </BrowserRouter>
    </ApolloProvider>
  );
}
Example #20
Source File: index.js    From resumeker-fe with MIT License 6 votes vote down vote up 
ReactDOM.render(
    <ApolloProvider client={client}>
        <Auth0Provider
            domain={process.env.REACT_APP_AUTH0_DOMAIN}
            client_id={process.env.REACT_APP_CLIENT_ID}
            redirect_uri={window.location.origin}
            onRedirectCallback={onRedirectCallback}
        >
            <Provider store={configStore}>
                <ConnectedRouter history={history}>
                    <App />
                </ConnectedRouter>
            </Provider>
        </Auth0Provider>
    </ApolloProvider>,
    document.getElementById("root")
);
Example #21
Source File: UserEventCard.test.js    From AdaptivApps-fe with MIT License 6 votes vote down vote up 
it("renders user event card correctly", () => {
  const event = {
    id: 12345,
    title: "Test Event",
    startDate: "3/25/20",
    endDate: "3/26/20",
    location: "Test Location",
    activities: [
      {
        id: 12345,
        name: "Test Activity",
        startDate: "3/25/20",
        location: "Test Location",
        startTime: "8:00AM",
      },
    ],
  };

  const tree = renderer
    .create(
      <ApolloProvider client={client}>
        <UserEventCard event={event} />
      </ApolloProvider>
    )
    .toJSON();
  expect(tree).toMatchSnapshot();
});
Example #22
Source File: EventCreationForm.test.js    From AdaptivApps-fe with MIT License 6 votes vote down vote up 
it("renders event creation form correctly", () => {
  const tree = renderer
    .create(
      <ApolloProvider client={client}>
        <EventCreationForm />
      </ApolloProvider>
    )
    .toJSON();
  expect(tree).toMatchSnapshot();
});
Example #23
Source File: EventCard.test.js    From AdaptivApps-fe with MIT License 6 votes vote down vote up 
it("renders event card correctly", () => {
  const event = {
    id: 12345,
    title: "Test Event",
    startDate: "3/25/20",
    endDate: "3/26/20",
    location: "Test Location",
    activities: [
      {
        id: 12345,
        name: "Test Activity",
        startDate: "3/25/20",
        location: "Test Location",
        startTime: "8:00AM",
      },
    ],
  };

  const tree = renderer
    .create(
      <ApolloProvider client={client}>
        <EventCard event={event} />
      </ApolloProvider>
    )
    .toJSON();
  expect(tree).toMatchSnapshot();
});
Example #24
Source File: AdminActivityList.test.js    From AdaptivApps-fe with MIT License 6 votes vote down vote up 
it("renders admin activity list (table) correctly", async () => {
  const event = {
    event_id: 123,
    title: "Test Event",
    startDate: "3/25/20",
    endDate: "3/26/20",
    location: "Test Location",
    activities: [
      {
        id: 12345,
        name: "Test Activity",
        startDate: "3/25/20",
        location: "Test Location",
        startTime: "8:00AM",
      },
    ],
  };
  let tree;
  act(() => {
    tree = create(
      <ApolloProvider client={client}>
        <AdminActivityList event={event} />
      </ApolloProvider>
    );
  });
  expect(tree.toJSON()).toMatchSnapshot();
});
Example #25
Source File: ActivityList.test.js    From AdaptivApps-fe with MIT License 6 votes vote down vote up 
it("renders activity list correctly", () => {
  const event = {
    title: "Test Event",
    startDate: "3/25/20",
    endDate: "3/26/20",
    location: "Test Location",
  };
  const activities = [
    {
      id: 12345,
      name: "Test Activity",
      startDate: "3/25/20",
      location: "Test Location",
      startTime: "8:00AM",
    },
  ];
  const tree = renderer
    .create(
      <ApolloProvider client={client}>
        <ActivityList event={event} activities={activities} />
      </ApolloProvider>
    )
    .toJSON();
  expect(tree).toMatchSnapshot();
});
Example #26
Source File: ActivityCard.test.js    From AdaptivApps-fe with MIT License 6 votes vote down vote up 
it("renders activity card correctly", () => {
  const activity = {
    name: "Test Activity",
    startDate: "3/25/20",
    location: "Test Location",
    startTime: "8:00AM",
  };
  const tree = renderer
    .create(
      <ApolloProvider client={client}>
        <ActivityCard activity={activity} />
      </ApolloProvider>
    )
    .toJSON();
  expect(tree).toMatchSnapshot();
});
Example #27
Source File: App.jsx    From locked.fyi with MIT License 6 votes vote down vote up 
Routes = () => {
  const query = useQuery()
  const note = query.get("note")
  const thread = query.get("thread")

  const client = new ApolloClient({
    uri: "https://api.thegraph.com/subgraphs/name/unlock-protocol/unlock",
  })

  return (
    <ApolloProvider client={client}>
      <Switch>
        <Route path="/notes/write">
          <Write note={note} thread={thread} />
        </Route>
        <Route
          path="/notes/:address(0x[a-fA-F0-9]{40})/:thread([0-9]+)/:note([0-9]+)"
          component={NoteMatch}
        />
        <Route
          path="/notes/:address(0x[a-fA-F0-9]{40})/:thread([0-9])?"
          component={ReadMatch}
        />

        <Route path="/live/:address(0x[a-fA-F0-9]{40})" component={LiveMatch} />

        <Route path="/">
          <Home />
        </Route>
      </Switch>
    </ApolloProvider>
  )
}
Example #28
Source File: App.js    From graphql-sample-apps with Apache License 2.0 5 votes vote down vote up 
export default function App() {
  const { loading } = useAuth0();
  
  if (loading) {
    return <div>Loading...</div>;
  }
  const httpLink = createHttpLink({
    uri: "http://localhost:8080/graphql"
  });
  
  const client = new ApolloClient({
    link: httpLink,
    cache: new InMemoryCache(),
    request: operation => {
      operation.setContext({
        fetchOptions: {
          mode: "no-cors"
        }
      });
    },
    defaultOptions: {
      query: {
        fetchPolicy: 'network-only',
        errorPolicy: 'all'
      }
    }
  });

  return (
    <ApolloProvider client={client}>
      <div className="container">
        <Router history={history}>
          <Header />
          <Switch>
            <PrivateRoute exact path="/" component={QuestionList} />
            <PrivateRoute exact path="/create" component={CreateQuestion} />
            <PrivateRoute exact path="/view" component={ViewQuestion} />
          </Switch>
        </Router>
      </div>
    </ApolloProvider>
  );
}
Example #29
Source File: index.js    From GSOD.Contributors_website with Mozilla Public License 2.0 5 votes vote down vote up 
ReactDOM.render(
  <React.StrictMode>
      <ApolloProvider client={client}>
    <App />
      </ApolloProvider>
  </React.StrictMode>,
  document.getElementById('root')
);