Custom scalars and types on the client (Typescript)

[craigrushforth]

I've been trying to get this to work all day yesterday and it sounds like it's possible but only with resolvers, they seem to be server side and I need to configure the scalars & types as they get parsed on the client side.

Here is my scenario.

Our schema and server is handled by a different team. And we have multiple graphql clients so it's sort of fixed. Codegen is working really well, but I'd like to tweak the parsed versions of what the client sees to make it more runtime-friendly.

In our schema we have a Money scalar. It's a string containing a decimal with currency.

Looks like this.

"0.00 USD"

What I'd like to be able to do it have switch out codegen type to be a custom type. Preferably with some constructor so I can split the string into a decimal/number and currency type.

something like this:

type Money {
   amount: number;
   currency: string;
}

I have tried the following config

 "graphql/copia-graphql.ts": {
      documents: "graphql/**/*.graphql",
      plugins: ["typescript", "typescript-operations"],
      config: {
        omitOperationSuffix: true,
        scalars: {
          Money: "../lib/money#Money",
        },
      },

And its sort of working in that the generated code knows about it and imports it

import { Money } from '../lib/money';
export type Maybe<T> = T | null;
export type InputMaybe<T> = Maybe<T>;
export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
export type MakeOptional<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]?: Maybe<T[SubKey]> };
export type MakeMaybe<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]: Maybe<T[SubKey]> };
/** All built-in and custom scalars, mapped to their actual values */
export type Scalars = {
  ID: string;
  String: string;
  Boolean: boolean;
  Int: number;
  Float: number;
  Date: any;
  DateTime: any;
  Decimal: any;
  Money: Money;      <----  This used to be `any` and this is what I want to see
};

But it's still just a string at runtime.

Just still a string

Where am I going wrong? I'm missing the bit where I can hook into the parsing and do some manipulation and possibly construct a different object where I pass in a string and split it into its decimal value and currency.

I also plan to do a similar this with Date & DateTime scalars where I look at the contents of the date string and construct js Date objects based on if there is a time T component in the string.

Hopefully, this made some sense. Just to reiterate I need to do this all client side if that's possible.

[eddeee888]

Hi @craigrushforth 👋

scalars option only changes the type of a Scalar but not the implementation, which seems to be what you are looking for.

You GraphQL client may have ways to change a scalar value to match the type. For example, Apollo Client allows changing an object's field behaviour in the fetched data: https://www.apollographql.com/docs/react/caching/cache-field-behavior/
(I'm unclear if it can target all Scalars? 🤔 )

For example, if you were using Apollo Client, you may have to add it into InMemoryCache like this:

const cache = new InMemoryCache({
  typePolicies: {
    Holding: { // Object type name
      fields: {
        marketValue: { // Field name
          read(value) { // `value` is the value that comes from the Graph e.g. "0.00 USD"
            return {
              amount: getAmountFromString(value), // Just an example
              currency: getCurrencyFromString(value) // Just an example
            }
          }
        }
      },
    },
  },
});

[craigrushforth]

Thanks @eddeee888 for the really clear explanation and example. That does look like it would achieve what I'm after.

I don't think we're using Apollo currently. We're using https://graphql.org/graphql-js/ but I can look into if they have something similar or maybe look into switching to Apollo and trying it out.

Thanks again. Going to look into this tomorrow and see if I can get this working. 👍🏻

[maxcan]

Unfortunately, this needs to be done manually for every field of that type. It would be great if there was a code gen plugin that could automatically create these type policies for Apollo or urql

[craigrushforth]

I ended up switching to Apollo GraphQL and using "graphql-scalars" with a client-side schema (with lots of data removed to make it smaller). It has been working really well and I was able to get the exact results I wanted.

this kind of thing

const schema = buildClientSchema(introspectionResult as unknown as IntrospectionQuery);

export const customScalarsLink = withScalars({
  schema,
  typesMap: {
    // Convert Date to CalendarDate
    Date: {
      serialize: (parsed: unknown): string | null => {
        if (parsed === null) return null;

        if (parsed instanceof CalendarDate) {
          return parsed.toString();
        }

        throw new Error("Serialize Date expected to serialize a CalendarDate");
      },
      parseValue: (raw: unknown): CalendarDate | null => {
        if (raw === null) return null;

        if (isString(raw)) {
          const date = new CalendarDate(raw as string);
          if (date) return date;
        }

        throw new Error("Parse Date expected to parse a string");
      },
    },
    // Convert DateTime to Date
    DateTime: {
      serialize: (parsed: unknown): string | null => {
        if (parsed === null) return null;
        throw new Error(
          "Serialize DateTime we probably shouldn't be serializing DateTime. Check that we really need to do this."
        );
      },
      parseValue: (raw: unknown): Date | null => {
        if (!raw) return null;

        if (isString(raw)) {
          const date = new Date(raw as string);
          if (date) return date;
        }

        throw new Error("Parse DateTime expected to parse a string.");
      },
    },
  },
});

and then linked in this way

const createGraphqlClient = (accessToken: string) => {
  return new ApolloClient({
    link: ApolloLink.from([
      customScalarsLink,
      new HttpLink({
        uri: graphQLUrl,
        headers: {
          authorization: `Bearer ${accessToken}`,
        },
      }),
    ]),
    cache: new InMemoryCache(),
  });
};