Relay Parse Scalar

Parse scalars into complex objects (e.g. dates) and serialize them before executing a GraphQL network function.

Usage

Note: This README uses ISO8601DateTime as an example.

relay.config.json

1{
2  // ...
3  "customScalarTypes": {
4    "ISO8601DateTime": "Date"
5  }
6}

Relay setup

1// ...
2import RelayDefaultHandlerProvider from "relay-runtime/lib/handlers/RelayDefaultHandlerProvider";
3
4import {
5  configOption,
6  isParseScalarHandle,
7  parseScalarHandle,
8  serializeVariables
9} from "relay-transform-scalar"
10
11const config = [
12  configOption({
13    parse: (dateString) => typeof dateString === "string" ? parse(dateString) : null, // your parse logic here
14    parseType: "ISO8601DateTime",
15    serialize: (date) => date ? format(date) : null, // your serialization logic here
16    serializeTest: (value) => value instanceof Date // test if this config option should be used for serialization
17  })
18]
19
20function handlerProvider(handle: string) {
21    if (isParseScalarHandle(handle)) return parseScalarHandle(config)
22    // ...
23    return RelayDefaultHandlerProvider(handle);
24}
25
26export const fetchFn = async (request: RequestParameters, variables: Variables) => {
27    const body = {
28       // ...
29       variables: serializeVariables(variables, config)
30    }
31
32    // ...
33
34    return resp.json()
35}
36
37const createNetwork = () =>  {
38  const fetchResponse = async(/* ... */) => {
39
40    // ...
41
42    return fetchFn(params, variables)
43  }
44
45  return Network.create(fetchResponse, subscriptionHandler)
46}

Marking fields for parsing

Right now you have to insert this GraphQL directive for every field of type ISO8601DateTime otherwise your typescript types will be wrong (the field would be of type Date but at runtime it really is a string because no transformation happened).

1// ...
2
3graphql\`
4  fragment Something on SomeType {
5    someField @__clientField(handle: "parseScalar(ISO8601DateTime)")
6  }
7\`

How it works

1. Using the above relay config the compiler inserts types for fields which are of the ISO8601DateTime type. Any time a variable or field has the ISO8601DateTime GraphQL type the generated type will be Date.

2. The relay environment is configured to do two things:

• Whenever a field with the parse directive is encountered, it receives a handler for that field which parses the field according to your config and sets it on the record (in a hack-ish way though).

• Whenever a GraphQL network function is called (in the example from above via fetch) the variables are serialized.