(1/2) How the Dailymotion Windows team does its HTTP query on its GraphQL API

The main purpose of this article is to explain how the Windows Team is querying a GraphQL API without using any GraphQL SDK. We will try to give you insights on the philosophy we are using to query our endpoint.

As you probably know, GraphQL is an open source data query and manipulation language, that was developed by Facebook.

Firstly, some context: back in 2016 as part of a global product and infrastructure overhaul, our Engineering Team decided that the brand-new API they were working on would only run on GraphQL.

My colleagues working on the Web, iOS and Android platforms are using the Apollo GraphQL client which is great. However, for the Windows platform (UWP/C#) no client exists and as I didn’t want to spend time recreating the full Apollo SDK, we had to look for some alternative options. After some internal debate we decided to NOT create a GraphQL Client and focus more on a philosophy around how to do the data calls.

Without going into detail, here’s a quick reminder on the main difference between a REST API and a GraphQL API:

GraphQL query and C# model

First we need to create our GraphQL query. Internally we use a flavor of GraphiQL which is an in-browser IDE for exploring GraphQL which works great and gets the job done.

Let’s say that on GraphiQL we have this query:

query MyChannels {
    Content {
        channels {
            edges {
                node {
                      xid
                      name
                      accountType
                      coverURL(size: "x250")
                      logoURL(size: "x120")
                }
            }
        }
    }
}

Let’s save this query as MyChannelsCall.txt under a folder named GraphQLFiles that is in the root directory of your UWP project.

The response of this query would be:

{
  "data": {
    "Content": {
      "channels": {
        "edges": [
          {
            "node": {
              "xid": "ChannelXid",
              "name": "lequipe",
              "accountType": "verified-partner",
              "coverURL": "https://abc.xx.net/BBBB/x250-QWERTY.jpg",
              "logoURL": "https://abc.xxxn.net/AAAA/x120-AWERTY.jpg"
            }
          },
          {
            "node": {
              "xid": "channelXid",
              "name": "Beinsports-FR",
              "accountType": "verified-partner",
              "coverURL": "https://abc.xx.net/BBBB/x250-QWERTY.jpg",
              "logoURL": "https://abc.xxxn.net/AAAA/x120-AWERTY.jpg"
            }
          },
          ........
        ]
      }
    }
  }
}

Then we’ll need to convert this JSON to C# model. Personally I use http://json2csharp.com/, and you can also use visual studio special copy to do this. So we will get something as follows:

This we will save in our UWP project under the folder Models. We can now use the RootObject class to deserialize the content response that we will received from our HTTP call.

Here’s what it would look like when we deserialize into an object:

JsonConvert.DeserializeObject<RootObject>(response);

How do we query GraphQL ?

Now that we have our GraphQL query and model, we need to be able to query our GraphQL API endpoint.

Here is the base abstract class for our queries:

/// <summary>
/// Base class for requests.
/// </summary>
public abstract class RequestBase
{
    public abstract string CallIdentifier { get; }
    public abstract string ParamsToCall { get; }        
}

From the RequestBase all of our other request queries will inherit from this class. Depending on what type of queries we are doing we will always have to override the ParamsToCall property.

Here is our ListRequest class:

When you init this class the callid needs to be the location of where your GraphQL file is. In our case the GraphQL queries are located in a folder named GraphQLFiles. On UWP to access a locally stored file you will need to use the URI scheme “ms-appx:” on which you can find more information here on msdn.

Here is what a query of the MyChannels call would look like:

var myChannelsQuery = new ListRequest("ms-appx:///GraphQLFiles/ MyChannelsCall.txt");

The ParamToCall property will then need to load and read the GraphQL File. This is where this piece of code comes into action:

SimpleIoc.Default.GetInstance<IFileIoReaderHelper>().ReadFromDefaultFile(CallIdentifier);

The IFileIoReaderHelper interface with its ReadFromDefaultFile method will load and read the text file. This method uses the UWP system StorageFile.GetFileFromApplicationUriAsync(Uri) which will read the file. Below you can see the interface and its class:

Once we have loaded and read the json text file, we will need to create a wrapper that will hold the GraphQL query. Here is the class of the wrapper:

Now we need to send our query. We will start by initializing HttpRequestMessage that will be executed by the HttpClient. Here is the method I use to prepare our HttpRequest:

Using the MakeRequest method we will be able to query our GraphQL endpoint and retrieve our data.

This concludes the first part of our article on the philosophy that we are using here at dailymotion for the Windows(UWP) project to querying our GraphQL API endpoint.

In the second article we will look at how to pass variables (which can allow us to fetch the next set of content for example)and how to do mutations (create a review for an episode)on GraphQL.

(2/2) How the Dailymotion’s Windows team does its HTTP query on its GraphQL API