Web Development

Array parameter in WebAPI Get Request

24 November 2022

REST APIs are great, and ASP.NET Web API is a nice way of creating one. The auto-generated code that Visual Studio gives you will also get you 90% of the way there to knowing how to build one without reading much documentation.

However, while it will give you all the GET, POST, PUT, DELETE etc endpoints there's one thing it doesn't give you an example for, and that's query-string parameters on your GET request.

In the real world, the likelihood of you wanting the GET route to return everything is quite slim. You may have small datasets where this is true but more often than not, you're going to want some sort of query string values to use as a filter.

Fortunately, ASP.NET makes this simple with parameter binding. Just add them as parameters to your function.

1// GET: api/<People>
2[HttpGet]
3public IEnumerable<Person> Get(int? age, string? gender)
4{
5    ...
6}

Make sure to make them nullable if you don't want them as required fields.

Swagger will even pick up on them and include them as parameter options.

It's also likely that you'll want an array of values so that in my example you could select multiple ages or genders. However, if you just try turning them into arrays you will end up with this build error.

1'API.Controllers.PeopleController.Get (API)' has more than one parameter that was specified or inferred as bound from request body. Only one parameter per action may be bound from body. Inspect the following parameters, and use 'FromQueryAttribute' to specify bound from query, 'FromRouteAttribute' to specify bound from route, and 'FromBodyAttribute' for parameters to be bound from

If we only had one array things would be ok as the error is for specifying multiple. Except if we look at swagger things still aren't quite right.

The age parameter is now showing as coming from the body rather than the query-string. It also explains why you could only specify one array as a parameter.

The solution is to specify that these parameters should come from the query-string which we can do by using the [FromQuery] attribute.

1// GET: api/<PeopleController>
2[HttpGet]
3public IEnumerable<Person> Get([FromQuery] int[]? age, [FromQuery] string[]? gender)
4{
5     ...
6}

The solution will now run even with multiple array parameters, and swagger will also pick up that these are query-string array parameters and give you the option to add individual items when you test a request.

How to create a Graph QL API on Azure Functions

1 September 2022

REST APIs are great, but they can result in either your application making an excessive number of requests to multiple endpoints, then only using a small percentage of the data returned. Or you end up making a large number of endpoints for specific purposes and now have maintenance hell to deal with.

If that's your situation then one option is to look at replacing some of that functionality with a Graph QL API. I'm not going to dig into what Graph QL APIs are (that's been covered by many people before me), but what I will do is show you how to make one in an Azure Function.

Your starting point is to use Hot Chocolate by Chilli Cream, not only does it have a fun meaningless name, but it also offers some great simple-to-use functionality. However, despite stating it works with Azure Functions, the documentation is all for ASP.NET Core, which is not the same thing.

Another issue I have with the documentation is that it doesn't explain particularly well how you configure it to work with a data access layer. Examples either have methods that return a dataset containing all related data, or they use Entity Framework, which as you generally wouldn't use your DB schema as an API schema feels like cheating.

So here is my guide from file new project to a working Graph QL API in an Azure Function.

File New Project

Starting right at the beginning, open Visual Studio and create a new Azure Function. For this demo, I'm using .NET 6 as that's the latest at the time of writing, and am going to create an HTTP trigger.

For a data source, I've created a hard-coded repository containing Schools, Classes, and Students. Schools contain multiple classes and classes contain multiple students. Each repository contains functions to get all, get by id or get by the thing it's related to. e.g. Get Students by Class. Here's my code for it.

1using AzureFunctionWithGraphApi.Models;
2using System.Collections.Generic;
3using System.Linq;
4
5namespace AzureFunctionWithGraphApi.DataAccess
6{
7    public interface ISchoolRepository
8    {
9        List<School> All();
10        School GetById(int id);
11    }
12
13    public interface IClassRepository
14    {
15        List<Class> All();
16        Class GetById(int id);
17        List<Class> GetBySchool(int schoolId);
18    }
19
20    public interface IStudentRepository {
21        List<Student> All();
22        Student GetById(int id);
23        List<Student> GetByClass(int classId);
24    }
25
26    public static class DemoData
27    {
28        public static List<School> Schools = new List<School>()
29        {
30            new School() {Id = 1, Name = "Foo School"},
31            new School() {Id = 2 , Name = "Boo School"},
32        };
33
34        public static List<Class> ClassList = new List<Class>()
35        {
36            new Class() {Id = 3, SchoolId = 1, Name = "Red Class", YearGroup = 1},
37            new Class() {Id = 4, SchoolId = 1, Name = "Blue Class", YearGroup = 2},
38            new Class() {Id =5, SchoolId = 2, Name = "Yellow Class", YearGroup = 1},
39            new Class(){Id = 6, SchoolId = 2, Name = "Green Class", YearGroup = 2}
40        };
41
42        public static List<Student> Students = new List<Student>()
43        {
44            new Student() {Id = 1, ClassId = 3, FirstName = "John", Surname = "Smith"},
45            new Student() {Id = 2, ClassId = 3, FirstName = "Sam", Surname = "Smith"},
46            new Student() {Id = 3, ClassId = 4, FirstName = "Eric", Surname = "Smith"},
47            new Student() {Id = 4, ClassId = 4, FirstName = "Rachel", Surname = "Smith"},
48            new Student() {Id = 5, ClassId = 5, FirstName = "Tom", Surname = "Smith"},
49            new Student() {Id = 6, ClassId = 5, FirstName = "Sally", Surname = "Smith"},
50            new Student() {Id = 7, ClassId = 6, FirstName = "Sharon", Surname = "Smith"},
51            new Student() {Id = 8, ClassId = 6, FirstName = "Kate", Surname = "Smith"}
52        };
53    }
54
55    public class SchoolRepository : ISchoolRepository
56    {
57        public List<School> All()
58        {
59            return DemoData.Schools;
60        }
61
62        public School GetById(int id)
63        {
64            return DemoData.Schools.Where(x => x.Id == id).FirstOrDefault(); 
65        }
66    }
67
68    public class ClassRepository : IClassRepository
69    {
70        public List<Class> All()
71        {
72            return DemoData.ClassList;
73        }
74
75        public Class GetById(int id)
76        {
77            return DemoData.ClassList.Where(x => x.Id == id).FirstOrDefault();
78        }
79
80        public List<Class> GetBySchool(int schoolId)
81        {
82            return DemoData.ClassList.Where((x) => x.SchoolId == schoolId).ToList();
83        }
84    }
85
86    public class StudentRepository : IStudentRepository
87    {
88        public List<Student> All()
89        {
90            return DemoData.Students;
91        }
92
93        public List<Student> GetByClass(int classId)
94        {
95            return DemoData.Students.Where((x) => x.ClassId == classId).ToList();
96        }
97
98        public Student GetById(int id)
99        {
100            return DemoData.Students.Where(x => x.Id == id).FirstOrDefault();
101        }
102    }
103}
104

If you want to use it, you'll also need the related models.

1public class School
2    {
3        public int Id { get; set; }
4        public string Name { get; set; }
5    }
6
7public class Class
8    {
9        public int Id { get; set; }
10        public int SchoolId { get; set; }
11        public int YearGroup { get; set; }
12        public string Name { get; set; }
13    }
14
15public class Student
16    {
17        public int Id { get; set; }
18        public int ClassId { get; set; }
19        public string FirstName { get; set; }
20        public string Surname { get; set; }
21    }

Create a Graph QL API

With our project and data access layer created, lets get on with how to create a Graph QL in a .NET Azure Function.

Hot chocolate will provide all the functionality and can be added to your solution via Nuget. Just search for Hot Chocolate and make sure you pick the Azure Function version.

The HTTP Endpoint we created when creating the function needs updating to provide the route for the graph API.

1using System.Threading.Tasks;
2using Microsoft.AspNetCore.Mvc;
3using Microsoft.Azure.WebJobs;
4using Microsoft.Azure.WebJobs.Extensions.Http;
5using Microsoft.AspNetCore.Http;
6using Microsoft.Extensions.Logging;
7using HotChocolate.AzureFunctions;
8
9namespace AzureFunctionWithGraphApi
10{
11    public class GraphQlApi
12    {
13        [FunctionName("HttpExample")]
14        public async Task<IActionResult> Run(
15        [HttpTrigger(AuthorizationLevel.Anonymous, "get", "post", Route = "graphql/{**slug}")] HttpRequest req,
16        [GraphQL] IGraphQLRequestExecutor executor,
17        ILogger log)
18        {
19            log.LogInformation("C# HTTP trigger function processed a request.");
20
21            return await executor.ExecuteAsync(req);
22        }
23    }
24}
25

Next we need to configure what queries can be performed on the graph. For my example, I'm replicating the Get All and Get By Id methods from my data access layer.

One thing to note here is although I'm using dependency injection for my repositories they are using resolver injection on the methods rather than constructor injection. You can read more about why this is on the Chilli Cream site here, but essentially constructor injector won't work.

1using AzureFunctionWithGraphApi.DataAccess;
2using AzureFunctionWithGraphApi.Models;
3using HotChocolate;
4using System.Collections.Generic;
5
6namespace AzureFunctionWithGraphApi
7{
8    public class Query
9    {
10        public List<School> GetSchools([Service] ISchoolRepository schoolRepository)
11        {
12            return schoolRepository.All();
13        }
14        public School GetSchoolById([Service] ISchoolRepository schoolRepository, int schoolId)
15        {
16            return schoolRepository.GetById(schoolId);
17        }
18
19        public List<Class> GetClasses([Service] IClassRepository classRepository)
20        {
21            return classRepository.All();
22        }
23        public Class GetClassById([Service] IClassRepository classRepository, int classId)
24        {
25            return classRepository.GetById(classId);
26        }
27
28        public List<Class> GetClassesBySchoolId([Service] IClassRepository classRepository, int schoolId)
29        {
30            return classRepository.GetBySchool(schoolId);
31        }
32
33        public List<Student> GetStudents([Service] IStudentRepository studentRepository)
34        {
35            return studentRepository.All();
36        }
37        public Student GetStudentById([Service] IStudentRepository studentRepository, int studentId)
38        {
39            return studentRepository.GetById(studentId);
40        }
41
42        public List<Student> GetStudentsBySchoolId([Service] IStudentRepository studentRepository, int classId)
43        {
44            return studentRepository.GetByClass(classId);
45        }
46    }
47}
48

At this point (apart from the fact we haven't configured the startup file with our DI) you will now have a Graph QL API but it won't be able to load any related items. You will however be able to pick which fields you want from the datasets.

To add the related data we need to create extension methods for our models. These inject the instance of the item using Hot Chocolates Parent attribute, and the repository we're going to use to get the data.

1using AzureFunctionWithGraphApi.DataAccess;
2using AzureFunctionWithGraphApi.Models;
3using HotChocolate;
4using HotChocolate.Types;
5using System.Collections.Generic;
6
7namespace AzureFunctionWithGraphApi
8{
9    [ExtendObjectType(typeof(School))]
10    public class SchoolExtensions
11    {
12        public List<Class> GetClasses([Parent] School school, [Service] IClassRepository classRepository)
13        {
14            return classRepository.GetBySchool(school.Id);
15        }
16    }
17
18    [ExtendObjectType(typeof(Class))]
19    public class ClassExtensions
20    {
21        public School GetSchool([Parent] Class schoolClass, [Service] ISchoolRepository schoolRepository)
22        {
23            return schoolRepository.GetById(schoolClass.SchoolId);
24        }
25        public List<Student> GetStudents([Parent] Class schoolClass, [Service] IStudentRepository studentRepository)
26        {
27            return studentRepository.GetByClass(schoolClass.Id);
28        }
29    }
30
31    [ExtendObjectType(typeof(Student))]
32    public class StudentExtensions
33    {
34        public Class GetClass([Parent] Student student, [Service] IClassRepository classRepository)
35        {
36            return classRepository.GetById(student.ClassId);
37        }
38    }
39}
40

Now all that's left is to configure our startup file. This file no longer gets created when you create the Azure Function so you'll need to add it yourself.

Here's mine. As you can see I'm registering the dependency injection for my repositories, and also configuring the GraphQL. This needs to include the query class we made and any extension classes.

1using AzureFunctionWithGraphApi.DataAccess;
2using Microsoft.Azure.Functions.Extensions.DependencyInjection;
3using Microsoft.Extensions.DependencyInjection;
4
5[assembly: FunctionsStartup(typeof(AzureFunctionWithGraphApi.Startup))]
6namespace AzureFunctionWithGraphApi
7{
8    public class Startup : FunctionsStartup
9    {
10        public override void Configure(IFunctionsHostBuilder builder)
11        {
12            builder.Services.AddScoped<ISchoolRepository, SchoolRepository>();
13            builder.Services.AddScoped<IClassRepository, ClassRepository>();
14            builder.Services.AddScoped<IStudentRepository, StudentRepository>();
15
16            builder.AddGraphQLFunction()
17                .AddQueryType<Query>()
18                .AddTypeExtension<SchoolExtensions>()
19                .AddTypeExtension<ClassExtensions>()
20                .AddTypeExtension<StudentExtensions>();
21        }
22    }
23}
24

Run the Application and navigate in a browser to it's one route and you should get see the Banana Cake Pop UI to be able to view your schema.

Banana Cake Pop UI showing Scheme Reference

You can also test out queries selecting just the data you want even on related items.

We could even start with selecting a specific student and pull in their related class and school info.

The Bad News

All of this is great and in fact, even more, functionality is available to be added, but there is some bad news. Not all of Hot Chocolates functionality actually works in an Azure Function, specifically authentication.

You can read about Hot Chocolates implementation of Authentication and Authorization here however it uses ASP.NET Core authentication middleware and Authorize attributes which do not work in Azure Functions. So unless you want your Graph QL API to be fully public you may be out of luck with this being a solution.

Code for this Demo

Now for the good news, if you want to try this without typing all the code, you can get a copy of it from my GitHub here.

https://github.com/timgriff84/AzureFunctionWithGraphApi

Debugging VueJS + TypeScript with VS Code - Part 2

16 March 2022

In the past I have written about how to setup VS Code to debug a VueJS + TypeScript project. Since writing that article it's a method I've continued to use and it works well. It's quick to spin up and quite reliably allows you to place breakpoints in code.

However one aspect of it that I don't like is it's not so much "Run and Debug" from VSCode, it's more just the debug part, as to use it you must first go to a terminal and run your VueJS application.

There's two problems with this:

1. Most of the time you will just run the application not debugging (because why debug when you don't have an issue), therefore when you need it, you have to redo what you just did that caused an error. Instinctively there is then a desire to guess at what was wrong rather than going to the extra effort of debugging (frequently when you do this your guess is wrong and you end up spending more time guessing at what was wrong than using the tool that will tell you).

2. As the debugger generally isn't running, exceptions never get flagged up, and unless you have the browser console open (and check it), you can remain oblivious to something going wrong in your app.

There is a solution though, and it's quite simple!

Using VS Code to launch via npm

First follow through my previous guide on debugging a VueJS and TypeScript application.

Next, in your launch.config file add a new configuration with the definition below. This will run the command in a debug terminal, effectively doing the same thing as you typing npm run serve.

1{
2      "command": "npm run serve",
3      "name": "Run npm serve",
4      "request": "launch",
5      "type": "node-terminal"
6    },

To get both our new and old configuration to run you can add a compound definition, that does both at the same time.

Here's mine.

1"compounds": [
2    {
3      "name": "Run and Debug",
4      "configurations": ["Run npm serve", "vuejs: edge"]
5    }
6  ],

My complete file now looks like this. Note you don't need configurations for edge and chrome, just use the one for the browser you use.

1{
2  // Use IntelliSense to learn about possible attributes.
3  // Hover to view descriptions of existing attributes.
4  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
5  "version": "0.2.0",
6  "compounds": [
7    {
8      "name": "Run and Debug",
9      "configurations": ["Run npm serve", "vuejs: edge"]
10    }
11  ],
12  "configurations": [
13    {
14      "command": "npm run serve",
15      "name": "Run npm serve",
16      "request": "launch",
17      "type": "node-terminal"
18    },
19    {
20      "type": "pwa-msedge",
21      "request": "launch",
22      "name": "vuejs: edge",
23      "url": "http://localhost:8080",
24      "webRoot": "${workspaceFolder}",
25      "breakOnLoad": true,
26      "sourceMapPathOverrides": {
27        "webpack:///./*": "${webRoot}/*"
28      },
29      "skipFiles": ["${workspaceFolder}/node_modules/**/*"]
30    },
31    {
32      "type": "chrome",
33      "request": "launch",
34      "name": "vuejs: chrome",
35      "url": "http://localhost:8080",
36      "webRoot": "${workspaceFolder}",
37      "breakOnLoad": true,
38      "sourceMapPathOverrides": {
39        "webpack:///./*": "${webRoot}/*"
40      },
41      "skipFiles": ["${workspaceFolder}/node_modules/**/*"]
42    }
43  ]
44}
45

Now whenever you want to run the application, just run the compound Run and Debug and your VueJS app will start up and launch in your browser.

Which JavaScript for loop should I use?

17 February 2022

When given a choice of 4 seemingly different ways to do the same thing, I've always been the person that wants to know what the difference is? To often we can blindly write code the way the person before us did and not understand the reason to do it a certain way, but what if the scenario has changed. When multiple options exist there's usually a reason why. It can be a language style improvement to make things easier to write, but more often than not there's a fundamental difference in what it actually does.

So, for loops, four seems like a lot, gotta be some differences right?

for

This is likely to be the first type of for loop you encounter when learning to program. It's a very manual type of loop where you create a initial expression, a condition expression to keep running the loop and an increment expression.

1for (let i = 0; i < 5; i++) {
2    console.log(i);
3}
4
5// Result:
6// 0
7// 1
8// 2
9// 3
10// 4

The big downside of the for loop is it doesn't actually loop through a collection. e.g. If you had an array and wanted to loop through each of it's objects you could do this as follows:

1const arr = ['a', 'b', 'c'];
2
3for (let i = 0; i < arr.length; ++i) {
4    console.log(arr[i]);
5}

In effect the loop is incrementing a number and you then use that number to access the position of the array. The result is you have more code to write that isn't serving any real purpose.

However as this is a much more manual loop process you have far more control over the loop. e.g.

You could increment by a different number.
You could go backwards.
The condition might not be linked to the length of an array.
You might not even be looping through an array.

Pros

Potentially faster in performance.
Break statement can be used to come out of the loop.
It works with the await keyword.
Not just for looping through arrays.

Cons

Not as readable as others.
You have more code to write.

for...in

You probably don't want this one. Here's an example:

1const arr = ['a', 'b', 'c'];
2
3for (const i in arr) {
4    console.log(arr[i]);
5}
6
7// Result:
8// "a"
9// "b"
10// "c"

Although we're now specifically looping through a collection like an array and don't need to do all of that i < array.length stuff, what we're given isn't the object in the array but a property name to access it on the object.

Here's another example:

1const arr = ['a', 'b', 'c'];
2arr.foo = 'John'
3
4for (const i in arr) {
5    console.log(arr[i]);
6}
7
8// Result:
9// "a"
10// "b"
11// "c"
12// "John"

That looks a bit weird! The for...in loop doesn't just loop through an array, it loops through an objects enumerable properties, which could be the items in an array, but it could be other stuff too.

For this reason, unless your doing something quite niche its probably not the loop you are looking for and is likely to cause you an issue which your objects has one more property than you were expecting.

Pros

Can loop through all the enumerable properties on an object.

Cons

Looping through all the properties of an object isn't likely what you want.

forEach

As the name implies, a for each loop will iterate through each element in an array. Here's an example:

1const arr = ['a', 'b', 'c'];
2
3arr.forEach((i) => {
4    console.log(i);
5})
6
7// Result:
8// "a"
9// "b"
10// "c"

The forEach function takes an anonymous function as a parameter and will then call that function for each object in the array, passing in the object from the array.

This offers a big improvement over the initial for loop as we have a lot less code to write and we're actually given the object rather than a variable to go an find it.

However there are some downsides due to it effectively being a function call passing an anonymous function to execute.

Firstly you can't stop the forEach part way through. With the others you can use the break keyword to stop the iteration.

Secondly there's added confusion around the scope of what this is. Assuming your function is in a class, unless you use the arrow syntax (as in the example) you won't be able to access any of the other functions in your class as passing a regular function would change the scope.

1// This works
2class foo
3{
4  myFunction() {
5    const arr = ['a', 'b', 'c'];
6
7    arr.forEach((i) => {
8      this.outputValue(i)
9    })
10  }
11  
12  outputValue(x) {
13    console.log(x);
14  }
15}
16
17// This Doesn't
18class foo
19{
20  myFunction() {
21    const arr = ['a', 'b', 'c'];
22
23    arr.forEach(function(i) {
24      this.outputValue(i)
25    })
26  }
27  
28  outputValue(x) {
29    console.log(x);
30  }
31}

You also can't use an await within the foreach loop. e.g.

1async function run() {
2  const arr = ['a', 'b', 'c'];
3  arr.forEach(el => {
4    // SyntaxError
5    await new Promise(resolve => setTimeout(resolve, 1000));
6    console.log(el);
7  });
8}

Pros

Much shorter to write and easier to read.
Iterator provides the object from the array.

Cons

Easy to mess up context of this.
No way to break the loop.
Async/Await doesn't work on functions within the loop.
Can only loop through arrays.
It's performance is slower (nice article here comparing the performance differences), not to such an extent it would matter on a small object, but large objects could start to take a hit.

for...of

When looping through an array, the for...of loop combines the best of all the other loops. It has the same simple syntax of the for...in loop but instead of enumerating over enumerable properties, it loops through the iterable objects such as the items in an array.

Like the forEach loop you are provided with the object in the array rather than it's index or property name.

1const arr = ['a', 'b', 'c'];
2
3for (const i of arr) {
4    console.log(i);
5}
6
7// Result:
8// "a"
9// "b"
10// "c"

You can also break the loop and access properties outside of the loop.

1const stopValue = 'b'
2const arr = ['a', 'b', 'c'];
3
4for (const i of arr) {
5    console.log(i);
6    if (i == stopValue)
7        break;
8}
9
10// Result:
11// "a"
12// "b"

Pros

Lowest amount of extra code to write.
Iterator provides the object.
Doesn't use an anonymous function so scope doesn't change.
Loop can be stopped as needed.
Async still works.
Works with more than just arrays.

Cons

Have to be looping over the iterable items in an object.
Can't easily access the index value.

Conclusion

If you want to iterate through something like an array, for...of would be my recommendation to use. A for...in loop is likely to be less relevant but has its place, and for all other loops which don't relate to the objects in an array a good old for loop still has it's place.