Colocated fragments best practice for when multiple components needs to fetch same data

Help
1

Hi,

I am trying to understand the best practices when using colocated fragments. I understand that one of the best practice is to ensure that each component is responsible for its own data requirements. If we have multiple components that needs the same field, should both field be redefined in each of the component’s colocated fragment? Also, if the parent component needs the same field as the child component, should that field be fetched in both the parent component and child component’s colocated fragment?

Example:

query X {
    fieldA {
       id
       firstName
       lastName
       ....ComponentA
    }
}

fragment ComponentA {
  firstName
  lastName
}

fragment ComponentB {
  firstName
  lastName
}
2

Hi @Jeff_Apollo :wave: the short answer is: don’t worry about overlap, it’s fine to spread ComponentA and ComponentB into your query even if they happen to contain the same fields. The long answer is: it depends. If ComponentA and ComponentB are essentially variants of the same component, then you could consider having them share a fragment because it’s extremely unlikely that their data requirements will ever diverge. But in my experience this is not typical, so it’s probably best to declare two separate fragments like those in your snippet.

1 Like