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

query

Artifact size

8.2 KB

Operation text

873 B

What the browser sends

45 B + vars

1 · You write

src/components/consistency/ConsistencyDemo.tsx

query ConsistencyDemoQuery {
  viewer {
    ...AuthorName_user
    ...RenameForm_user
  }
  pinned: feed(first: 1) {
    edges {
      node {
        id
        ...HeroPost_post
        ...MiniLikes_post
      }
    }
  }
  feed(first: 5) {
    edges {
      node {
        id
        ...FeedRow_post
      }
    }
  }
}

2 · Types you import

ConsistencyDemoQuery.graphql.ts

export type ConsistencyDemoQuery$variables = Record<PropertyKey, never>;
export type ConsistencyDemoQuery$data = {
  readonly feed: {
    readonly edges: ReadonlyArray<{
      readonly node: {
        readonly id: string;
        readonly " $fragmentSpreads": FragmentRefs<"FeedRow_post">;
      } | null | undefined;
    } | null | undefined> | null | undefined;
  };
  readonly pinned: {
    readonly edges: ReadonlyArray<{
      readonly node: {
        readonly id: string;
        readonly " $fragmentSpreads": FragmentRefs<"HeroPost_post" | "MiniLikes_post">;
      } | null | undefined;
    } | null | undefined> | null | undefined;
  };
  readonly viewer: {
    readonly " $fragmentSpreads": FragmentRefs<"AuthorName_user" | "RenameForm_user">;
  };
};
export type ConsistencyDemoQuery = {
  response: ConsistencyDemoQuery$data;
  variables: ConsistencyDemoQuery$variables;
};

3 · Operation text, persisted at build time

md5 6d15116ccb6238c086fb598f3ce1c3e3

Fragments from every component are inlined into one document. It lives in persisted_queries.json on the server; the client only knows the hash.

query ConsistencyDemoQuery {
  viewer {
    ...AuthorName_user
    ...RenameForm_user
    id
  }
  pinned: feed(first: 1) {
    edges {
      node {
        id
        ...HeroPost_post
        ...MiniLikes_post
      }
    }
  }
  feed(first: 5) {
    edges {
      node {
        id
        ...FeedRow_post
      }
    }
  }
}

fragment AuthorName_user on User {
  name
  avatarColor
}

fragment FeedRow_post on Post {
  ...PostTitle_post
  ...LikeButton_post
  author {
    ...AuthorName_user
    id
  }
}

fragment HeroPost_post on Post {
  excerpt
  ...PostTitle_post
  ...LikeButton_post
  author {
    ...AuthorName_user
    id
  }
}

fragment LikeButton_post on Post {
  id
  likeCount
  viewerHasLiked
}

fragment MiniLikes_post on Post {
  likeCount
  viewerHasLiked
}

fragment PostTitle_post on Post {
  title
}

fragment RenameForm_user on User {
  id
  name
}

4 · 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<<33ae980e3b3d004256f77553272c7317>>
 * @relayHash 6d15116ccb6238c086fb598f3ce1c3e3
 * @lightSyntaxTransform
 */

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

// @relayRequestID 6d15116ccb6238c086fb598f3ce1c3e3

import { ConcreteRequest } from 'relay-runtime';
import { FragmentRefs } from "relay-runtime";
export type ConsistencyDemoQuery$variables = Record<PropertyKey, never>;
export type ConsistencyDemoQuery$data = {
  readonly feed: {
    readonly edges: ReadonlyArray<{
      readonly node: {
        readonly id: string;
        readonly " $fragmentSpreads": FragmentRefs<"FeedRow_post">;
      } | null | undefined;
    } | null | undefined> | null | undefined;
  };
  readonly pinned: {
    readonly edges: ReadonlyArray<{
      readonly node: {
        readonly id: string;
        readonly " $fragmentSpreads": FragmentRefs<"HeroPost_post" | "MiniLikes_post">;
      } | null | undefined;
    } | null | undefined> | null | undefined;
  };
  readonly viewer: {
    readonly " $fragmentSpreads": FragmentRefs<"AuthorName_user" | "RenameForm_user">;
  };
};
export type ConsistencyDemoQuery = {
  response: ConsistencyDemoQuery$data;
  variables: ConsistencyDemoQuery$variables;
};

