`relay/unused-fields` conflicts with `@connection` requirement for edges
- Dominant language
- Rust
- Stars
- 19k
- Forks
- 1.9k
- PR merge metrics
- No merged PRs in 30d
Description
Hey there! I have two conflicting Relay diagnostics when using `@connection` with fragment colocation
## Setup:
```
// ChildList.tsx — consumes edges via fragment on the connection type
const ChildList = ({ connectionKey }) => {
const data = useFragment(graphql`
fragment ChildList_connection on ItemConnection {
edges {
node { id name }
}
}
`, connectionKey);
return data?.edges?.map(...);
};
// ParentContainer.tsx — owns pagination, passes connection key to child
const ParentContainer = ({ viewerKey }) => {
const { data, hasNext, loadNext } = usePaginationFragment(graphql`
fragment ParentContainer_viewer on Viewer
@argumentDefinitions(cursor: { type: "String" }, count: { type: "Int", defaultValue: 10 })
@refetchable(queryName: "ParentContainerRefetchQuery") {
items(after: $cursor, first: $count)
@connection(key: "ParentContainer_items") {
...ChildList_connection
# ← MUST add this to satisfy @connection requirement:
# "Expected 'items' to be passed a 'edges' selection"
edges {
__typename
}
}
}
`, viewerKey);
return ;
};
```
## The conflict:
- Without `edges { __typename }`: Relay LSP/compiler error — Expected 'items' to be passed a 'edges' selection
- With `edges { __typename }`: ESLint relay/unused-fields error — This queries for the field 'edges' but this file does not seem to use it directly. If a different file needs this
information that file should export a fragment and colocate the query for the data with the usage.
The edges data IS colocated — in ChildList_connection via fragment spread. ParentContainer.tsx correctly delegates data usage to the child via Relay's fragment colocation pattern. The
relay/unused-fields rule does not recognise that edges selected inside a `@connection` field is used by the Relay runtime itself (for cursor-based pagination) and by a child fragment
spread on the same connection object.
## Expected behavior:
relay/unused-fields should suppress the warning for fields that are required by a `@connection` directive in the same selection set, or should recognise child fragment
spreads on the connection type as satisfying the usage requirement.
Contributor guide
Research direction
Start with the relay/unused-fields diagnostic and compare the selections in ChildList.tsx and ParentContainer.tsx, especially the @connection field and fragment spread. Reproduce the conflicting diagnostics from the issue's example. Done means this valid @connection and fragment-colocation case no longer reports an unused-fields warning while the required edges selection remains accepted.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- eslint, graphql, javascript, react
- Domain
- frontend, tooling
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100