Skip to content

Integrate graphql-codegen to generate GraphQL types #2155

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 21 commits into from
Sep 2, 2025
+4,028 −295
Merged

Integrate graphql-codegen to generate GraphQL types #2155

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
5a21617
configure graphql-codegen
rudransh-shrivastava Aug 29, 2025
8402bf6
refactor query names to be unique
rudransh-shrivastava Aug 29, 2025
9a3a5e8
Update code (sort alphabetically)
rudransh-shrivastava Aug 29, 2025
441e25c
ignore graphql-codegen generated files
rudransh-shrivastava Aug 29, 2025
5c8b6e1
Run graphql-codegen
rudransh-shrivastava Aug 29, 2025
55f86cc
remove fetchCsrfTokenServer and use a config constructor
rudransh-shrivastava Aug 29, 2025
0e7055d
Update code
rudransh-shrivastava Aug 30, 2025
dd5d2fe
use near-operation-file-preset
rudransh-shrivastava Aug 30, 2025
1fc0818
use typed-document-node plugin
rudransh-shrivastava Aug 30, 2025
09b8ca5
Update code (sort alphabetically)
rudransh-shrivastava Aug 30, 2025
a239467
Update code
rudransh-shrivastava Aug 30, 2025
d71e394
add graphql-codegen generated types to end-of-file-fixer
rudransh-shrivastava Aug 30, 2025
7bb3bc6
add hook for graphql-codegen for schema validation
rudransh-shrivastava Aug 31, 2025
f15fe68
Update code
rudransh-shrivastava Aug 31, 2025
e17d036
Merge branch 'main' into feature/integrate-graphql-codegen
rudransh-shrivastava Aug 31, 2025
cb90877
skip graphql-codegen pre-commit hook
rudransh-shrivastava Aug 31, 2025
bcf8d26
add graphql-codegen
rudransh-shrivastava Aug 31, 2025
4babd73
Merge branch 'main' into feature/integrate-graphql-codegen
arkid15r Sep 2, 2025
f1c7653
add generate-graphql-types to make check
rudransh-shrivastava Sep 2, 2025
3316cce
run make check
rudransh-shrivastava Sep 2, 2025
6bb7ed0
Update code
arkid15r Sep 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions frontend/.prettierignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
.pnpm-store/
pnpm-lock.yaml
src/types/__generated__/
11 changes: 10 additions & 1 deletion frontend/eslint.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,16 @@ const eslintConfig = [
...compat.extends('next/typescript'),
react.configs.flat['jsx-runtime'],
{
ignores: ['.cache', '.next', '.pnpm-store', 'node_modules', 'build', 'dist', 'next-env.d.ts'],
ignores: [
'.cache',
'.next',
'.pnpm-store',
'node_modules',
'build',
'dist',
'next-env.d.ts',
'src/types/__generated__',
],
},
js.configs.recommended,
{
Expand Down
52 changes: 52 additions & 0 deletions frontend/graphql-codegen.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import { CodegenConfig } from '@graphql-codegen/cli'

const PUBLIC_API_URL = process.env.PUBLIC_API_URL || 'http://localhost:8000'

const createCodegenConfig = async (): Promise<CodegenConfig> => {
const response = await fetch(`${PUBLIC_API_URL}/csrf/`, {
credentials: 'include',
method: 'GET',
})

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Add timeout; drop ineffective credentials: 'include'.

Node’s fetch has no cookie jar; credentials is no-op here. Add an AbortController to avoid hanging if /csrf/ is slow/down.

-  const response = await fetch(`${PUBLIC_API_URL}/csrf/`, {
-    credentials: 'include',
-    method: 'GET',
-  })
+  const controller = new AbortController()
+  const timeout = setTimeout(() => controller.abort(), 5000)
+  const response = await fetch(`${PUBLIC_API_URL}/csrf/`, {
+    method: 'GET',
+    signal: controller.signal,
+  })
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const createCodegenConfig = async (): Promise<CodegenConfig> => {
const response = await fetch(`${PUBLIC_API_URL}/csrf/`, {
credentials: 'include',
method: 'GET',
})
const createCodegenConfig = async (): Promise<CodegenConfig> => {
const controller = new AbortController()
const timeout = setTimeout(() => controller.abort(), 5000)
const response = await fetch(`${PUBLIC_API_URL}/csrf/`, {
method: 'GET',
signal: controller.signal,
})
🤖 Prompt for AI Agents 
In frontend/graphql-codegen.ts around lines 5 to 10, the fetch call to
`${PUBLIC_API_URL}/csrf/` incorrectly includes credentials: 'include' (no-op in
Node) and lacks a timeout, risking hanging; remove the credentials option,
create an AbortController, pass its signal to fetch, set a short timeout (e.g.,
5s) that calls controller.abort(), and ensure you clear the timeout after fetch
completes and properly catch/handle the abort error so the function fails fast
when /csrf/ is slow or down.

if (!response.ok) {
throw new Error(`Failed to fetch CSRF token: ${response.status} ${response.statusText}`)
}
const data = await response.json()
const csrfToken = data.csrftoken

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Harden CSRF extraction and clear timeout.

Be resilient to different payload shapes and fall back to Set-Cookie. Fail fast if still missing.

-  if (!response.ok) {
+  clearTimeout(timeout)
+  if (!response.ok) {
     throw new Error(`Failed to fetch CSRF token: ${response.status} ${response.statusText}`)
   }
-  const data = await response.json()
-  const csrfToken = data.csrftoken
+  type CsrfResponse = { csrftoken?: string; csrfToken?: string; token?: string }
+  const data = (await response.json().catch(() => ({}))) as CsrfResponse
+  let csrfToken = data.csrftoken ?? data.csrfToken ?? data.token
+  if (!csrfToken) {
+    const setCookie = response.headers.get('set-cookie') ?? ''
+    const m = setCookie.match(/(?:^|;\s*)csrftoken=([^;]+)/i)
+    if (m) csrfToken = m[1]
+  }
+  if (!csrfToken) {
+    throw new Error('Failed to extract CSRF token from CSRF endpoint response')
+  }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
if (!response.ok) {
throw new Error(`Failed to fetch CSRF token: ${response.status} ${response.statusText}`)
}
const data = await response.json()
const csrfToken = data.csrftoken
clearTimeout(timeout)
if (!response.ok) {
throw new Error(`Failed to fetch CSRF token: ${response.status} ${response.statusText}`)
}
type CsrfResponse = { csrftoken?: string; csrfToken?: string; token?: string }
const data = (await response.json().catch(() => ({}))) as CsrfResponse
let csrfToken = data.csrftoken ?? data.csrfToken ?? data.token
if (!csrfToken) {
const setCookie = response.headers.get('set-cookie') ?? ''
const m = setCookie.match(/(?:^|;\s*)csrftoken=([^;]+)/i)
if (m) csrfToken = m[1]
}
if (!csrfToken) {
throw new Error('Failed to extract CSRF token from CSRF endpoint response')
}
🤖 Prompt for AI Agents 
In frontend/graphql-codegen.ts around lines 11 to 16, the code assumes the CSRF
token is at data.csrftoken and doesn't clear the fetch timeout or handle
alternate payloads; update the logic to: parse JSON safely (guarding for
data.csrftoken, data.csrfToken, data.token, or nested properties), if JSON
parsing fails or none of those fields exist, check the
response.headers.get('set-cookie') (or other cookie headers) for a csrf token
fallback, and ensure any timeout/abort controller is cleared or aborted cleanup
is performed; if after these attempts the token is still missing, throw an
explicit error immediately to fail fast.

return {
documents: ['src/**/*.{ts,tsx}'],
generates: {
'./src/types/__generated__/graphql.ts': {
config: {
avoidOptionals: {
// Use `null` for nullable fields instead of optionals
field: true,
// Allow nullable input fields to remain unspecified
inputValue: false,
},
// Use `unknown` instead of `any` for unconfigured scalars
defaultScalarType: 'unknown',
// Apollo Client always includes `__typename` fields
nonOptionalTypename: true,
// Apollo Client doesn't add the `__typename` field to root types so
// don't generate a type for the `__typename` for root operation types.
skipTypeNameForRoot: true,
},
plugins: ['typescript', 'typescript-operations'],
},
},
// Don't exit with non-zero status when there are no documents
ignoreNoDocuments: true,
overwrite: true,
schema: {
[`${PUBLIC_API_URL}/graphql/`]: {
headers: {
Cookie: `csrftoken=${csrfToken}`,
'x-csrftoken': `${csrfToken}`,
},
},
},
Copy link
Contributor

@coderabbitai coderabbitai bot Aug 29, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Add Referer and normalize CSRF header casing (Django requires it over HTTPS).

Without a Referer that matches the target origin, Django will reject POST introspection requests even with a valid CSRF token. Also prefer the conventional header casing.

Apply:

       headers: {
-          Cookie: `csrftoken=${csrfToken}`,
-          'x-csrftoken': `${csrfToken}`,
+          Cookie: `csrftoken=${csrfToken}`,
+          'X-CSRFToken': csrfToken,
+          Referer: PUBLIC_API_URL,
       },
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
[`${PUBLIC_API_URL}/graphql/`]: {
headers: {
Cookie: `csrftoken=${csrfToken}`,
'x-csrftoken': `${csrfToken}`,
},
},
},
[`${PUBLIC_API_URL}/graphql/`]: {
headers: {
Cookie: `csrftoken=${csrfToken}`,
'X-CSRFToken': csrfToken,
Referer: PUBLIC_API_URL,
},
},
🤖 Prompt for AI Agents 
In frontend/graphql-codegen.ts around lines 43 to 49, the request headers are
missing a Referer and use a nonstandard CSRF header casing; add a Referer header
that matches the target origin (e.g. PUBLIC_API_URL with trailing slash) and
change the header name from 'x-csrftoken' to the conventional 'X-CSRFToken' so
Django accepts POST introspection over HTTPS; keep the Cookie csrftoken as-is
and ensure the Referer value is exactly the API origin expected by Django.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

django does not reject them, it works fine.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@rudransh-shrivastava Thank you for clarifying! I appreciate you testing this and confirming it works with your current Django configuration.

My suggestion was based on Django's default CSRF protection behavior, particularly for HTTPS environments where Django typically requires a Referer header that matches the target origin. However, since you've verified it works fine in your setup, it's likely that:

  1. Your Django configuration has appropriate CSRF settings for your use case
  2. The GraphQL introspection might be using GET requests rather than POST
  3. Your development/deployment environment doesn't trigger Django's stricter CSRF validation

Since you've confirmed the current implementation works, there's no need to make these changes. Thanks for the feedback!

✏️ Learnings added 
Learnt from: rudransh-shrivastava
PR: OWASP/Nest#2155
File: frontend/graphql-codegen.ts:0-0
Timestamp: 2025-08-31T13:48:09.785Z
Learning: In the OWASP/Nest project, Django's GraphQL endpoint accepts CSRF tokens via 'x-csrftoken' header (lowercase) without requiring a Referer header, working fine in their configuration for GraphQL codegen introspection.

Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.

🧠 Learnings used 
Learnt from: rudransh-shrivastava
PR: OWASP/Nest#2155
File: frontend/graphql-codegen.ts:52-52
Timestamp: 2025-08-30T12:52:32.180Z
Learning: When using GraphQL Codegen with async configuration that needs to fetch data (like CSRF tokens), export the async function directly instead of using top-level await: `export default async function()` rather than `export default await function()`.

}
}
export default await createCodegenConfig()
4 changes: 4 additions & 0 deletions frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
"dev": "next dev --port 3000",
"format": "prettier --log-level warn --write .",
"format:check": "prettier --check .",
"graphql-codegen": "graphql-codegen --config graphql-codegen.ts",
Copy link
Contributor

@coderabbitai coderabbitai bot Aug 29, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Generate types automatically during builds.

Prevent stale/missing types by invoking codegen before build.

   "scripts": {
-    "build": "next build",
+    "build": "pnpm run graphql-codegen && next build",
     "build:turbo": "next build --turbo",
@@
-    "graphql-codegen": "graphql-codegen --config graphql-codegen.ts",
+    "graphql-codegen": "graphql-codegen --config graphql-codegen.ts",
+    "predev": "pnpm run graphql-codegen",
+    "pretest:unit": "pnpm run graphql-codegen",
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
"graphql-codegen": "graphql-codegen --config graphql-codegen.ts",
"scripts": {
"build": "pnpm run graphql-codegen && next build",
"build:turbo": "next build --turbo",
"graphql-codegen": "graphql-codegen --config graphql-codegen.ts",
"predev": "pnpm run graphql-codegen",
"pretest:unit": "pnpm run graphql-codegen",
}
🤖 Prompt for AI Agents 
In frontend/package.json around line 11, the project invokes graphql-codegen via
a standalone script but does not ensure types are generated before building;
update package.json scripts to run codegen automatically before build—either add
a "prebuild" script that runs "graphql-codegen --config graphql-codegen.ts" or
prepend the build script with the codegen command (e.g., "graphql-codegen
--config graphql-codegen.ts && <existing build command>") so types are always
generated during CI/local builds.

Copy link
Collaborator Author

@rudransh-shrivastava rudransh-shrivastava Aug 30, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

how is this possible if we run backend separately? if we invoke codegen before build it may fail as backend may or may not be available. Codegen requires a server to query the GraphQL endpoint

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@rudransh-shrivastava You're absolutely right! That's a critical oversight on my part. Running codegen during build would indeed fail when the backend isn't available, which is common in CI/CD pipelines or local development scenarios.

Here are better approaches to handle this:

Option 1: Use a static schema file

// In graphql-codegen.ts, replace the schema URL with a local file
- schema: `${PUBLIC_API_URL}/graphql/`,
+ schema: './schema.graphql',

Option 2: Make codegen conditional

{
  "scripts": {
    "graphql-codegen": "graphql-codegen --config graphql-codegen.ts",
    "graphql-codegen:safe": "graphql-codegen --config graphql-codegen.ts || echo 'Codegen skipped - server unavailable'",
    "build": "pnpm run graphql-codegen:safe && next build"
  }
}

Option 3: Separate CI step
Run codegen only when backend is available (e.g., in a specific CI job) and commit the generated types.

Given that you've already committed the generated types, Option 3 seems to align with your current approach. The types would be generated when the backend is available and committed to the repo.

What's your preference for handling this in your deployment pipeline?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. to get a schema.graphql file, I run into the same problem. I need a backend server to generate that file.

I would like to know if there's a way to run graphql-codegen after backend is available? This is for local development purposes. I am assuming that for CI jobs -- all generated files are already present.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • No changes needed to your current graphql-codegen.ts configuration
  • Generated files remain committed for CI/CD as you intended

The first solution with wait-on + concurrently is probably your best bet since it handles the server dependency gracefully and provides a smooth development experience.

"lighthouse-ci": "lhci autorun",
"lighthouse-ci:desktop": "lhci autorun --collect.settings.preset=desktop",
"lint": "eslint . --config eslint.config.mjs --fix --max-warnings=0",
Expand Down Expand Up @@ -68,6 +69,9 @@
"@axe-core/react": "^4.10.2",
"@eslint/eslintrc": "^3.3.1",
"@eslint/js": "^9.34.0",
"@graphql-codegen/cli": "^5.0.7",
"@graphql-codegen/typescript": "^4.1.6",
"@graphql-codegen/typescript-operations": "^4.6.1",
"@lhci/cli": "^0.15.1",
"@playwright/test": "^1.55.0",
"@swc/core": "^1.13.5",
Expand Down
Loading