> For the complete documentation index, see [llms.txt](https://tutorial.specian.co.uk/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tutorial.specian.co.uk/frontend/apollo-hooks.md).

# Apollo Hooks

It is now time to get some real data from the server. Remember `Health`? Let's display the result on a page using [Apollo Hooks](https://www.apollographql.com/docs/tutorial/queries/#the-usequery-hook).

{% code title="\~/packages/web" %}

```
$ yarn add apollo-boost react-apollo apollo-client graphql apollo-utilities apollo-cache apollo-link
```

{% endcode %}

Update `App.tsx` to use `ApolloProvider`:

```typescript
import React from "react";
import ApolloClient from "apollo-boost";
import { ApolloProvider } from "react-apollo";
import "./App.css";
import { LinksPage } from "./pages/links";

const client = new ApolloClient({ uri: "/graphql" });

const App: React.FC = () => {
  return (
    <ApolloProvider client={client}>
      <div className="App">
        <LinksPage />
      </div>
    </ApolloProvider>
  );
};

export default App;
```

To tell the development server to proxy any unknown requests to your API server in development, add a `proxy` field to your `package.json:`

```
"proxy": "http://localhost:8080"
```

{% hint style="info" %}
Make sure the server is running.&#x20;
{% endhint %}

Update `LinksPages` to query `Health`:

```typescript
import * as React from "react";
import { LinkList } from "./LinkList";
import { Header } from "../../components/Header";
import { useQuery } from "react-apollo";
import { gql } from "apollo-boost";

const getData = () => [{ id: "1", uri: "http://mock", userId: "userid" }];

export const LinksPage = () => {
  const { data, loading, error } = useQuery(gql`
    {
      health {
        ok
      }
    }
  `);
  if (loading) {
    return <div>Loading...</div>;
  }
  if (error) {
    return <div>Oops... Something wrong happened. Try again later.</div>;
  }
  return (
    <div>
      <Header />
      <div>Health {data.health.ok}</div>
      <LinkList links={getData()} />
    </div>
  );
};

export default LinksPage;
```

We can send request to our GrapqhQL API. Now we need to add user authentication.

{% hint style="info" %}
[`apollo-hooks`](https://github.com/florianherrengt/book-code/tree/apollo-hooks) branch available on GitHub.
{% endhint %}