GraphQL fragments#

One of the scripts that builds and deploys datasette.io uses a GraphQL query to retrieve information from GitHub about the repositories used for the various Datasette tools and plugins.

That query was very big - over 4,000 lines long!

That’s because it was shaped like this:

1
{
2
  repo_0: repository(name: "datasette-query-history", owner: "bretwalker") {
3
    id
4
    nameWithOwner
5
    createdAt
6
    openGraphImageUrl
7
    usesCustomOpenGraphImage
8
    defaultBranchRef {
9
      target {
10
        oid
11
      }
12
    }
13
    repositoryTopics(first: 100) {
14
      totalCount
15
      nodes {
16
        topic {
17
          name
18
        }
19
      }
20
    }
21
    openIssueCount: issues(states: [OPEN]) {
22
      totalCount
23
    }
24
    closedIssueCount: issues(states: [CLOSED]) {
25
      totalCount
26
    }
27
    releases(last: 1) {
28
      totalCount
29
      nodes {
30
        tagName
31
      }
32
    }
33
  }
34
  # ...
35
  repo_137: repository(name: "yaml-to-sqlite", owner: "simonw") {
36
    id
37
    nameWithOwner
38
    createdAt
39
    openGraphImageUrl
40
    usesCustomOpenGraphImage
41
    defaultBranchRef {
42
      target {
43
        oid
44
      }
45
    }
46
    repositoryTopics(first: 100) {
47
      totalCount
48
      nodes {
49
        topic {
50
          name
51
        }
52
      }
53
    }
54
    openIssueCount: issues(states: [OPEN]) {
55
      totalCount
56
    }
57
    closedIssueCount: issues(states: [CLOSED]) {
58
      totalCount
59
    }
60
    releases(last: 1) {
61
      totalCount
62
      nodes {
63
        tagName
64
      }
65
    }
66
  }
67
}

That block was repeated for every repository - 138 in total!

I figured there was likely a way to do this more efficiently, and it turns out there is: GraphQL fragments.

Here’s that example query rewritten to use fragments instead:

1
fragment repoFields on Repository {
2
  id
3
  nameWithOwner
4
  createdAt
5
  openGraphImageUrl
6
  usesCustomOpenGraphImage
7
  defaultBranchRef {
8
    target {
9
      oid
10
    }
11
  }
12
  repositoryTopics(first: 100) {
13
    totalCount
14
    nodes {
15
      topic {
16
        name
17
      }
18
    }
19
  }
20
  openIssueCount: issues(states: [OPEN]) {
21
    totalCount
22
  }
23
  closedIssueCount: issues(states: [CLOSED]) {
24
    totalCount
25
  }
26
  releases(last: 1) {
27
    totalCount
28
    nodes {
29
      tagName
30
    }
31
  }
32
}
33
{
34
  repo_0: repository(name: "datasette-query-history", owner: "bretwalker") {
35
    ...repoFields
36
  }
37
  repo_137: repository(name: "yaml-to-sqlite", owner: "simonw") {
38
    ...repoFields
39
  }
40
}

Now each additional repo added to the query is only 3 extra lines of GraphQL, not 30!