1 - schema.graphql

scalar Date

type Query {
  badge: Badge!
}

type Badge {
  key: BadgeKey!
  text: String!
  history: BadgeHistoryConnection!
}

enum BadgeKey {
  DRAFTING
  REVIEWING
  COMPLETE
  ARCHIVED
}

type BadgeHistoryConnection {
  edges: [BadgeHistoryEdge!]!
}

type BadgeHistoryEdge {
  node: Badge!
  timestamp: Date!
}

2 - Badge.tsx

import React from "react";
import { graphql, useFragment, useLazyLoadQuery } from "react-relay/hooks";

import { BadgeQuery } from "./__generated__/BadgeQuery.graphql";
import {
  BadgeView_badge$key,
  BadgeKey,
} from "./__generated__/BadgeView_badge.graphql";
import { BadgeHistory_badge$key } from "./__generated__/BadgeHistory_badge.graphql";

const BadgeHistory: React.FC<{ badge: BadgeHistory_badge$key }> = (props) => {
  const badge = useFragment(
    graphql`
      fragment BadgeHistory_badge on Badge {
        history {
          edges {
            node {
              text
            }
            timestamp
          }
        }
      }
    `,
    props.badge
  );
  return (
    <ul>
      {badge.history.edges.map((edge) => {
        return (
          <li>
            {edge.timestamp}: {edge.node.text}
          </li>
        );
      })}
    </ul>
  );
};

const getBadgeColor = (key: BadgeKey) => {
  if (key === "COMPLETE") {
    return "green";
  } else {
    return "blue";
  }
};

const BadgeView: React.FC<{ badge: BadgeView_badge$key }> = (props) => {
  const badge = useFragment(
    graphql`
      fragment BadgeView_badge on Badge {
        key
        text
        ...BadgeHistory_badge
      }
    `,
    props.badge
  );
  return (
    <div style={{ backgroundColor: getBadgeColor(badge.key) }}>
      Current: {badge.text}
      <BadgeHistory badge={badge} />
    </div>
  );
};

// Imagine this being a GraphQL subscription, which would cause Relay to update
// the data in its store whenever Fluid data changes. Relay automatically
// re-renders only those components that have selected data that was updated.
const Badge: React.FC = () => {
  const data = useLazyLoadQuery<BadgeQuery>(
    graphql`
      query BadgeQuery {
        badge {
          ...BadgeView_badge
        }
      }
    `,
    {}
  );
  return <BadgeView badge={data.badge} />;
};

3 - __generated__%2FBadgeHistory_badge.graphql.ts

/* tslint:disable */
/* eslint-disable */

import { ReaderFragment } from "relay-runtime";
import { FragmentRefs } from "relay-runtime";
export type BadgeHistory_badge = {
    readonly history: {
        readonly edges: ReadonlyArray<{
            readonly node: {
                readonly text: string;
            };
            readonly timestamp: unknown;
        }>;
    };
    readonly " $refType": "BadgeHistory_badge";
};
export type BadgeHistory_badge$data = BadgeHistory_badge;
export type BadgeHistory_badge$key = {
    readonly " $data"?: BadgeHistory_badge$data;
    readonly " $fragmentRefs": FragmentRefs<"BadgeHistory_badge">;
};



const node: ReaderFragment = {
  "argumentDefinitions": [],
  "kind": "Fragment",
  "metadata": null,
  "name": "BadgeHistory_badge",
  "selections": [
    {
      "alias": null,
      "args": null,
      "concreteType": "BadgeHistoryConnection",
      "kind": "LinkedField",
      "name": "history",
      "plural": false,
      "selections": [
        {
          "alias": null,
          "args": null,
          "concreteType": "BadgeHistoryEdge",
          "kind": "LinkedField",
          "name": "edges",
          "plural": true,
          "selections": [
            {
              "alias": null,
              "args": null,
              "concreteType": "Badge",
              "kind": "LinkedField",
              "name": "node",
              "plural": false,
              "selections": [
                {
                  "alias": null,
                  "args": null,
                  "kind": "ScalarField",
                  "name": "text",
                  "storageKey": null
                }
              ],
              "storageKey": null
            },
            {
              "alias": null,
              "args": null,
              "kind": "ScalarField",
              "name": "timestamp",
              "storageKey": null
            }
          ],
          "storageKey": null
        }
      ],
      "storageKey": null
    }
  ],
  "type": "Badge"
};
(node as any).hash = '9ef235b4ca217de0eddfb4000f0bc943';
export default node;

4 - __generated__%2FBadgeView_badge.graphql.ts

/* tslint:disable */
/* eslint-disable */

