GraphQL Requiring Multiple Variables Not Working Properly with Angular-Apollo

Question

I'll start off by saying, I have been struggling for longer than my pride wants to admit and have put off asking, because I'm not sure how clear I will be; but, here goes . . .

I am using Angular 9 with Apollo-Angular and have no trouble accessing GraphQL queries with either no variables or only one. If I add more than one, I am absolutely unsuccessful. I have created a simple service that will allow me to create dynamic queries, so I have a type for variables that looks like this:

Apollo-Angular client looks at it as the type shown in next image. From everything I can see in the documentation, Apollo-Angular should be able to take any given object and convert it proper for the execution of the query, but again…I have yet to make this happen proper with more than one variable.

When calling the query, it looks like this:

Which results in the following output in the debug console:

GraphQLQueryVariables {first: 5, order_by: "accountNumber.ASC"}
{"first":5,"order_by":"accountNumber.ASC"}
Error Message Notification: Error: GraphQL error: Variable `$order_by` got invalid value.

From Chrome, this is what is being executed:

If I copy the exact same shown in Chrome, into the GraphQL Playground, it returns “Variable couldn’t be parsed. Please go to the variable editor and fix syntax issues”

I have tried for hours trying to send different ways via the WatchQuery variables property. If I try to send the multiple variables as a string using JSON.stringify it shows like this in Chrome:

If I literally hand type in a static value, I get the same issue from the beginning, “Variables couldn’t be parsed…”

If I run the exact same thing in the playground…but simply add the quotation marks (which are not showing in Chrome), I am successful:

From what I can see, no matter how I send it from the Appllo-Angular Query Watch variable property, I can’t get it to send proper. The ONLY time it sends proper is if I only use ONE variable and that variable happens to be an integer.

Is there an alternative approach I could/should take? Am I just doing this absolute incorrectly??

My specific questions are using Angular & Apollo-Angular:

1. How do I send multiple variables for the GraphQL query (first, order_by, where, etc)?
2. How do I send multiple items within one of those variables (ex: "order_by" : "customerName.ASC, accountNumber.DESC, startDate.DESC")?

EDIT: I've just found this in the GraphQL Specs that says:

    Variables Are Input Types
    Formal Specification

    For every operation in a document
    For every variable on each operation
    Let variableType be the type of variable
    IsInputType(variableType) must be true
    Variables can only be input types. Objects, unions, and interfaces cannot be used as inputs

I'm thinking this means I need to add an InputType in the backend (.net core, EF.core & Hot Chocolate) that will generate an Input Type within the schema. I haven't figured it out yet, but at least have given a new path to venture down.

EDIT: Each of my types has one of these used for variables (the only thing that will change is what is in the brackets "Get[AVOs]Variables", "[AVO]Sort", "[AVO]Filter"

export interface GetAVOsVariables {
    order_by?: AVOSort | null;
    first?: any | null;
    last?: any | null;
    after?: string | null;
    before?: string | null;
    where?: AVOFilter | null;
  } 

The "[x]Sort" is a string that is: [fieldName].ASC or [fieldName].DESC regardless of the type. Filter works similar. I am wanting to get the most generic, reusable version created as possible to prevent cloning same code structures simply to change the type name.

EDIT: I was able to get the variables working properly by writing it this way, rather than just trying to send the object in a single line:

this.result = this.apollo.watchQuery<GraphQLResponse>({
    query: gql`${this.query}`,
    variables: {
        first: this.graphRequest.variables.first,
        last: this.graphRequest.variables.last,
        before: this.graphRequest.variables.before,
        after: this.graphRequest.variables.after,
        where: this.graphRequest.variables.where,
        order_by: this.graphRequest.variables.order_by
    } 
  }).valueChanges
    .pipe(map(({data}) => data));
    return this.result;
}