Skip to content

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

@Soryyyn

Description

@Soryyyn

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions