Setup and Connect an Apollo Client to a React Application with Apollo Provider

Nik Graf
InstructorNik Graf

Share this video with your friends

Send Tweet
Published 4 years ago
Updated 3 years ago

We will learn how to set up the Apollo Client using Apollo Boost, connect it to a GraphQL endpoint and use the Apollo Provider to connect it to our React Application. In addition we demonstrate how to use an Apollo Consumer

Instructor: [00:00] Here, you can see a React app initially created using createReactApp. I simplified the content and replaced the styles. In order to get started with Apollo client, we run npm install to add the following NPM packages, GraphQL, Apollo Boost, and React Apollo.

[00:18] The GraphQL package is needed for certain features, like parsing GraphQL queries. Apollo Boost is a package coming with a well-configured Apollo, in order to get started quickly. Last, but not least, React Apollo.

[00:32] It integrates Apollo with React by providing multiple components and utils. Then we import the Apollo client from Apollo Boost, and instantiate a new client. The only mandatory option we need to provide is the URI for our GraphQL endpoint.

[00:52] In this case, we are using localhost on port 4,000, since there, I already have a GraphQL server running. Let's verify that our client works as expected by requesting data from our GraphQL endpoint using a query.

[01:08] It expects an object containing at least a query property, and write one using a template tab notation. What to fetch now? Our back end is a cookbook containing recipes. To get started, we can create all recipes.

[01:23] For each of them, we request the ID and the title. We import the GraphQL type library. Once the query's resolved, we print out the results. As you can see, once we loaded the page, the query was executed, and our result logged in the console.

[01:46] So far, so good. Since we have React Apollo available, let's look into how we can set it up. We import the Apollo provider from React Apollo, and use it inside our render function. The provider requires an instantiated Apollo client.

[02:04] In our case, we take the one we already initialized. Once set up, the Apollo provider now passes the client down the rendering tree via React's context feature. Using an Apollo consumer, we can leverage this setup to use the client for our queries deeper down in our React rendering tree. In this case, we take our existing query and run it inside the Apollo consumer render prop.

[02:36] To comply to React's API expectations, we return null. As you can see, we still get back some results. While Apollo consumer can be useful in some cases, most of the time, you will be using the query, mutation component, or higher order components, all shipping with React Apollo.

Hafeez Syed
Hafeez Syed
~ 3 years ago

where are we getting these 2 objects in recipes array ?

MB Karolio reikalai
MB Karolio reikalai
~ 3 years ago

Same question, where are you setting up the server? In the course it just says you already have a server running at http://localhost:4000 but no mention of how you set it up.

MB Karolio reikalai
MB Karolio reikalai
~ 3 years ago

Same question, where are you setting up the server? In the course it just says you already have a server running at http://localhost:4000 but no mention of how you set it up.

Just found there is server code on GitHub. Not sure if I missed it or it's indeed not mentioned anywhere. If it isn't, I would suggest to at least mention that server code is on the course repo.

MB Karolio reikalai
MB Karolio reikalai
~ 3 years ago

Just found there is server code on GitHub. Not sure if I missed it or it's indeed not mentioned anywhere. If it isn't, I would suggest to at least mention that server code is on the course repo.

Just tried setting up the server and it's missing files. At the very least, "/tmp/recipes.json" files is missing and thus GraphQL returns empty data. I am honestly very appaled by this course.

Nik Graf
Nik Grafinstructor
~ 3 years ago

@Karolis I just added a readme file with instructions. I hope this helps.

In order to run the client you need to seed the DB and run the server.

cd server
npm run seed
npm run start:slow

You can find the server located here: https://github.com/nikgraf/graphql-apollo-client-course/tree/master/server

The db is two JSON files stored in /tmp/recipes.json and /tmp/ingedients.json.

Nik Graf
Nik Grafinstructor
~ 3 years ago

@Hafeez does this also answer your question? Please let me know if you need further help.

MB Karolio reikalai
MB Karolio reikalai
~ 3 years ago

Hi @Nik, thank you so much for the prompt response. Will continue watching the course! :)

puffin
puffin
~ 3 years ago

@Nik In server folder, db.js doesn't contain ingredientDb variable which should've been imported to seed.js. Could you please check? Thanks a lot! :)

Nik Graf
Nik Grafinstructor
~ 3 years ago

@puffin just pushed a fix, sorry I messed up when cleaning up the server example

Kostiantyn Hryshyn
Kostiantyn Hryshyn
~ 3 years ago

Why not to use import { graphql } from 'react-apollo'; HOC in any place you need instead of ApolloConsumer?

Nik Graf
Nik Grafinstructor
~ 3 years ago

@Kostiantyn while the HOC certainly would work in this course I solely wanted to focus on RenderProps. My concern was that demonstrating both concepts might be too much for beginners.

Christian
Christian
~ 3 years ago

Why every lesson has its own package.json ?

Nik Graf
Nik Grafinstructor
~ 3 years ago

@Christian each lesson is a copy of the previous one with the changes applied during the lesson

Brendan Whiting
Brendan Whiting
~ 3 years ago

I don't understand this JavaScript syntax:

gql`
      {
        recipes {
          id 
          title
        }
      }
    `

I've seen this before with styled-components as well. How can we just pass this template string to this function without parens?

Nicolai
Nicolai
~ 3 years ago

@Brendan this is called a "tagged template literal".

see e.g. MDN or Exploring ES6 (specifically section 8.2.4)

Brendan Whiting
Brendan Whiting
~ 3 years ago

@Nicolai thanks! That's exactly what I needed.

Nik Graf
Nik Grafinstructor
~ 3 years ago

Thanks for helping @Nicolai 👏

Niv B
Niv B
~ 2 years ago

Great course, thanks Nik, For following alone, i notice (around 1yr after the course) that you will need to name the query to avoid error,

for example : query: gql query GetRecipes // <= here add some name { recipes { id title } }