Apollo Client For Angular - Making Use of GraphQL

hi guys this is Sebastian again from coding the smart way comm and in this new video tutorial we are going to take a look at Apollo client and we will be using Apollo client together with an angular project so you will learn how to set up an angular project from scratch then installing Apollo client and we will be using Apollo client within that project to request data by using a graph QL and accessing a graph QL server end point and then we will be fetching the data and yeah processing the data in our angular application and outputting that data in the web user interface so stay tuned so before getting started with our project let's first take a quick look at on the Apollo projects website and you can find on the website at Apollo graph QL comm here you can see on the home page of the Apollo project and the Apollo project is not only about the client framework Apollo is although offering a graph QL server you can use together with nodejs but in this tutorial of course we will be focusing on the Apollo client project and if I click on client you can see it takes me to Z Apollo client website and here you can find more information about Apollo client you can see Apollo client is not only available for angular it's a Weibull for all the major yama script based web frameworks and for Android iOS and so on so you can find more information here if you maybe are interested in using a power client together with reactive view you can take a look here at the website in this tutorial we will be using Apollo with angular so that's only one option and in the first step now we are going to initiate a new angular 5 project from scratch so tuition initiate a new angular project I will be using the angular command-line interface and the angular CLI website can be found at sea lion glue dot IO if you have installed angular CLI on your system already that's perfect you are ready to go if not you can just follow the four simple steps here present on the website and especially the first command here the NPM install - G at angular slash CLI zetsu's a command you need to execute first on your system to make angular CLI a Weibull having installed at you have the option to use a new command which is called ng and that is exactly what we are going to do next okay so let's switch to the command line and making use of the angular command line interface by typing in mg and then we are using the option new to simply say that we want to initiate a new project and then we need to specify the name of that project so I'm going to use angular - Apollo as the name and if I now hit return you can see our angular CLI is downloading of the project template and then making sure that all the needed dependencies are installed by using NPM again this is taking just a second to complete here so let's wait for the installation process to finish ok here we are you can see it's saying project angular - Apollo successfully created that is what we wanted to see and the next step is you can change into the newly created project folder and just trying out that everything has been downloaded and installed successfully by once starting the angular CLI development web server which is done by using the command ng surf so here you can see the web server is no running and it's listening on port 4200 so this I see is a URL we need to use in the browser to check if the project is working successfully and if we are getting an output here welcome to app you can see it here that's the default output of the default angular project template and so that are the proof that we now see that the project has been setup successfully and is running and now we can move on to our implementation before doing so of course we first need to install a few things to make use of apollo client and that is the next step now so back on the terminal window here let me first stop on the web server so that we now can add a few dependencies to our project and the way we are adding dependencies here is to use npm install command again so let me type in npm install and then i need to add all the packages we do need to make use of apollo client in our application the first package name is Apollo - angular then we need Paulo - angular - link - HTTP then we need Apollo - client Apollo - cash - in memory like so then we need the graph QL - tech package and finally graph QL itself ok I'm hitting return and now it takes a few seconds to download everything to our node underscore modules folder and you are downloading it saving it in node underscore modules and making it there with a Weibull within our project so here you can see the installation is as done all the packages have been added successfully to the project with all the dependencies added as well and now we can move on and yes top of the implementation part of this tutorial and to do so of course we need a code editor so let me start up my project in the code editor of my choice which is Visual Studio code in that case so I can simply use the corresponding command here code and then dot to open the current folder in Visual Studio code so if you do like you can use of course any other code editor that's not a problem but Visual Studio code is offering very good support for graph QL based projects so that is what I'm going to use here okay so in the next step let's open up app dot module dot es here from the SSC app folder and what we are going to need here is to import a few modules first hmm so let's add a following import statements first of all we do need the HTTP client module a so let me quickly import HTTP client module from the at angular slash common slash HTTP library next we do you need of course the Apollo module and we are importing it from Apollo - angular like so and then we need to import HTTP link module and this is imported from Apollo - angular - link - HTTP okay and finally of course we need to add those three modules to the array which is assigned to you the imports property of the @anjghie module decorator as well so let's add first HTTP client module next pollow module and finally of course HTTP link module okay like so let's save it the HTTP link module uses internally the HTTP client so HTTP client is a part of HTTP client module so that's the reason why we've imported HTTP client module first and see yeah that's the prerequisite to be able to use the HTTP link module services here so the next step is to make Apollo service and the HTTP link service available in our application and if you are already familiar with angular you of course know that this can be done by using dependency injection so this is a way in which we are making those services available and we do that we're using the Pennsy injection right here inside of app module OTS and that's the reason why we first need to add the services to our import statements so the Apollo service is added here to the import a statement where we are importing Apollo Apollo module of course so let's import the service as well and the HTTP link service of course needs to be added here to use the import statement of HTTP link module so now those service classes are available and to inject Apollo and HTTP link into our application here right and the app module class we do need to add a constructor to you the class of the class at the moment you can see it here it's empty there is nothing inside and now I'm ending the constructor here and they now we can inject it so let's say Apollo is of type Apollo and HTTP link is of type HTTP link so two parameters and that's exactly the way how our dependency injection is working in angular you simply need to supply the constructor of the class you would like to inject the objects into with the parameters and yeah angular knows then what is needed basically Apollo service and HTTP link service and is automatically creating instances of post classes and then you are ready to use those services by yeah either Apollo or HTTP link so now we have both instances available we can make use of the parcels and we can make use of the HTTP link service here in our app module class and now we can make use of the Apollo service actually to call the great method to establish a connection to a graph QL server endpoint and that's what we are going to do inside the constructor which is still empty so inside the curly braces here so I'm calling Apollo dot crate and then passing in an object consisting of two properties the first is link property and we need to supply the link property here with a link to the endpoint and the link is created by calling HTTP link service dot create and here we are calling this method and need to pass in an object again this object has a property we need to supply a value for sets URI till the end point and here we need to put in the URL of our server end point this will be done in the next step because first of all we need to make sure that we have actually a server which is not yet the case but in a moment I'm going to tell you how you can create your own graphic ul server which is suitable for our supplying our sample application which was a set of test data but we do need here in side the object which is passed to the poly dog crate method we do need a second property which is called cache because we would like to use caching mechanism here and the cache should be managed by a class which is called in-memory cache so we are create a new instance of that class in-memory cache and in-memory cache of course is not available right now so we need to make sure that this is a label here in app dot module and maybe you are remembering we have installed a package or a downloaded package here for our project which is called Apollo - cash - in memory and that's a package now we do need to import in memory cache here so let's quickly add a bit import statement here import in memory cache from and now the package name which is Apollo - cash - in memory like so and now it is a label you can see it here no error is shown so in memory cache is recognized and it's a Weibull so that we can make use of it so that's a way which should be used to create for our line here in the angular application crate a link to the server end point and the only thing which is missing so far is of course URL to our end point and that will be completed in the next step so to create a graph QL server to be able to define an end point which we can then use to establish link in our angular application there are several ways of cause one way would be you can create your own and set up your own ref to our server by using node.js and Express there is a package which is called Express - graph QL and you can use that library to set up your own graphic ul server with node which is in very easy there is a tutorial available if you like to dive deeper to the topic at my website which is called creating a graph QL server with nodejs and Express you can yeah take a look at that tutorial if you wanted to know how to set up your own nodejs based graph QL server from scratch that would be one way if you following that tutorial you will have a server with an end point of able to supply our application with data of course that's not the only way the other option which is a Weibull to create your graph QL server is to use a polar launch pad that the project which is a Weibull and launch pad graph QL comm and that's simply a cloud service which enables you to create your graph QL server here right in the cloud it's just a playground you can use for your sample projects like we are doing at the moment and that's an easy way because you do not need to install any anything on your system you do not need to create a project folder first and installing the NPM dependencies and so on you can yeah go to that ul and then start a setting up your server immediately let me quickly introduce you to on the launchpad UI you can see it here on the left side you can put in your code you have a script code to create other server and then on the right side there is graphical running which gives you the possibility of executing queries mutations and and so on directly and seeing the result and then you can see if your server is working as expected so launchpad at the great alternative you may use if you are working just in a in a sample project and trying out a few things it's very easy to set up your server instance once setup you have the endpoint available here so that you can copy and past that and point directly to here you are high property in the object which is passed to the HTTP link not great method so that's the end point and if you do not want to deal with the server anyway you can even use my launch better so I have already set up a launchpad which is suitable to supply our angular sample application with the right set of data so let me quickly go through the code here we have defined ya two queries the all causes query and the cost query so this is giving you already a hint we are dealing with a set of courses online courses and yeah that's a custom data type defined here so every course has a few properties here Rd title also description topic URL and we have prepared a few sample data sets here in the causes data array and you can find the resolver here which is mapping the query tabs to you the functions which are returning the data so we are mapping here all courses to get all courses function and cause to get cost function here is the implementation available so everything is set up and for example if I'm going to execute here in the graphical section the all courses query you can see I'm getting back the result comprising all three sample records so if you do not need to to setup the server on your own if you do not want to deal with the launchpad code here anyway you can simply use my graph QL and point here created with the Apollo launch pad I will put that link in the tutorial description so that we are ready to go by copying that link going to our code and passing in that link here write as a value two zui property so now that we have fed up the Apollo client connection in our angular application to the server end point we are ready to move on to the next step and in the next step we are going to expand the angular application and include the code which is needed to retrieve data from our end point and of course displaying that data to the user and the browser yeah and therefore we are going to add a new component to the project by using angular CLI again and as you can see here I've already opened up the integrator terminal here in my code editor and I now can use the ng command to create a new component so I'm saying mg g4 generate C for component and then specifying at the name of my component which is simply called a list because we want to retrieve the list of courses data and then printing out that list okay so hitting return you can see it's creating four new files here in the folder SSE app a new subfolder is created list containing those four new files and it's updating app dot module dot TS so and if you're now taking a look here in app dot module dot yes you will notice that list component which is our new compose is automatically imported here from from the new file and add it to you the array which is assigned to the declarations property so that we are fully set up we are ready to use the list component in our application of course now we need to bring in the code into list component bring in the code on the one side and the template code of course on the other side to complete the implementation and that's what we're going to do now so there's one more file to add because we do need a file which contains the type definitions we are going to work with so you know we have defined a custom cost type server-side and now we need to have a corresponding cost are defined on client side and to do that I'm adding a new file here let's say touch and I'm going to add that file in is our C / app / and the file name is types dot TS okay like so here you can see this is the new file I'm opening up and I'm going to put in the code to define the type first of all we are defining cause and because we want to use that custom type later on in our components I need to export it so we can import it in the component the export type and I'm naming it costs and it equals the following definition we have an ID of type number then we do need a title property which is of type string of course I'm adding author property as well again type string the description property which is also of type string than the topic and finally the you al play we need a semicolon here and then I do need a second type which is defining my query so again export type theory and we would like to use the all courses query so we are expecting on the query type to have a property all courses and this is of type array of course so this way okay that's our type definition and now we can use both types so type query and type course in our list module now let's continue in file listed component of TS that's the file where the class implementation of class list component can be found in the first thing now which needs to be added our a few import statements of course so we do need to import the Apollo service so we are importing Apollo from from the angular from the Apollo - angular package next thing is we do need to import observable from our XJS /op servable and then we need to import map map is imported from again the our exchange library slash operators then we need to import gql from graph QL - tag like so and finally we do not need to forget to import our types cause and query and we are importing both types from the types dot TS file which is available in our project so we have imported the Apollo service now we need to use dependency injection once again here in the constructor of the list component class to create an instance of our supplier class was an instance of the Apollo service so let's use the private key word here private Apollo over type Apollo like so and then you can see the entry on init method as already a Weibull here that an angular lifecycle methods which is called every time this component against initialized in our application and that's the perfect place where we can put in our code which is needed to send the RFQ our query to the service so that we are retrieving the data and then half of a set of data available here once the initialization of that component is finished so that's what we're going to do now first of all it's at a class member which is used to store the data into as retrieved from the server let's name it causes it's of type of cervical and observable it's also typed here and it's returning an array of courses so like so and now back in ng on in it we are executing or requesting the data by using the following call so we are signing the result to the start causes and then making the call here is this dot Apollo that's the instance of the Apollo client or is a polished surface and then we are using the watch query method here and we are saying it's returning a result of type query and then we need to pass one parameter to the call of watch query and that's an object and the object is containing the property query and query gets assigned the graph QR code which is containing our three reoperation and to embed graph QR code here directly in our JavaScript code we can now make use of the ref ql tech of the which we have imported as gql and then as a syntax eeriest you included at the multi-line string is to use backticks so that's the option which yamas web gives us to include multi-line strings and that's perfect you included the graph QL code here and let's define a query operations so query that's the keyword at the graph KO keyword which is used here and we're naming that query operation all courses and using curly braces here and in our all courses current operation one pro is embedded and that's all courses which is a query which has been defined when setting up our server and we are defining what fields should be returned for for courses and that's ID we want to have the title the also Z description the topic and the URL so basically we are requesting all fields which are available for a cost okay like so that's our graph GL code which is embedded here and then we can connect here with the value changes property and then connect with the pipe a transformation and for applying the current transformation we are calling the med function here and we are saying okay please apply the following function for transformation result then we using the l function here is becoming result data dot all courses so this is making sure that we are getting back a structure which is all only containing an array of courses because it's embedded in the result we are getting back in the data property and by applying the transformation we are extracting it out and only and only leaving back B array okay let's put finally a semicolon here so that's the code which is needed here inside of our list component class implementation so to make sure that the user interface of our angular web application is looking nice we are going to use the bootstrap for framework and we are applying some of the bootstrap for CSS classes was in our template which we do need to add to our application but before doing so this requires us to install and add bootstrap also dependency to our project first and that's exactly what I need to do next so let's stop the web server which is still running here for a moment and the way you can add the bootstrap for frame up to the project is by using NPM once again so I'm saying npm install woods wrap return so this is downloading the package and installing it to again the node underscore modules folder within our project you can see it here so that it is a Weibull and part of that package are the files and we need to include in our project to make bootstrap CSS classes a waiver so we can have a look inside so let's open up the node modules folder and you can see here are all our dependencies and bootstrap is a Weibull and inside the bootstrap directory you will find the dist folder which includes two sub folders CSS and j/s and we would like to add the bootstrap CSS file to our project and you can see it here the minified version as bootstrap dot min dot CSS so that's exactly the file we need to include in our project and the place where we need to include that file yes let's close in note underscore modules folder is in dot angular - CLI dot Jason and if you take a look inside that file you will find here right in the apps section you will find a property a configuration property which is called Styles and as you can see Stars gets assigned array here and by default the project file Styles dot or CSS is already included and now we can use that location here and add and add our bootstrap file which is a Weibull in node underscore modules slash bootstrap slash dist slash CSS F seen before and then finally is a file name which is put shrap dot min dot CSS okay so that's basically all so now we can make use of bootstrap CSS classes within our template and template which is still missing is the list component template and the file where the template code goes into is list component HTML so you can see it here is a default template just printing out a list of works so we are going to remove that code here and then start adding the template code which is outputting our list of online courses we received from the graph QL endpoint so just remember we have stored a CR array which is containing the data which will receive from the server in the class member which is called courses so now we can iterate over that array and print it out and the template code which is needed for that is what start here was let's say a development and then we are using the mg4 directive and since the syntax which is used here is let course so course is always containing the current record we are iterating over of courses so causes else the class member which is containing the result forms the API call and then we need this is very important because causes isn't observable so it's receiving data in an asynchronous way we need to apply the assent pipe here so I think this way so that angular and the energy for directive is working even for that data source which is receiving data in an asynchronous you Cronus way okay so within that if element let's use another div element which gets assigned bootstrap CSS class card okay like so and then maybe let's say we would like to apply some styling here which we are doing in line we are selling the waste to 100% and we are assigning a margin - top of 10 pixels okay like so then we have the card body and within that body we are using h5 headline okay we need to assign a class here as well the class we are going to use here is called card - title and then we are printing out here in title of our card by using angular syntax here with two curly braces we are in bread embedding on expression here and we are printing out the value which is available in cost dot title okay this is the way anyway is working now let's use the nice six here next and apply the cut - subtitle class maybe let's add a margin a bottom of two and text - muted as well and we are printing out here is the information of the author also so we are saying bye and then using the expression syntax once again to print out the value of course dot author like so next let's use a paragraph so P element and we are assigning the class of card - text here and we are printing out the value which is a Weibull and course dot description ok and finally is a link to the course website so let's use a trefor Elm element here and we are setting of the destination again to the value which is available and class dot URL and we're applying a clasp here as well the class we do need is card - link and then we are saying go to cross okay so that's basically our template with the information the user should see included and the template is printing out this part for every single course available in the courses array so now all the list component template is in place and you can see here in the integrated terminal the webserver is again running but of course if I know check the result and the browser here oh it's refresh it you can see nothing has changed and the reason for that is quite clear the list component implementation is in place the list component template is in place but we have not included list component in our main application template yet so this is what we are going to do now so that we see the result from list component and the main application template is a template of app component and the template of app component the implementation the default implementation can be found an app dot component of HTML so this is exactly the HTML template code which is used to to output the default view we just saw in the browser but this is obviously not what we want to have in our application so I'm going to delete it all so let's start over again let's start with a div element here in the sand bootstrap container class within that container we first add the output of our list component and the way to include a list component here is if again take a look it listed component or TS here you can see the selector was by default set to the value app - list and the selector is describing the name of the HTML element which needs to be used to include the output of that component in any other template so I can now go back to you app dot component HTML and just include list component by saying app - list okay like so now that's a place in our output where we are displaying the result which is rendered by the template of list component okay but this is not all in addition I'd like to include a simple navigation bar on the top just to make a little layout look a little bit nicer let's do that by using it enough element and assigning the classes enough bar enough bar - doc and bheegi bheegi - primary ok no that's not the way I want to have so enough power enough power - doc BG - primary like so ok that's our nav element and within that enough element we are going to print out just a headline text by using anchor element here assigning the class of nav bar - brand if you like you can put a link inside of here and then including the text Apollo client for angular sample application okay like so okay so now everything is in place and it's time for checking the final result and the browser and see if everything is working as expected so let's open up the browser once again and you can see it that's the output and everything is as expected we have enough element here and then we have three times the cut area included in our output with the information received from the graph QL server yeah you can see it here so everything is working as expected and now you have a running angular application with a graph QL back-end and the angular application is consuming data from the back end by using Apollo client okay so this was Sebastian from coding the smart way calm thanks very much for watching I hope you do like my videos if so please don't forget to subscribe to my channel on YouTube and also don't forget to visit my website at coding the smart way comm hope to see you in the next video bye you

Channel: CodingTheSmartWay.com

Views: 34,902

Keywords: Apollo, Apollo Client, Angular, Angular 5, Angular 6, Angular GraphQL, Angular Apollo, graphql-tag, Apollo Launchpad, Apollo Client in Angular, Apollo Client Tutorial, Learning Apollo, Learning Apollo Client, How To Use Graphql in Angular, GraphQL Tutorial, Learn GraphQl, CodingTheSmartWay.com, CodingTheSmartWay, JavaScript, TypeScript

Id: dp_64aX_6jI

Length: 49min 33sec (2973 seconds)

Published: Sun Jan 28 2018