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

Share this video with your friends

Send Tweet

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

Hafeez Syed
Hafeez Syed
~ 6 years ago

where are we getting these 2 objects in recipes array ?

MB Karolio reikalai
MB Karolio reikalai
~ 6 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
~ 6 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
~ 6 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 Graf(instructor)
~ 6 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 Graf(instructor)
~ 6 years ago

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

MB Karolio reikalai
MB Karolio reikalai
~ 6 years ago

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

puffin
puffin
~ 6 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 Graf(instructor)
~ 6 years ago

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

Kostiantyn Hryshyn
Kostiantyn Hryshyn
~ 6 years ago

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

Nik Graf
Nik Graf(instructor)
~ 6 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
~ 6 years ago

Why every lesson has its own package.json ?

Nik Graf
Nik Graf(instructor)
~ 6 years ago

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

Brendan Whiting
Brendan Whiting
~ 6 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
~ 6 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
~ 6 years ago

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

Nik Graf
Nik Graf(instructor)
~ 6 years ago

Thanks for helping @Nicolai 👏

Niv B
Niv B
~ 5 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 } }