Handling custom scalars with apollo-angular

[pixtim]

Question

• Is it possible to automatically parse and pack custom scalars with apollo-angular?
• If not, is there a workaround we can use to achieve this? For example, apollo-link has custom scalar capability.

Background

I've created a graph that declares custom scalars to represent vectors, matrices and quaternions.
schema.txt

My client implementations looks something like this:

export const partFragment = gql`
  fragment partFields on Part {
    name
    blocks {
      transformation
      cut
      color
    }
  }
`;

@Injectable({ providedIn: "root" })
export class PartService {
  constructor(private apollo: Apollo) {}

  public async getPart(name: string): Promise<Part> {
    interface QueryResult {
      getPart: Part;
    }
    const result = await this.apollo
      .query<QueryResult>({
        query: gql`
          ${partFragment}
          query($name: String!) {
            getPart(name: $name) {
              ...partFields
            }
          }
        `,
        variables: { name },
      })
      .toPromise();
    return result.data.getPart;
  }

I'm using a number array to pack the serialized values for each scalar. For example

{
  "data": {
    "getPart": {
      "name": "testTrivialPart",
      "blocks": [
        {
          "transformation": [ 10, 0, 0, 0, 0, 10, 0, 0, 0, 0, 10, 0, 0, 0, 0, 1 ]
        }
      ]
    }
  }
}

The typescript definition for my matrix includes an elements array that is populated by a CustomScalar handler. The client however, only sees the raw number array for the field and does not know how to automatically parse it into a Matrix4 object. I need to hook in a custom scalar handler to do the mapping automatically when deserializing and serializing.

[dandean]

This discussion from apollo-client goes in detail into why this is difficult: apollographql/apollo-client#585