Setup and Connect an Apollo Client to a React Application with Apollo Provider
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.
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.
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.
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.
@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.
@Hafeez does this also answer your question? Please let me know if you need further help.
Hi @Nik, thank you so much for the prompt response. Will continue watching the course! :)
@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! :)
@puffin just pushed a fix, sorry I messed up when cleaning up the server example
Why not to use import { graphql } from 'react-apollo'; HOC in any place you need instead of ApolloConsumer?
@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.
Why every lesson has its own package.json ?
@Christian each lesson is a copy of the previous one with the changes applied during the lesson
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?
@Brendan this is called a "tagged template literal".
see e.g. MDN or Exploring ES6 (specifically section 8.2.4)
@Nicolai thanks! That's exactly what I needed.
Thanks for helping @Nicolai 👏
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 } }
where are we getting these 2 objects in recipes array ?