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

InstructorNik Graf

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
~ 2 years ago

where are we getting these 2 objects in recipes array ?

MB Karolio reikalai
~ 2 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
~ 2 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
~ 2 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 Grafinstructor
~ 2 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 Grafinstructor
~ 2 years ago

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

MB Karolio reikalai
~ 2 years ago

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

puffin
~ 2 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 Grafinstructor
~ 2 years ago

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

Kostiantyn Hryshyn
~ 2 years ago

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

Nik Grafinstructor
~ 2 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
~ 2 years ago

Why every lesson has its own package.json ?

Nik Grafinstructor
~ 2 years ago

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

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

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

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

Brendan Whiting
~ 2 years ago

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

Nik Grafinstructor
~ 2 years ago

Thanks for helping @Nicolai 👏

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