const node: ConcreteRequest = (function(){
var v0 = [
  {
    "kind": "Literal",
    "name": "first",
    "value": 1
  }
],
v1 = {
  "alias": null,
  "args": null,
  "kind": "ScalarField",
  "name": "id",
  "storageKey": null
},
v2 = [
  {
    "kind": "Literal",
    "name": "first",
    "value": 5
  }
],
v3 = [
  {
    "alias": null,
    "args": null,
    "kind": "ScalarField",
    "name": "name",
    "storageKey": null
  },
  {
    "alias": null,
    "args": null,
    "kind": "ScalarField",
    "name": "avatarColor",
    "storageKey": null
  },
  (v1/*:: as any*/)
],
v4 = {
  "alias": null,
  "args": null,
  "kind": "ScalarField",
  "name": "title",
  "storageKey": null
},
v5 = {
  "alias": null,
  "args": null,
  "kind": "ScalarField",
  "name": "likeCount",
  "storageKey": null
},
v6 = {
  "alias": null,
  "args": null,
  "kind": "ScalarField",
  "name": "viewerHasLiked",
  "storageKey": null
},
v7 = {
  "alias": null,
  "args": null,
  "concreteType": "User",
  "kind": "LinkedField",
  "name": "author",
  "plural": false,
  "selections": (v3/*:: as any*/),
  "storageKey": null
};
return {
  "fragment": {
    "argumentDefinitions": [],
    "kind": "Fragment",
    "metadata": null,
    "name": "ConsistencyDemoQuery",
    "selections": [
      {
        "alias": null,
        "args": null,
        "concreteType": "User",
        "kind": "LinkedField",
        "name": "viewer",
        "plural": false,
        "selections": [
          {
            "args": null,
            "kind": "FragmentSpread",
            "name": "AuthorName_user"
          },
          {
            "args": null,
            "kind": "FragmentSpread",
            "name": "RenameForm_user"
          }
        ],
        "storageKey": null
      },
      {
        "alias": "pinned",
        "args": (v0/*:: as any*/),
        "concreteType": "PostConnection",
        "kind": "LinkedField",
        "name": "feed",
        "plural": false,
        "selections": [
          {
            "alias": null,
            "args": null,
            "concreteType": "PostEdge",
            "kind": "LinkedField",
            "name": "edges",
            "plural": true,
            "selections": [
              {
                "alias": null,
                "args": null,
                "concreteType": "Post",
                "kind": "LinkedField",
                "name": "node",
                "plural": false,
                "selections": [
                  (v1/*:: as any*/),
                  {
                    "args": null,
                    "kind": "FragmentSpread",
                    "name": "HeroPost_post"
                  },
                  {
                    "args": null,
                    "kind": "FragmentSpread",
                    "name": "MiniLikes_post"
                  }
                ],
                "storageKey": null
              }
            ],
            "storageKey": null
          }
        ],
        "storageKey": "feed(first:1)"
      },
      {
        "alias": null,
        "args": (v2/*:: as any*/),
        "concreteType": "PostConnection",
        "kind": "LinkedField",
        "name": "feed",
        "plural": false,
        "selections": [
          {
            "alias": null,
            "args": null,
            "concreteType": "PostEdge",
            "kind": "LinkedField",
            "name": "edges",
            "plural": true,
            "selections": [
              {
                "alias": null,
                "args": null,
                "concreteType": "Post",
                "kind": "LinkedField",
                "name": "node",
                "plural": false,
                "selections": [
                  (v1/*:: as any*/),
                  {
                    "args": null,
                    "kind": "FragmentSpread",
                    "name": "FeedRow_post"
                  }
                ],
                "storageKey": null
              }
            ],
            "storageKey": null
          }
        ],
        "storageKey": "feed(first:5)"
      }
    ],
    "type": "Query",
    "abstractKey": null
  },
  "kind": "Request",
  "operation": {
    "argumentDefinitions": [],
    "kind": "Operation",
    "name": "ConsistencyDemoQuery",
    "selections": [
      {
        "alias": null,
        "args": null,
        "concreteType": "User",
        "kind": "LinkedField",
        "name": "viewer",
        "plural": false,
        "selections": (v3/*:: as any*/),
        "storageKey": null
      },
      {
        "alias": "pinned",
        "args": (v0/*:: as any*/),
        "concreteType": "PostConnection",
        "kind": "LinkedField",
        "name": "feed",
        "plural": false,
        "selections": [
          {
            "alias": null,
            "args": null,
            "concreteType": "PostEdge",
            "kind": "LinkedField",
            "name": "edges",
            "plural": true,
            "selections": [
              {
                "alias": null,
                "args": null,
                "concreteType": "Post",
                "kind": "LinkedField",
                "name": "node",
                "plural": false,
                "selections": [
                  (v1/*:: as any*/),
                  {
                    "alias": null,
                    "args": null,
                    "kind": "ScalarField",
                    "name": "excerpt",
                    "storageKey": null
                  },
                  (v4/*:: as any*/),
                  (v5/*:: as any*/),
                  (v6/*:: as any*/),
                  (v7/*:: as any*/)
                ],
                "storageKey": null
              }
            ],
            "storageKey": null
          }
        ],
        "storageKey": "feed(first:1)"
      },
      {
        "alias": null,
        "args": (v2/*:: as any*/),
        "concreteType": "PostConnection",
        "kind": "LinkedField",
        "name": "feed",
        "plural": false,
        "selections": [
          {
            "alias": null,
            "args": null,
            "concreteType": "PostEdge",
            "kind": "LinkedField",
            "name": "edges",
            "plural": true,
            "selections": [
              {
                "alias": null,
                "args": null,
                "concreteType": "Post",
                "kind": "LinkedField",
                "name": "node",
                "plural": false,
                "selections": [
                  (v1/*:: as any*/),
                  (v4/*:: as any*/),
                  (v5/*:: as any*/),
                  (v6/*:: as any*/),
                  (v7/*:: as any*/)
                ],
                "storageKey": null
              }
            ],
            "storageKey": null
          }
        ],
        "storageKey": "feed(first:5)"
      }
    ]
  },
  "params": {
    "id": "6d15116ccb6238c086fb598f3ce1c3e3",
    "metadata": {},
    "name": "ConsistencyDemoQuery",
    "operationKind": "query",
    "text": null
  }
};
})();

(node as any).hash = "3d46d02859b4c06bfbd75fe51057055e";

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.