Passing Objects as Document Variables using URQL

typedGraphqlQuery.ts

export type Maybe<T> = T | null;
export type InputMaybe<T> = Maybe<T>;

export type Loan_Filter = {
  closed?: InputMaybe<Scalars['Boolean']>;
  closed_in?: InputMaybe<Array<Scalars['Boolean']>>;
  closed_not?: InputMaybe<Scalars['Boolean']>;
  closed_not_in?: InputMaybe<Array<Scalars['Boolean']>>;
};
    
export type QueryLoansArgs = {
  block?: InputMaybe<Block_Height>;
  first?: InputMaybe<Scalars['Int']>;
  orderBy?: InputMaybe<Loan_OrderBy>;
  orderDirection?: InputMaybe<OrderDirection>;
  skip?: InputMaybe<Scalars['Int']>;
  subgraphError?: _SubgraphErrorPolicy_;
  where?: InputMaybe<Loan_Filter>;
};

// QUESTION: this where typing is broken. How should I be doing this? 
const homepageQuery = `
    query($where: { [key: string]: Boolean } , $first: Int, $orderBy: String, $orderDirect: String) {
        loans(where: $where, first: $first, orderBy: $orderBy, orderDirection: $orderDirection) {
            ${ALL_LOAN_PROPERTIES}
        }
    }
`;
    
export default async function subgraphLoans(): Promise<Loan[]> {
   const whereFilter: Loan_Filter = { closed: false };
   const query: QueryLoansArgs = {
     where: whereFilter,
     first: 20,
     orderBy: Loan_OrderBy.CreatedAtTimestamp,
     orderDirection: OrderDirection.Desc,
   };

   const {
     data: { loans },
   } = await nftBackedLoansClient.query(homepageQuery).toPromise();

   return loans;
 }