Strapi Crash Course (with React & GraphQL) #9 - Apollo Client Setup

all right gang so graphql is now set up on the strap here back end right and now we can handle incoming graphql queries but we also need to set up our react application to be able to make those queries and to do that we need to install two packages first of all the apollo client package which helps us to manage and make queries in our react components and also the graphql package itself which is needed to pass graphql queries so to do this open up a terminal and type the following npm install and then we want to grab at apollo forward slash clients so that's the first package then a space the second one is graphql so hit enter and then this is going to install those two packages for us okay then so now they're installed the first thing we need to do is configure the apollo client to connect to the strappy graphql server so at the top of the root app component right here import a couple of things from the apollo client library we need three things in total so first of all we have the apollo client which is used to create a new connection to the graphql server the in memory cache is used by the apollo client to cache responses from the server for us and the apollo provider is used to wrap our entire react application and it provides it with the ability to use the apollo client connection that we set up to make queries so let's use the apollo client first of all to make a new connection so we'll create a new constant and give this a name i'm going to call it clients and then we set it equal to new and then it's the apollo client which we import and we invoke it so this generates a new clients it makes a new instance of the apollo client and stores it in this constant now we also need to pass in some configuration into this so create an object as an argument inside the parentheses and the first property on this object is going to be a uri property now this is basically the entry point to the graphql server that strap it is using and that address is http call on forward slash forward slash local host and it's port one three three seven forward slash graphql okay so that's the uri property the next property is cache and this tells apollo what to use to cache our query responses in our case this will be the in memory cache which we already imported so let's grab that and paste it in cool so now we have this initial client connection to the graphql server next we need to provide this to our application now we do that by using the apollo provider component that we imported up here so this is going to go inside the router but it's going to surround everything else so it's going to surround the div with the class of app so let's just do that now in older versions placing the provider inside the router like this can cause problems but the more modern versions don't cause this issue if you do have problems you can try surrounding the router component with the provider instead anyway this now takes a prop called client and then this prop as a value takes in the client that we made so whatever you called your constant up here pass that into the apollo provider and now we're basically providing that client connection to the graphql server to our entire react application inside this component so now in the future we can make graphql queries to our strappy backend from any of these components inside the app and we'll see how to do that in the next lesson