Why
The contributors GraphQL query fetches the GitHub numeric user id and uses it as a React list key, but login alone would serve as a stable unique key — unnecessarily collecting a persistent cross-site identifier.
Current state
src/queries/useContributorsData.ts lines 17–18 fetch id in the GraphQL query. src/components/Contributors.tsx line 47 uses contributor.id as the React key. The rendered UI displays only the avatar image and a link — neither of which requires the numeric id. The login string is a stable, human-readable unique identifier that could serve as the list key.
Ideal state
- The query does not fetch the numeric
id field.
login (or html_url) is used as the React list key.
- The numeric GitHub user ID is not fetched, stored in the Gatsby data layer, or used anywhere in the component tree.
Out of scope
- Removing
id from the upstream GitHub API response (it is returned by default; the fix is to not fetch it in the query).
Starting points
src/queries/useContributorsData.ts — the GraphQL query: remove the id field selection.
src/components/Contributors.tsx — line 47: replace key={contributor.id} with key={contributor.login}.
QA plan
- Remove
id from the GraphQL query and update the React key to use login.
- Run
gatsby build — expect no TypeScript errors.
- Open the built site and confirm the Contributors section renders all contributors correctly.
- Inspect the Gatsby data layer — confirm no
id field exists on contributor nodes.
Done when
The contributors query does not fetch the numeric GitHub id, and login is used as the React list key.
Why
The contributors GraphQL query fetches the GitHub numeric user
idand uses it as a React list key, butloginalone would serve as a stable unique key — unnecessarily collecting a persistent cross-site identifier.Current state
src/queries/useContributorsData.tslines 17–18 fetchidin the GraphQL query.src/components/Contributors.tsxline 47 usescontributor.idas the Reactkey. The rendered UI displays only the avatar image and a link — neither of which requires the numericid. Theloginstring is a stable, human-readable unique identifier that could serve as the list key.Ideal state
idfield.login(orhtml_url) is used as the React list key.Out of scope
idfrom the upstream GitHub API response (it is returned by default; the fix is to not fetch it in the query).Starting points
src/queries/useContributorsData.ts— the GraphQL query: remove theidfield selection.src/components/Contributors.tsx— line 47: replacekey={contributor.id}withkey={contributor.login}.QA plan
idfrom the GraphQL query and update the Reactkeyto uselogin.gatsby build— expect no TypeScript errors.idfield exists on contributor nodes.Done when
The contributors query does not fetch the numeric GitHub
id, andloginis used as the React list key.