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 <ChildList connectionKey={data.items} />;
};
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.
Hey there! I have two conflicting Relay diagnostics when using
@connectionwith fragment colocationSetup:
The conflict:
edges { __typename }: Relay LSP/compiler error — Expected 'items' to be passed a 'edges' selectionedges { __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 thisinformation 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
@connectionfield is used by the Relay runtime itself (for cursor-based pagination) and by a child fragmentspread on the same connection object.
Expected behavior:
relay/unused-fields should suppress the warning for fields that are required by a
@connectiondirective in the same selection set, or should recognise child fragmentspreads on the connection type as satisfying the usage requirement.