.Net Foundation On .NET, 14 Apr 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Consuming GraphQL in C#

Description

In this episode, Brandon show us how to consume a GraphQL endpoint from a C# client, specifically an iOS + Android written in C# using Xamarin.

Learn more: https://codetraveler.io/DotNetGraphQL

[T02:17] - Querying a GraphQL endpoint
[T06:59] - Viewing the results in a Xamarin app
[T09:58] - Alternative programming models
[T11:00] - Follow up resources

GraphQL for .NET
https://github.com/graphql-dotnet/graphql-dotnet

Hot Chocolate: A GraphQL Server for .NET
https://hotchocolate.io/

ASP.NET Core docs
https://docs.microsoft.com/aspnet/core/?view=aspnetcore-3.1&WT.mc_id=dotnet-c9-cephilli
Get your questions answered on the Microsoft Q&A for .NET - http://aka.ms/dotnet-qa
Learn .NET with free self-guided learning from Microsoft Learn: http://aka.ms/learndotnet

#AspNet #Dotnet #GraphQL #WebDev

A

The magic of graph QL combined with dogs you've got to see this one, how to build a graph, QL client only on on net.

A

Welcome to another episode of on.net, my name is jeremy licinus and today we're wrapping up a series on graph. Ql we've talked about what it is. We even looked at how to stand up a graph QL in point, so today, I'm here with Brandon, Minich and he's gonna, show us how to consume graph QL in a client application. That's.

B

Right thanks for having me Jeremy and yeah, specifically we'll be working with a Samra in mobile app today, so I'm a mobile app developer. One of the reasons I love graph QL is hand-made for mobile apps and so we'll show off some of the benefits of how we can use it in a mobile app and we'll write that code together today. Well.

A

So one of the things that excites me is I'm, not a mobile developer, but I am a c-sharp, dotnet, developer and I. Understand. You're gonna show us how to do this using c-sharp for your mobile app.

B

That's right so we'll be using a technology called xamarin and xamarin. If you haven't heard of it, it's a way to create native ios and android apps, all in c-sharp, and so the way that works is xamarin, just wraps every single iOS API and every single Android API and exposes them to us and c-sharp. So when we are creating our app using c-sharp, we're still hitting the same native api's when the compiler compiles it down, it still compiles it down to the native code.

B

Okay, so we still get the native performance, it's a totally native app, but we can use the language read, load, know and love in c-sharp, nice and one of the cool things is because it is every single API we're not just talking about iOS apps and Android apps, we're talking about iPhone talking about iPad, we're talking about Android, wear Apple, TV, Apple watch, Android TV, and that's because everything you can do an objective-c Swift, Java Kotlin can be done in c-sharp, using xamarin and.

A

I, don't have to learn for other languages exactly.

B

Nice so enough talking about it, let's, let's jump into some code, so I have a xamarin mobile app here, let's go ahead and run it. It won't be very flashy because we haven't written the code to consume the graph QL endpoint yet, but here it is. This will connect to my graph QL API, that we wrote in the previous episode and it will display a list of all my favorite dogs, okay. So let's go ahead and jump into the code here, because we have some work to do so.

B

The first thing I want to point out. We are using a graph QL SDK. So specifically, if we look at my new get packages using the graph QL client- and this is nice- because it has a lot of wrappers around HTTP client, so it removes a lot of that boilerplate code that we would normally have to do, and so what do I mean by that? Well, let's write some quick and dirty code. So, yes, you know is good c-sharp, dotnet developers. We should do things like reuse, HTTP, client in this example.

B

We're writing quick and dirty code, so we're gonna. Do some bad things like doing it up every time and disposing it, but do check out the finished example where it does follow all the best practices? Okay,.

A

B

So, let's get started well speaking of HTTP client. Well, new up our client, but this time it's a graph QL client. So if we can type it right graph, QL client, there we go and this takes in as a parameter a graph QL HTTP client option. So it's a mouthful.

B

But basically what it wants to know is what is your API endpoint so we'll pass that in I've already jotted that down so in my back-end Constance will pass in the graph QL API and, of course, it's yelling atomy, because that needs to be a URI there. We go cool so now now we have our client and what we will pass into our client is our graph qo query because we're going to tell it exactly the data we want right. So for our query, let's see: let's do this.

B

First, let's jump over to our graph QL endpoint, and you know what probably also good if we made sure it was running in the background. So let's run the the API in the background. It's.

A

Always useful to have it up and running when you connect to it probably smarter right.

B

