diff --git a/docs/source/data/fragments.mdx b/docs/source/data/fragments.mdx index 9d6d20941a1..775c32e0463 100644 --- a/docs/source/data/fragments.mdx +++ b/docs/source/data/fragments.mdx @@ -1281,7 +1281,7 @@ function PostDetails({ post }: PostDetailsProps) { } ``` -`FragmentType` also prevents parent components from accidentally omitting fragment definitions for child components, regardless of whether it satisfies the same fields or not. +`FragmentType` also prevents parent components from accidentally omitting fragment spreads for child components, regardless of whether the field selection satisfies the fragment's data requirements. ```tsx title="Posts.tsx" const GET_POSTS = gql` @@ -1308,6 +1308,8 @@ export default function Posts() { } ``` +In this example, the `GetPosts` query selects enough fields to satisfy the `PostDetails` data requirements, but TypeScript warns us because the `PostDetailsFragment` was not included in the `GetPosts` query. + ### Incremental adoption in an existing application Existing applications can take advantage of the data masking features through an incremental adoption approach. This section will walk through the steps needed to adopt data masking in a larger codebase.