import { ReaderFragment } from "relay-runtime";
import { FragmentRefs } from "relay-runtime";
export type BadgeKey = "ARCHIVED" | "COMPLETE" | "DRAFTING" | "REVIEWING" | "%future added value";
export type BadgeView_badge = {
    readonly key: BadgeKey;
    readonly text: string;
    readonly " $fragmentRefs": FragmentRefs<"BadgeHistory_badge">;
    readonly " $refType": "BadgeView_badge";
};
export type BadgeView_badge$data = BadgeView_badge;
export type BadgeView_badge$key = {
    readonly " $data"?: BadgeView_badge$data;
    readonly " $fragmentRefs": FragmentRefs<"BadgeView_badge">;
};



const node: ReaderFragment = {
  "argumentDefinitions": [],
  "kind": "Fragment",
  "metadata": null,
  "name": "BadgeView_badge",
  "selections": [
    {
      "alias": null,
      "args": null,
      "kind": "ScalarField",
      "name": "key",
      "storageKey": null
    },
    {
      "alias": null,
      "args": null,
      "kind": "ScalarField",
      "name": "text",
      "storageKey": null
    },
    {
      "args": null,
      "kind": "FragmentSpread",
      "name": "BadgeHistory_badge"
    }
  ],
  "type": "Badge"
};
(node as any).hash = '741f7874765be911b619286232235f11';
export default node;

5 - __generated__%2FBadgeQuery.graphql.ts

/* tslint:disable */
/* eslint-disable */

import { ConcreteRequest } from "relay-runtime";
import { FragmentRefs } from "relay-runtime";
export type BadgeQueryVariables = {};
export type BadgeQueryResponse = {
    readonly badge: {
        readonly " $fragmentRefs": FragmentRefs<"BadgeView_badge">;
    };
};
export type BadgeQuery = {
    readonly response: BadgeQueryResponse;
    readonly variables: BadgeQueryVariables;
};



/*
query BadgeQuery {
  badge {
    ...BadgeView_badge
  }
}

fragment BadgeHistory_badge on Badge {
  history {
    edges {
      node {
        text
      }
      timestamp
    }
  }
}

fragment BadgeView_badge on Badge {
  key
  text
  ...BadgeHistory_badge
}
*/

const node: ConcreteRequest = (function(){
var v0 = {
  "alias": null,
  "args": null,
  "kind": "ScalarField",
  "name": "text",
  "storageKey": null
};
return {
  "fragment": {
    "argumentDefinitions": [],
    "kind": "Fragment",
    "metadata": null,
    "name": "BadgeQuery",
    "selections": [
      {
        "alias": null,
        "args": null,
        "concreteType": "Badge",
        "kind": "LinkedField",
        "name": "badge",
        "plural": false,
        "selections": [
          {
            "args": null,
            "kind": "FragmentSpread",
            "name": "BadgeView_badge"
          }
        ],
        "storageKey": null
      }
    ],
    "type": "Query"
  },
  "kind": "Request",
  "operation": {
    "argumentDefinitions": [],
    "kind": "Operation",
    "name": "BadgeQuery",
    "selections": [
      {
        "alias": null,
        "args": null,
        "concreteType": "Badge",
        "kind": "LinkedField",
        "name": "badge",
        "plural": false,
        "selections": [
          {
            "alias": null,
            "args": null,
            "kind": "ScalarField",
            "name": "key",
            "storageKey": null
          },
          (v0/*: any*/),
          {
            "alias": null,
            "args": null,
            "concreteType": "BadgeHistoryConnection",
            "kind": "LinkedField",
            "name": "history",
            "plural": false,
            "selections": [
              {
                "alias": null,
                "args": null,
                "concreteType": "BadgeHistoryEdge",
                "kind": "LinkedField",
                "name": "edges",
                "plural": true,
                "selections": [
                  {
                    "alias": null,
                    "args": null,
                    "concreteType": "Badge",
                    "kind": "LinkedField",
                    "name": "node",
                    "plural": false,
                    "selections": [
                      (v0/*: any*/)
                    ],
                    "storageKey": null
                  },
                  {
                    "alias": null,
                    "args": null,
                    "kind": "ScalarField",
                    "name": "timestamp",
                    "storageKey": null
                  }
                ],
                "storageKey": null
              }
            ],
            "storageKey": null
          }
        ],
        "storageKey": null
      }
    ]
  },
  "params": {
    "id": null,
    "metadata": {},
    "name": "BadgeQuery",
    "operationKind": "query",
    "text": "query BadgeQuery {\n  badge {\n    ...BadgeView_badge\n  }\n}\n\nfragment BadgeHistory_badge on Badge {\n  history {\n    edges {\n      node {\n        text\n      }\n      timestamp\n    }\n  }\n}\n\nfragment BadgeView_badge on Badge {\n  key\n  text\n  ...BadgeHistory_badge\n}\n"
  }
};
})();
(node as any).hash = '9534c01eb4da55a1ef5788b488b5f312';
export default node;