Simple GraphQL Query in Flutter | Step by Step Tutorial

hello everyone welcome back to flatter University in today's quick video I will be looking at how you can perform a simple graphql query in a flatter application so graphql is a query language developed by Facebook back then in 2012 quite quite a while ago or what yeah to meta right now so yeah it was it was created by meta initially Facebook and it was created for the sole purpose of ensuring that uh can allow like the client to request like the specific data they want so if you want to receive a specific data you don't have to get all the other relevance data that you don't really need so let's get started so we go back to our code I have a simple chat application this is a starter application I think modification interacted with this mobile application it's the counter app so I'll go through some of the dependencies I've installed first I've installed a quick few dependencies uh you can look at your dependencies freeze annotation Json annotation report flatter Lanes build Runner freeze and Json serializable as developerative dependencies I'll also include deer because we will need to use the perform the HTTP requests so in this case we won't really have to resolve any other fancy dependency which will help us we don't really need it so yeah let's get started I'll first clear everything I see in the main event folder in the main.net file they will create a simple flat application so starts with the main function which runs depth let's call it the Rick and Morty app so uh to integrate graphql we need a graphql schema or a graphql playground a graphql playground is basically kind of like a documentation which you can play around with so in this case uh using the Rick and Morty graphql schema which will just go to in a second so let me create the album called electric and motif let's create some uh the Recon motif because you can material love let's create a let's create a stateless consumer widget so I'll be using the report for myself I'll have to create a status consumer widget so in this case I'll call it the home page and make sure you import then how much okay follow the link to this so let's go to our browser remote uk.com where you'll be able to receive all this data so we'll be listing all this data that we need go to return multi.com slash graphql so it is we have the American Multi API playground I already had a query setup so these are query that fetches me the the characters so if a person play it will list with the character so the beauty with graphql is that if for example I remove status from here it will only give me the data that I need you'll see that in the results you don't return the status so what we need is I'll read the ID of course we'll need the name the image do you have a description so now look at the description you can just add the status and Define the status is fetching the status so this is the URL we'll be using so let's go back to our code and implement this so vocal code let's create a provider it provider called Fetch characters formula which extends the statement file if you don't know what a certain file is you can go back to my previous video guessing this channel so let's create this that so I have a few extension that I use personally my development so we'll have the specific uh extension called freezed so this um an extension present by black so and now it helps me quickly generate field classes so that's what I'll be using just go to my folder here and click on create new freeze class I'll give it a name let's say fish add Json to Json methods now so here I will create a few steps for for the for our for the fetching let's create the initial stage let's go the loading the fetching set in the first step and finally the failed state so the field set will basically handle the case where their pay is not working as expected this will turn on air of course so for now we are seeing errors right here but we'll fix that by running the following command build run and build so this way the build run a package that we installed earlier comes in comes in handy so as it's generating the code for for this you'll see that the errors are disappeared in average characters provider we can give it a type which is such characteristic let's create models for the characters foreign class this time it's called character model and this time we'll pick the yes option when we asked whether to add the Json from j7 methods this will allow us to sit on education so let's go back to our browser we have the ID name image and Status which are all strings so we'll just Define them like that let's make them 11. yes it will run the same command the same build on a command that you give earlier so it also generated the code for serializing that the yes one and uh and everything and in our first character state in our first state we'll have to have a list of characters just import this run the build Runner command again but it's it creates the new models the new classes with with this then uh we'll have to Define our Constructor Constructor call to Super create a method called Fetch that doesn't cross method uh before before we have to notify every every listener that we are trying to fetch better so that it can can wait so uh let's set the study to new fetch instead and let's do a try catch since we'll be using DF for State Management you can also catch them the video arrested you don't have gear installed let's see let's install deal okay I had a problem right there yes so here on the era so it's telling us that the error is depreciated let's look at the documentation and see exception and the exception I think it's been changed to the exception let's let's access that tutorial the error message and then the default cuts to be let's give it a generic error so let's create a local variable and assign it to the value of the awaited response that you'll be getting so Financial graphql basically graphql methods or requests are being are normally called as normal cost request so in this case we will call the alert first the URL will go back to our graphql playground for The convert API let's copy that URL you need to put some data so for the data just create a map a map let's create a key called query and let's stringify that response let's just go back to our playground and copy everything you have here this is what we'll be using to fetch just pass it right there let's let's delete a little bit and that's the data so looking at how the record looks like we have the results we need to list these results so this is what we need let's go back to our code but make sure you look at how how this response looks like so it's data the key value is data characters and result so let's create a new variable list no we're not supposed to test it there yes let's just call it response data equals response dot data since the response is a map let's get this data characters and results the characters result if you haven't understood what really happened here uh we're basically calling this results the value of this result by using the key value you can look at you can read about maps in that and then State equals to fix it and failed fixed it but the characters will have to generate so our response data map character Foundation e then cast that to list and just like that guys with money to do a simple graphql query with a with a quick deal and you've noticed that you haven't had called like https or convertk.com slash API slash characters so that you can fit the characters you will have to pass this URL and give the query like the specific thing you need and it will come to us what we really need defined in this specification right here so for the fun part let's go or for the boring Parts depending on on what you like go to our home page and start defining stuff so we can we Define a global variable for a provider now we need to define a global variable a global step required provider for our provider final uh set an entire provider we should dance which characters provider who is it as I said is in the Constructor also within the Constructor let's make sure that uh we call the phage so that it will face the characters immediately we start the app immediately maybe the provider is called so let's give it some types right here like that so so far so good let me know if you have any questions write your questions in the comments also if you like the video please share with your friends are a thing or two yeah so in our in our build method for our home page we'll have to return let me see learn fast return a container this one the app and do the changes as we see so yeah if you like the video please share it to your friends let me know if if you want to learn anything else in flatter you can just drop it out in the comments or you can reach reach out to my personal Twitter or any social media handle I'll link them below or you can just find them around anywhere and uh yeah I'll be able to respond to you in whichever best way I can yeah also let me know how you feel about this new camera feeling with with the video let me know if you like it or not yeah so the app has run successfully so in our container let's first return scaffolds whose Apple let's call let's say that and then for the body for the body I will use this very Now using the provider secreted earlier so let's yes use ref good watch if you're using flutter block you can use a context.watch or contacts that read depending on whichever you need so uh ref.watch in Riverport allows us to have basically value changes so it's basically constantly listening to that and if anything changes it will rebuild the widget and display the correct state so we'll have to call the global fire located the default State let's just return a container contain I mean then in our first state foreign who's still there are characters list then return Lister title essay calculate name of course you have to wrap it in a text figure so the leading let's use image like that let's give it a size height of 100 and the Box fit of color mix with color and the subtitle status and just like that my friends we ran into an era so no Providence co-found so in Liverpool you have to wrap everything at the provide a scope so that it can be able to access all these providers so let's have a um inside the provider scope so it's basically an equivalent to wrapping your app in the blog providers and multi-blog providers if you're using block or provider multi provider that kind of stuff let's set the application so it's listing the characters successfully as you can see they are looking very nice but we haven't seen the loading set it hasn't notified us that it's facing so uh to fix that let's go back to our code and Define the facing state find the fix it fetching okay let's return a center whose child who is a circular progress indicator and put the const here yeah unless you start the application and now you can see that you're able to fetch our characters and it will it will it will give us the the list of it will show us that it's loading and that kind of stuff so thank you guys for watching the video I share it with your friends subscribe to the channel I'll see you in the next one bye

Channel: Flutter University

Views: 5,735

Keywords:

Id: 073D40pWipE

Length: 24min 58sec (1498 seconds)

Published: Fri Jul 28 2023