GraphQL Basics in 6 minutes - Creating a Weather API with Apollo Server

graphql is a powerful open source query language developed by facebook it solves the problems of building good intuitive and well-designed apis in the last few years graphql has grown an attraction and been adopted by many small and large companies today we'll be building a graphql weather app with node and typescript we will start by defining what graphql is at a high level and then configure a graphql server using the apollo framework we will use techniques commonly seen in large microservice architectures to wrap around an external weather api if you're new around here don't forget to subscribe to my channel and turn on the bell notifications to learn more about full stack development i've added a link to the description where you can find the full source code for everything that we will be covering in this video imagine you are creating a front-end application that needs to communicate with multiple data sources these sources could be a rest api database or other services like firebase typically you would use a rest api or sdk which requires loading the data from multiple urls and having the response turned in a fixed data structure which may contain unnecessary information to solve this we can place a graphql server between the client and backend which uses a schema to clearly define what information is available the client can use this schema to construct a request asking only for the information that is required for our example today a graphql server will be apollo and the data source will be the open weather api in a future video we will create a view app that will consume this api to display information about the weather since graphql requires us to define a schema we can easily view all possible values and even use autocomplete when constructing requests this sounds amazing but there are some disadvantages to using graphql the biggest one is its additional complexity since now you need to define a schema and have additional dependencies if you were building a simple app you could use a framework like express to write fewer lines of code the benefits of graphql really shine when your app scales up as you may need to grab data from different data sources or have different teams needing to use the api with that in mind let's get started looking at our weather graphql api to get started we'll create our graphql apollo server apollo server makes it really easy for creating these apis and it comes with a graphql playground for testing your queries we'll be using the openweather rest api to get information about the weather they offer a free tier allowing up to 60 requests per minute which will be more than enough for this project you'll need to sign up to get an access token for making the requests to their api we'll use the slash weather endpoint which will return the weather based on a city or coordinates that are passed in we'll need to recreate these queries in graphql as well to do this we'll need to install the apollo rest data source package which fetches data from an endpoint and comes with built-in caching and error handling we can create our own data source called weather api which will extend this dress data source class in the constructor we'll set the base url to be the root url of the open weather api endpoint and we'll use the will send request function which is called before each request to add our api key as a parameter now we can add two functions that will make a get request to the weather api endpoint and pass in two parameters the first will return the weather given coordinates and the other will return the weather at a city to follow graphql conventions we will also convert the returned object into camelcase lastly for data sources we'll also create a function that initializes and returns an object with all of our data sources apollo needs this function to initialize them and pass them to each resolver as part of the context you'll understand this more when we create our schema and resolvers the schema is where we define our type definitions for our data and how to actually get our data by resolving it i've gone ahead and created the types that describe the data returned from the rest api there are a few built-in types that come with graphql these are int float string and boolean you will also notice that some types have an exclamation mark beside them this simply means that the value will never be null most types in your schema will describe an object but there are two types that are special query and mutation every graphql service has a query type and many have a mutation type they are special because they define the entry point of every graphql request a query is used when retrieving data while a mutation is used for updating or changing data since sadly we can't change the weather we won't be using the mutation type inside our query type we'll create our two fields for returning the weather based on what information the user passes in both of these will return the weather response we can now use a resolver to resolve the data for these two queries by fetching it from the weather api data source you'll notice our resolver object maps to our type definitions so apollo knows what function to call when a property is requested the resolver functions accept four parameters the parent in our case we don't have one since when this field is called it is at the root level the parameters so anything that is passed in as arguments and the context which is a shared object across all resolvers and can contain information such as authentication or our data sources when we pass our data sources into the apollo server it will automatically add it to the context for us now all we have to do is call our data source and pass in our arguments this will then call the weather api endpoint with the arguments and our api key combining our type definitions and resolvers will give us a schema which describes both what the data looks like and how to resolve it in our main index ts file we can now initialize our apollo server and pass in the data sources and schema we just created going to localhost 3000 graphql we can use the graphql playground to check out the schema we just created thanks for watching i hope you learned how graphql works and why you may want to use it in your next project don't forget to subscribe and i hope to see you in the next one [Music] you

Channel: Coding with Justin

Views: 10,307

Rating: 4.8518519 out of 5

Keywords: apollo server, graphql tutorial, graphql tutorial javascript, graphql tutorial 2020, apollo server tutorial, apollo server graphql, apollo server context, graphql, graphql basics, graphql vs rest, graphql node js, graphql tutorial for beginners, apollo server rest data source, graphql api tutorial, graphql api testing, graphql api vs rest, graphql api call, apollo graphql server, app development for beginners, apollo graphql cache, apollo graphql, graphql api

Id: 8l7TxqWI1XA

Length: 6min 37sec (397 seconds)

Published: Mon Nov 02 2020