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.

~/packages/web

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

Update App.tsx to use ApolloProvider:

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"

Make sure the server is running.

Update LinksPages to query Health:

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.

apollo-hooks branch available on GitHub.