The compiler does the work before your app runs

relay-compiler reads every graphql tag in the project, validates it against schema.graphql, and writes an artifact per fragment and operation: a precomputed runtime AST, TypeScript types, and (here) a persisted query id. Pick any artifact this app generated.

Kind

fragment

Artifact size

3.1 KB

Operation text

—

What the browser sends

—

1 · You write

src/components/colocation/PostCard.tsx

fragment PostCard_post on Post {
  title
  excerpt
  author {
    ...AuthorLine_user
  }
  ...LikeBar_post
  comments(first: 2) {
    edges {
      node {
        id
        ...CommentItem_comment
      }
    }
  }
}

2 · Types you import

PostCard_post.graphql.ts

export type PostCard_post$data = {
  readonly author: {
    readonly " $fragmentSpreads": FragmentRefs<"AuthorLine_user">;
  };
  readonly comments: {
    readonly edges: ReadonlyArray<{
      readonly node: {
        readonly id: string;
        readonly " $fragmentSpreads": FragmentRefs<"CommentItem_comment">;
      } | null | undefined;
    } | null | undefined> | null | undefined;
  };
  readonly excerpt: string;
  readonly title: string;
  readonly " $fragmentSpreads": FragmentRefs<"LikeBar_post">;
  readonly " $fragmentType": "PostCard_post";
};
export type PostCard_post$key = {
  readonly " $data"?: PostCard_post$data;
  readonly " $fragmentSpreads": FragmentRefs<"PostCard_post">;
};

3 · Runtime artifact

imported in place of the graphql`` tag

A preprocessed AST, so there's no GraphQL parsing in the browser. The reader part tells useFragment what to read; the normalization part tells the store how to write.

/**
 * @generated SignedSource<<fef90373f54ca7d8bc5a960019c597f8>>
 * @lightSyntaxTransform
 */

/* tslint:disable */
/* eslint-disable */
// @ts-nocheck

import { ReaderFragment } from 'relay-runtime';
import { FragmentRefs } from "relay-runtime";
export type PostCard_post$data = {
  readonly author: {
    readonly " $fragmentSpreads": FragmentRefs<"AuthorLine_user">;
  };
  readonly comments: {
    readonly edges: ReadonlyArray<{
      readonly node: {
        readonly id: string;
        readonly " $fragmentSpreads": FragmentRefs<"CommentItem_comment">;
      } | null | undefined;
    } | null | undefined> | null | undefined;
  };
  readonly excerpt: string;
  readonly title: string;
  readonly " $fragmentSpreads": FragmentRefs<"LikeBar_post">;
  readonly " $fragmentType": "PostCard_post";
};
export type PostCard_post$key = {
  readonly " $data"?: PostCard_post$data;
  readonly " $fragmentSpreads": FragmentRefs<"PostCard_post">;
};

const node: ReaderFragment = {
  "argumentDefinitions": [],
  "kind": "Fragment",
  "metadata": null,
  "name": "PostCard_post",
  "selections": [
    {
      "alias": null,
      "args": null,
      "kind": "ScalarField",
      "name": "title",
      "storageKey": null
    },
    {
      "alias": null,
      "args": null,
      "kind": "ScalarField",
      "name": "excerpt",
      "storageKey": null
    },
    {
      "alias": null,
      "args": null,
      "concreteType": "User",
      "kind": "LinkedField",
      "name": "author",
      "plural": false,
      "selections": [
        {
          "args": null,
          "kind": "FragmentSpread",
          "name": "AuthorLine_user"
        }
      ],
      "storageKey": null
    },
    {
      "args": null,
      "kind": "FragmentSpread",
      "name": "LikeBar_post"
    },
    {
      "alias": null,
      "args": [
        {
          "kind": "Literal",
          "name": "first",
          "value": 2
        }
      ],
      "concreteType": "CommentConnection",
      "kind": "LinkedField",
      "name": "comments",
      "plural": false,
      "selections": [
        {
          "alias": null,
          "args": null,
          "concreteType": "CommentEdge",
          "kind": "LinkedField",
          "name": "edges",
          "plural": true,
          "selections": [
            {
              "alias": null,
              "args": null,
              "concreteType": "Comment",
              "kind": "LinkedField",
              "name": "node",
              "plural": false,
              "selections": [
                {
                  "alias": null,
                  "args": null,
                  "kind": "ScalarField",
                  "name": "id",
                  "storageKey": null
                },
                {
                  "args": null,
                  "kind": "FragmentSpread",
                  "name": "CommentItem_comment"
                }
              ],
              "storageKey": null
            }
          ],
          "storageKey": null
        }
      ],
      "storageKey": "comments(first:2)"
    }
  ],
  "type": "Post",
  "abstractKey": null
};

(node as any).hash = "c27d68733019753415d48a16d31327f8";

export default node;

why it mattersA typo in a field name fails the build, not the user's session. Every fragment is checked against the schema on every save.
why it mattersTypes come from the fragment rather than the whole schema, so a component's data type has exactly the fields it asked for.
why it mattersPersisted queries ship for free: smaller requests, cacheable GETs, and a server that can refuse any query it didn't compile.