facebook / facebook/relay

`relay/unused-fields` conflicts with `@connection` requirement for edges

Open
#5,197 0 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.