Module 8 Summary
This lesson is a summary of the work done in Module 8.0.
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>
#
This page is a preview of TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL