In this module, we've introduced Apollo Client in our application and utilized the useQuery and useMutation Hooks available to us from the React Apollo library.

src/index.ts#

In the src/index.ts file, we create a new Apollo client with the ApolloClient constructor given to us from the apollo-boost package. apollo-boost the approach to setting up an Apollo client with a predefined configuration and setup.

The only option we specify in the ApolloClient constructor is the uri option where we define the URL endpoint of our GraphQL API. We import the <ApolloProvider> component wrapper from React Apollo and wrap our <Listings> component with <ApolloProvider>. This helps us pass the Apollo client as the client prop of ApolloProvider which provides the Apollo client in our <Listings> component as part of context.

import React from "react";

import { render } from "react-dom";

import ApolloClient from "apollo-boost";

import { ApolloProvider } from "@apollo/react-hooks";

import { Listings } from "./sections";

import * as serviceWorker from "./serviceWorker";

const client = new ApolloClient({

  uri: "/api"

});

render(

  <ApolloProvider client={client}>

    <Listings title="TinyHouse Listings" />

  </ApolloProvider>,

  document.getElementById("root")

);

// If you want your app to work offline and load faster, you can change

// unregister() to register() below. Note this comes with some pitfalls.

// Learn more about service workers: https://bit.ly/CRA-PWA

serviceWorker.unregister();

<Listings>#