使用列表进行React Relay操作

Question

Structure is

store: (Component) => Relay.QL`
  query StoreQuery {
    store { ${Component.getFragment('store')} },
  }
`,

store: () => Relay.QL`
  fragment on Store {
    activities {
      ${Activity.getFragment('activity')}
    },
  }
`,

activity: () => Relay.QL`
  fragment on Activity {
    name,
    icon,
    color
  }
`,

I am getting props.activities as a list and then I want to manipulate this list for example sort or remove not needed, etc. but I see there relay objects and can't understand how to get data and change it before setting to component ?

Answer 1

The data passed to each component from relay is masked, so you cannot access it even if another component happens to request it. In order to access any field, you have to ask for it.

Say, the outer component wants to sort the activities based on the name field. You would need to update the fragment to in order to explicitly asked for the name in that component as well.

fragment on Store {
  activities {
    name
    ${Activity.getFragment('activity')}
  },
}

The benefit is that even when the inner fragment removes the name field for whatever reason, the outer component would still have the data. This is a critical behavior to make it possible to reason about a component locally without knowing about the full application.