Okay, so the API is running and what we want to query for is a list of all the dogs. This write the same query we just created in the last episode, and so what we have here is actually that looks pretty good. We have a graph QL query that retrieves all the dogs, all of my favorite dogs and some of their info, but let's just go ahead and grab all of the info, so we have title breed avatars.

B

So let's include the birthday we'll grab coke color and, let's see website, URL press run to make sure that works. It looks like it's still good, and so now, what do we do with this query? To use it on the client side? Well,.

B

What we'll do we'll create a request, so this will be a graph QL request and in this graph, QL request. This is where we pass in that query. So it comes with a property called query and I'm just going to create a string and I'm just literally going to copy/paste that now it doesn't look great at first cuz we got to get rid of those carriage returns. So, let's, let's make it look a little prettier here.

B

A

We need a shortcut.

B

Make into one line that would be great, I mean the nice thing is once you have this. You don't really have to write this query again unless you want to change the shape of your data, but there we go so now we have our graph QL request and just like with HTTP client, we can get our response. So we'll say a wait. Client dot, send query async and pass in that that graph QL request, and so now what we have back is our JSON response.

B

So just like we got here, this is the data that has come back from our graph QL request. So.

A

And we want to make it a response, not a response.

B

A

B

So right, so we have this response. It's our JSON and one of the cool things with this client SDK is it can deserialize the JSON for us, so what we can do is we can now create our our dog images list using our response and what I like to do is use this method called get data field, as so it's a little bit of a funky name like. Why does it say, get data field? What's a data field?

B

Well, every graph, QL response comes back with this data data object and then inside of data are the fields that you asked for. So what we? What we're telling this SDK here is get data field as and we'll tell it that we're expecting a ienumerable of our dog model and we have to pass in C it's asking for a field name.

B

So when we go back and look at our query well, this is the data object and in the field we want is dog dogs, so we'll copy dogs and we'll tell it to deserialize dogs as a dog images model ienumerable, and so now we have all of that information back on our mobile app back on our salmon app, and we can add that to our UI, so we'll say for each dog in our dog images, images and we'll add that to the our collection.

B

So first we cleared the collection, we got our got our dogs and now we can add them in one by one and if we did everything right, we should see our dogs appear on the iOS app. So, let's give it a shot here. We.

A

B

All right, apps launching, makes the API request and.

A

Then we have dogs.

B

You have all of my favorite dogs. It looks like their avatar. Images are a little slow loading today but yeah. If you still want to see a picture of Kirby, we can click on kirby and it'll. Take us.

A

B

You want waffles to cheer us up today we can go, say hi to office, I, love the names and so and so right. So with just a couple lines of code, we're able to query our graph QL endpoint. If we didn't want information like, for example, we have the birth date listed here. All we have to do. We could remove that birth date and then we would no longer come back in our JSON response, in' or if we wanted to add, maybe something more to our UI.

B

We can add that field in here and allows us as mobile developers to really take control of the data in the backend, because now we can update our UI and make new screens and pages without needing to wait for necessarily a new REST API to come, because we can request any data we want with graph QL. So.

A

With the sharing of the client and the server using the net standard libraries, is it possible to have some sort of fluent interface to build up the queries, or is it mostly string based for now so.

B

This library uses string based. There are a couple different libraries available like in the creating a graph 12 back-end episode. We talked about another library called hot chocolate right well that same company, the company name is chilly cream and they make a client-side library called strawberry, shake that's really fun. Creative.

A

B

And yeah they've they've created a way that we don't have to hard code. Our query as a string and they've come up with some really unique solutions to try out. So there are a couple options: I'd recommend checking out all of them find which one you like best find, which one maybe ones more simple, and we want to stick to that.

B

Maybe this one has less hard-coded strings and we want to stick that, but there's a lot of cool libraries out there that we can check out and speaking of which, if you want to learn more, we have links to all of that information. So we've put together this landing page just for this episode series today, where you can find all the information about graph QL, you can find links to Docs. You can find the code sample that we were just working on the the one that's actually completed.

B

That follows the good best practices and doesn't write quick and dirty code, like we did here and so I highly recommend checking that out and in there we can find links to the graph QL libraries like hot chocolate, graph, QL, quiet, strawberry, shake and and play around with them on your own nice. So.

A

That has been graph QL seems like a very powerful way to query. Data looks straightforward to get started. We've got some clients out there to hit the ground running. Thank you so much for coming on and sharing graph QL with us. Thanks for having me.

A

Hi I'm Jeremy lick, Ness you've watched another episode of on.net. Thank you for joining us be sure to LIKE and subscribe so that you don't miss a show and if you're interested in more shows check out the link right here. Thanks.