Consuming a GraphQL endpoint with Xamarin

Consuming a GraphQL endpoint with Xamarin

If you've been reading my posts on GraphQL you should have a good impression of what GraphQL is and how you can create an endpoint using .NET Core 3.0. In this post I'll try to explain how to consume a GraphQL endpoint from you're client application. Because GraphQL is built for mobile, I'll be explaining on how to implement this in Xamarin.Forms.

Hosting the endpoint

To allow client applications to access the GraphQL endpoint, it should be hosted somewhere. The easiest way to host a .NET Core GraphQL endpoint, is to deploy it to Azure App Services. Because deploying the endpoint is similar to other types of API's, I won't go into details on how to publish the GraphQL endpoint. If you want to know more about this, I recommend reading the Microsoft docs.

Note: Make sure to enable WebSockets for the App Services in the Configuration section. This is disabled by default.

Client libraries

A GraphQL endpoint can be called with a POST request and returns JSON in response. Very similar to making REST calls. Therefor you can simply send Queries using the HttpClient that is part of System.Net. A small downside of this approach is that you'll need to transform your Queries and Mutations to the correct JSON structure. Therefor you can also choose to use existing GraphQL client libraries. The most commonly used library in .NET is GraphQL.Client.

Getting started (for Xamarin.Forms)

  1. Install the GraphQL.Client NuGet package into your .netstandard project.
  2. Create an instance of the GraphQLClient and pass the URL to your GraphQL endpoint into te constructor. The instance of this client can be re-used for all requests to this endpoint, the same as with HttpClient.
  3. After creating the client, a GraphQLRequest needs to be created. This request contains a property called "Query" that allows you to set the Query for this request. The easiest way to compose a Query is to use GraphiQL. More details on GraphiQL can be found in my previous post. When you've created and tested you're Query in the interface, you can copy and paste it in the Query property of your request, for example:
public async Task<List<Character>> GetAll()
{
    var request = new GraphQLRequest
    {
       Query = @"{
                  characters
                  {
                    characterName,
                    characterImageThumb,
                    nickname
                  }
                }"
    };

    var response = await graphQLClient.PostAsync(request);
    return response.GetDataFieldAs<List<Character>>("characters");
}

Finally, it's important to point the GetDataFieldAs method to the field that is containing the items you want to deserialize ("characters" in the example above). This is the child element of the response that is returned.

If you want to execute a Mutation, you also have to put this in the Query property what makes it a bit confusing. Subscriptions are currently in preview for this library. More details can be found on GitHub

Authentication
Often in production apps you'll need to implement oAuth to authenticate the user. With this client library oAuth tokens can be set as HTTP header in the same way as you would do this with HttpClient.

Example: Who GOT Killed? (Spoiler Alert!)

In order to show how to consume a GraphQL endpoint from a mobile app, I've created a Xamarin.Forms example. This app contains a list of all Game Of Thrones characters. When you tap on a character you get to see if they survived and who they've killed. You can find the source code on GitHub.

Conclusion

Hopefully this will give some insights in how a GraphQL endpoint can be consumed. As mentioned before, GraphQL is still pretty new in the .NET environment and therefor client libraries are not fully developed. This will probably improve when GraphQL gains more interest. If you want to read more on consuming a GraphQL endpoint I recommend the following resources:

Bas de Cort

About Bas de Cort

Bas is a software developer from The Netherlands with a great passion for mobile and innovative technology. This blog will mostly cover mobile technology, especially Xamarin.

Comments