(2/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.
Now that we are able to query our GraphQL endpoint, we need to be able to get specific content. Let’s explore how can we pass variables in order to retrieve a particular video or get the next page or load only the first 5 videos, or update any piece of information.
GraphQL Variables
First we are going to go back to our GraphiQL interface, lets have a look at this query which is going to search for a video by its xid and see how you can add a variable to this query:
query GetVideo {
video(xid: "x5s90td") {
xid
title,
thumbnailURL(size:"x60")
}
}Step 1: we are going to declare that in this query we are going to be passing one value (string) that can’t be null (!) and that it’s going to be named videoxId, here is the updated query:
query GetVideo($video_xid: String!) {
video(xid: $video_xid) {
xid
title,
thumbnailURL(size:"x60")
}
}Step 2: we are going to need to pass parameters to this query:
{
"video_xid": "x5s90td"
}Here is the query with it’s variable and the response in the GraphiQL interface:
Updating our App
We are going to start by adding a class in which will help pass the query parameter for this specific query.
/// <summary>
/// Model to query a specific video
/// </summary>public class QueryVideoPageModel
{
//Query parameter
public string video_xid { get; set; }
}
Next, we need to add the GraphQL query that we are going to call GetVideoCall.txt in our UWP application in the folder GraphQLFiles.
query GetVideo($video_xid: String!) {
video(xid: $video_xid) {
xid
title,
thumbnailURL(size:"x60")
}
}As you can see, both files have the same video_xid property, this will allow the query to map the search value with the GraphQL query.
Next, we are going to need to update our ListRequest class so that it can support a query with variables.
public class ListRequest : RequestBase
{
///previous code
public ListVariables _listVariables { get; protected set; }
public ListRequest(string callId, VariablesListOptions variables = null)
{
_callId = callId;
_listVariables = variables;
}
///code
}This means that when we create our new request we can passe it variables. This new class which we will call ListVariables has a property called Variables:
public class ListVariables
{
public string Variables { get; set; } = "";
}We are also going to need to update the ParamsToCall property, to check to see if the property _listVariables is null. If it is not null this means that we are trying to send a query with variables.
Here is the updated ParamsToCall property:
public override string ParamsToCall
{
get
{
//get the awaited result from file
var queryParams = SimpleIoc.Default.GetInstance <IFileIoReaderHelper>().ReadFromDefaultFile(CallIdentifier);
//set data in wrapper
var keyQuery = new RequestWrapper()
{
query = (queryParams)
}; // check to see if we sending variables with this query
if (_listVariables!= null)
{
keyQuery.variables = ListOptions.Variables;
}
//returning a Serialized object
return JsonConvert.SerializeObject(keyQuery);
}
}
Now we are going to look at an example on how you can create your GraphQL request, we are going to pass a ListVariables class that holds our QueryVideoPageModel that is Serialized.
new ListVariables()
{
Variables = JsonConvert.SerializeObject(new QueryVideoPageModel()
{
video_xid = videoXid
})
}Here is an example for a method of what the full call could look like:
private async Task GetVideoInfo(string videoXid)
{
var videoRequest = new ListRequest(
"ms-appx:///GraphQLFiles/MyChannelsCall.txt",
new ListVariables()
{
Variables = JsonConvert.SerializeObject(new QueryVideoPageModel()
{
video_xid = videoXid
})
});
//query request
var response = await MakeRequest(videoRequest); // deserialize your response
}
Once you have received the response you can read the data and deserialize it.
Mutations
Lets take the example from GraphQL.org for our mutations, which is based on creating a review for an episode.
Here is our GraphQL query:
mutation CreateReviewForEpisode($ep: Episode!, $review: ReviewInput!) {
createReview(episode: $ep, review: $review) {
stars
commentary
}
}Which will be saved under GraphQLFiles/Mutations/ CreateReviewForEpisodeCall.txt. The main difference between a mutation call and a query call is that a mutation will start with the wording mutation.
Here are the variables that we will be passing in the mutation:
{
"ep": "JEDI",
"review": {
"stars": 5,
"commentary": "This is a great movie!"
}
}And this would be the response:
{
"data": {
"createReview": {
"stars": 5,
"commentary": "This is a great movie!"
}
}
}First, we will use http://json2csharp.com/ to create our model from the variables, which will give us this:
public class Review
{
public int stars { get; set; }
public string commentary { get; set; }
}
public class CreateReviewMutation
{
public string ep { get; set; }
public Review review { get; set; }
}Because of the changes detailed above for adding variables, doing a mutation will be quite simple.
We are going to need to initialize our CreateReviewMutation class, serialize it and send it to our ListRequest class, and then send everything to our method called MakeRequest.
Here is an example of what it would look like:
private async Task CreateReviewMutation()
{
//create mutation model
var review = new CreateReviewMutation()
{
ep = "JEDI",
review = new Review()
{
stars = 5,
commentary = "This is a great movie!"
};
};
//prepare ListRequest
var videoRequest = new ListRequest(
"ms-appx:///GraphQLFiles/Mutations/CreateReviewForEpisodeCall.txt",
new ListVariables()
{
Variables = JsonConvert.SerializeObject(review)
});
//query mutation request
var response = await MakeRequest(videoRequest);
}I hope that this tutorial on how to make calls with variables and mutation on GraphQL has been helpful!
At dailymotion this philosophy on how to do GraphQL queries for C# is how we do 100% of our API calls.
Happy coding!
