diff --git a/docs/source/data/operation-best-practices.mdx b/docs/source/data/operation-best-practices.mdx index 8a2c9e88254..d7b26dcd3f6 100644 --- a/docs/source/data/operation-best-practices.mdx +++ b/docs/source/data/operation-best-practices.mdx @@ -160,87 +160,6 @@ query GetGlobalStatus { * If you have collections of components that _are_ always rendered together, you can use fragments to distribute the structure of a single query between them. See [Colocating fragments](./fragments/#colocating-fragments). * If you're querying a list field that returns more items than your component needs to render, you should [paginate that field](../pagination/overview/). - - -## Use fragments to encapsulate related sets of fields - -[GraphQL fragments](./fragments/) are sets of fields you can share across multiple operations. Here's an example declaration: - -```graphql -# Recommended ✅ -fragment NameParts on Person { - title - firstName - middleName - lastName -} -``` - -It's likely that multiple queries in an app require a person's full name. This `NameParts` fragment helps keep those queries consistent, readable, and short: - -```graphql -# Recommended ✅ -query GetAttendees($eventId: ID!) { - attendees(id: $eventId) { - id - rsvp - ...NameParts # Include all fields from the NameParts fragment - } -} -``` - -### Avoid excessive or illogical fragments - -If you use _too many_ fragments, your queries might become _less_ readable: - - - -```graphql -# Use caution ⚠️ -query GetAttendees($eventId: ID!) { - attendees(id: $eventId) { - id - rsvp - ...NameParts - profile { - ...VisibilitySettings - events { - ...EventSummary - } - avatar { - ...ImageDetails - } - } - } -} - -``` - - - -Additionally, only define fragments for sets of fields that share a logical semantic relationship. _Don't_ create a fragment just because multiple queries happen to share certain fields: - -```graphql -# Recommended ✅ -fragment NameParts on Person { - title - firstName - middleName - lastName -} - -# Not recommended ❌ -fragment SharedFields on Country { - population - neighboringCountries { - capital - rivers { - name - } - } -} -``` - ## Query global data and user-specific data separately Some fields return the exact same data regardless of which user queries them: