feat(core): generate TypeScript types from the GraphQL queries

.github/CONTRIBUTING.md

@@ -31,6 +31,19 @@ pnpm --filter ./packages/core/ run test:update:snapshot
 pnpm --filter ./apps/backend/ run test:update:snapshot
 ```
 
+## GraphQL Queries
+
+The GraphQL queries live in `packages/core/src/graphql/queries/*.graphql`,
+and their TypeScript types are generated from GitHub's published schema into `packages/core/src/graphql/generated/`.
+Those generated files are committed, so if you change a query, regenerate them and include the result in your PR:
+
+```bash
+pnpm --filter ./packages/core/ run generate-graphql-types
+```
+
+CI runs `pnpm --filter ./packages/core/ run check-graphql-types`, which fails if the committed types no longer match the queries.
+Never edit the generated files by hand — change the `.graphql` file and regenerate.
+
 ## Themes Contribution
 
 We have stopped the addition of new themes to decrease maintenance efforts. If you are considering contributing your theme just because you are using it personally, then instead of adding it to our theme collection, you can use card [customization options](../docs/advanced_documentation.md#customization).

.github/dependabot.yml

@@ -57,6 +57,11 @@ updates:
         patterns:
           - "axios"
           - "axios-*"
+      graphql:
+        patterns:
+          - "graphql"
+          - "@graphql-codegen/*"
+          - "@octokit/graphql-schema"
 
   # Maintain dependencies for GitHub Actions
   - package-ecosystem: github-actions

.github/workflows/ci.yml

@@ -129,5 +129,8 @@ jobs:
       - name: Lint (deduped deps)
         run: pnpm run lint:deps
 
+      - name: Lint (generated GraphQL types)
+        run: pnpm --filter ./packages/core/ run check-graphql-types
+
       - name: Typecheck
         run: pnpm run typecheck

apps/backend/tests/e2e/e2e.test.js

@@ -201,7 +201,7 @@ beforeAll(async () => {
       return [200, STATS_MOCK_RESPONSE];
     }
 
-    if (query.includes("query userInfo") && variables?.login === USER) {
+    if (query.includes("query topLanguages") && variables?.login === USER) {
       return [200, TOP_LANGS_MOCK_RESPONSE];
     }
 

apps/backend/tests/public-instance/__snapshots__/api.test.js.snap

@@ -699,7 +699,7 @@ exports[`Test /api contract > should match the public many-params response snaps
 
         </g>
       </svg>",
-  "graphqlRequest": "{"query":"\\n  query userInfo($login: String!, $after: String, $includeMergedPullRequests: Boolean!, $includeDiscussions: Boolean!, $includeDiscussionsAnswers: Boolean!, $startTime: DateTime = null, $ownerAffiliations: [RepositoryAffiliation]) {\\n    user(login: $login) {\\n      name\\n      login\\n      commits: contributionsCollection (from: $startTime) {\\n        totalCommitContributions,\\n      }\\n      reviews: contributionsCollection {\\n        totalPullRequestReviewContributions\\n      }\\n      repositoriesContributedTo(first: 1, contributionTypes: [COMMIT, ISSUE, PULL_REQUEST, REPOSITORY]) {\\n        totalCount\\n      }\\n      pullRequests(first: 1) {\\n        totalCount\\n      }\\n      mergedPullRequests: pullRequests(states: MERGED) @include(if: $includeMergedPullRequests) {\\n        totalCount\\n      }\\n      openIssues: issues(states: OPEN) {\\n        totalCount\\n      }\\n      closedIssues: issues(states: CLOSED) {\\n        totalCount\\n      }\\n      followers {\\n        totalCount\\n      }\\n      repositoryDiscussions @include(if: $includeDiscussions) {\\n        totalCount\\n      }\\n      repositoryDiscussionComments(onlyAnswers: true) @include(if: $includeDiscussionsAnswers) {\\n        totalCount\\n      }\\n      \\n  repositories(first: 100, after: $after, ownerAffiliations: $ownerAffiliations, orderBy: {direction: DESC, field: STARGAZERS}) {\\n    totalCount\\n    nodes {\\n      name\\n      stargazerCount\\n    }\\n    pageInfo {\\n      hasNextPage\\n      endCursor\\n    }\\n  }\\n\\n    }\\n  }\\n","variables":{"login":"anuraghazra","first":100,"after":null,"includeMergedPullRequests":true,"includeDiscussions":true,"includeDiscussionsAnswers":true,"startTime":"2024-01-01T00:00:00Z","ownerAffiliations":["OWNER","COLLABORATOR"]}}",
+  "graphqlRequest": "{"query":"\\nquery userInfo($login: String!, $after: String, $includeMergedPullRequests: Boolean!, $includeDiscussions: Boolean!, $includeDiscussionsAnswers: Boolean!, $startTime: DateTime = null, $ownerAffiliations: [RepositoryAffiliation]) {\\n  user(login: $login) {\\n    name\\n    login\\n    commits: contributionsCollection(from: $startTime) {\\n      totalCommitContributions\\n    }\\n    reviews: contributionsCollection {\\n      totalPullRequestReviewContributions\\n    }\\n    repositoriesContributedTo(\\n      first: 1\\n      contributionTypes: [COMMIT, ISSUE, PULL_REQUEST, REPOSITORY]\\n    ) {\\n      totalCount\\n    }\\n    pullRequests(first: 1) {\\n      totalCount\\n    }\\n    mergedPullRequests: pullRequests(states: MERGED) @include(if: $includeMergedPullRequests) {\\n      totalCount\\n    }\\n    openIssues: issues(states: OPEN) {\\n      totalCount\\n    }\\n    closedIssues: issues(states: CLOSED) {\\n      totalCount\\n    }\\n    followers {\\n      totalCount\\n    }\\n    repositoryDiscussions @include(if: $includeDiscussions) {\\n      totalCount\\n    }\\n    repositoryDiscussionComments(onlyAnswers: true) @include(if: $includeDiscussionsAnswers) {\\n      totalCount\\n    }\\n    ...RepoStars\\n  }\\n}\\nfragment RepoStars on User {\\n  repositories(\\n    first: 100\\n    after: $after\\n    ownerAffiliations: $ownerAffiliations\\n    orderBy: {direction: DESC, field: STARGAZERS}\\n  ) {\\n    totalCount\\n    nodes {\\n      ...RepoNode\\n    }\\n    pageInfo {\\n      hasNextPage\\n      endCursor\\n    }\\n  }\\n}\\nfragment RepoNode on Repository {\\n  name\\n  stargazerCount\\n}","variables":{"login":"anuraghazra","after":null,"includeMergedPullRequests":true,"includeDiscussions":true,"includeDiscussionsAnswers":true,"startTime":"2024-01-01T00:00:00Z","ownerAffiliations":["OWNER","COLLABORATOR"]}}",
   "headers": [
     [
       "Cache-Control",

apps/backend/tests/public-instance/__snapshots__/gist.test.js.snap

@@ -239,7 +239,7 @@ exports[`Test /api/gist contract > should match the public many-params response
 
         </g>
       </svg>",
-  "graphqlRequest": "{"query":"\\nquery gistInfo($gistName: String!) {\\n    viewer {\\n        gist(name: $gistName) {\\n            description\\n            owner {\\n                login\\n            }\\n            stargazerCount\\n            forks {\\n                totalCount\\n            }\\n            files {\\n                name\\n                language {\\n                    name\\n                }\\n                size\\n            }\\n        }\\n    }\\n}\\n","variables":{"gistName":"happy-gist-id"}}",
+  "graphqlRequest": "{"query":"\\nquery gistInfo($gistName: String!) {\\n  viewer {\\n    gist(name: $gistName) {\\n      description\\n      owner {\\n        login\\n      }\\n      stargazerCount\\n      forks {\\n        totalCount\\n      }\\n      files {\\n        ...GistFileInfo\\n      }\\n    }\\n  }\\n}\\nfragment GistFileInfo on GistFile {\\n  name\\n  language {\\n    name\\n  }\\n  size\\n}","variables":{"gistName":"happy-gist-id"}}",
   "headers": [
     [
       "Cache-Control",

apps/backend/tests/public-instance/__snapshots__/pin.test.js.snap

@@ -504,7 +504,7 @@ exports[`Test /api/pin contract > should match the public many-params response s
 
         </g>
       </svg>",
-  "graphqlRequest": "{"query":"\\n      fragment RepoInfo on Repository {\\n        name\\n        nameWithOwner\\n        isPrivate\\n        isArchived\\n        isTemplate\\n        stargazerCount\\n        description\\n        primaryLanguage {\\n          color\\n          id\\n          name\\n        }\\n        forkCount\\n      }\\n      query getRepo($login: String!, $repo: String!) {\\n        user(login: $login) {\\n          repository(name: $repo) {\\n            ...RepoInfo\\n          }\\n        }\\n        organization(login: $login) {\\n          repository(name: $repo) {\\n            ...RepoInfo\\n          }\\n        }\\n      }\\n    ","variables":{"login":"anuraghazra","repo":"convoychat"}}",
+  "graphqlRequest": "{"query":"\\nquery getRepo($login: String!, $repo: String!) {\\n  user(login: $login) {\\n    repository(name: $repo) {\\n      ...RepoInfo\\n    }\\n  }\\n  organization(login: $login) {\\n    repository(name: $repo) {\\n      ...RepoInfo\\n    }\\n  }\\n}\\nfragment RepoInfo on Repository {\\n  name\\n  nameWithOwner\\n  isPrivate\\n  isArchived\\n  isTemplate\\n  stargazerCount\\n  description\\n  primaryLanguage {\\n    color\\n    id\\n    name\\n  }\\n  forkCount\\n}","variables":{"login":"anuraghazra","repo":"convoychat"}}",
   "headers": [
     [
       "Cache-Control",

apps/backend/tests/public-instance/__snapshots__/top-langs.test.js.snap

@@ -412,7 +412,7 @@ exports[`Test /api/top-langs contract > should match the public many-params resp
 
         </g>
       </svg>",
-  "graphqlRequest": "{"query":"\\n      query userInfo($login: String!, $ownerAffiliations: [RepositoryAffiliation]) {\\n        user(login: $login) {\\n          # do not fetch forks\\n          repositories(ownerAffiliations: $ownerAffiliations, isFork: false, first: 100) {\\n            nodes {\\n              name\\n              languages(first: 10, orderBy: {field: SIZE, direction: DESC}) {\\n                edges {\\n                  size\\n                  node {\\n                    color\\n                    name\\n                  }\\n                }\\n              }\\n            }\\n          }\\n        }\\n      }\\n      ","variables":{"login":"anuraghazra","ownerAffiliations":["OWNER","COLLABORATOR"]}}",
+  "graphqlRequest": "{"query":"\\nquery topLanguages($login: String!, $ownerAffiliations: [RepositoryAffiliation]) {\\n  user(login: $login) {\\n    repositories(ownerAffiliations: $ownerAffiliations, isFork: false, first: 100) {\\n      nodes {\\n        ...TopLanguagesRepository\\n      }\\n    }\\n  }\\n}\\nfragment TopLanguagesRepository on Repository {\\n  name\\n  languages(first: 10, orderBy: {field: SIZE, direction: DESC}) {\\n    edges {\\n      ...TopLanguage\\n    }\\n  }\\n}\\nfragment TopLanguage on LanguageEdge {\\n  size\\n  node {\\n    color\\n    name\\n  }\\n}","variables":{"login":"anuraghazra","ownerAffiliations":["OWNER","COLLABORATOR"]}}",
   "headers": [
     [
       "Cache-Control",

apps/frontend/src/axios-override.ts

@@ -88,37 +88,31 @@ axios.defaults.adapter = async (config) => {
 
   if (
     config.url === "https://api.github.com/graphql" &&
-    params.query?.includes(
-      "query userInfo($login: String!, $after: String, $includeMergedPullRequests:",
-    ) &&
+    params.query?.includes("query userInfo(") &&
     params.variables?.login === DEMO_USER
   ) {
     return createMockResponse(userStats, config);
   }
 
   if (
     config.url === "https://api.github.com/graphql" &&
-    params.query?.includes(
-      "query userInfo($login: String!, $after: String, $ownerAffiliations:",
-    ) &&
+    params.query?.includes("query userRepos(") &&
     params.variables?.login === DEMO_USER
   ) {
     return createMockResponse(additionalUserStars, config);
   }
 
   if (
     config.url === "https://api.github.com/graphql" &&
-    params.query?.includes(
-      "query userInfo($login: String!, $ownerAffiliations:",
-    ) &&
+    params.query?.includes("query topLanguages(") &&
     params.variables?.login === DEMO_USER
   ) {
     return createMockResponse(topLanguages, config);
   }
 
   if (
     config.url === "https://api.github.com/graphql" &&
-    params.query?.includes("fragment RepoInfo on Repository {") &&
+    params.query?.includes("query getRepo(") &&
     params.variables &&
     params.variables.login === DEMO_REPO.split("/")[0] &&
     params.variables.repo === DEMO_REPO.split("/")[1]

eslint.config.js

@@ -17,6 +17,10 @@ const gitignorePath = fileURLToPath(new URL(".gitignore", import.meta.url));
 
 export default defineConfig(
   includeIgnoreFile(gitignorePath, "Imported .gitignore patterns"),
+  {
+    name: "Generated GraphQL types",
+    ignores: ["packages/core/src/graphql/generated/**"],
+  },
   js.configs.recommended,
 
   {

knip.jsonc

@@ -4,6 +4,10 @@
     "entry": ["tests/**/*.{test,test-d,bench}.{js,ts}"]
   },
   "workspaces": {
+    "packages/core": {
+      // generated by scripts/generate-graphql-types.js
+      "ignore": ["src/graphql/generated/**"]
+    },
     "apps/backend": {
       "entry": ["api-renamed/*.js", "express.js"]
     },

packages/core/package.json

@@ -75,14 +75,21 @@
     "bench": "vitest bench --run --config vitest.config.bench.ts",
     "lint": "eslint",
     "typecheck": "tsc -p tsconfig.typecheck.json",
+    "generate-graphql-types": "node scripts/generate-graphql-types",
+    "check-graphql-types": "node scripts/generate-graphql-types --check",
     "generate-theme-readme": "node scripts/generate-theme-readme",
     "generate-language-colors": "node scripts/generate-language-colors"
   },
   "devDependencies": {
+    "@graphql-codegen/core": "6.2.0",
+    "@graphql-codegen/typescript": "6.1.0",
+    "@graphql-codegen/typescript-operations": "6.1.2",
+    "@octokit/graphql-schema": "15.26.1",
     "@testing-library/dom": "10.4.1",
     "@testing-library/jest-dom": "6.9.1",
     "@uppercod/css-to-object": "1.1.1",
     "axios-mock-adapter": "2.1.0",
+    "graphql": "16.11.0",
     "js-yaml": "5.2.1",
     "jsdom": "catalog:default",
     "vitest": "catalog:default"