Consistent client-preset examples naming (#9738)

Author: gilgardosh

website/src/pages/plugins/presets/preset-client.mdx

@@ -77,7 +77,7 @@ It also allows to colocate the Fragment definitions with their components counte
 import { FragmentType, useFragment } from './gql/fragment-masking'
 import { graphql } from '../src/gql'
 
-export const FilmFragment = graphql(/* GraphQL */ `
+export const FilmItemFragment = graphql(/* GraphQL */ `
   fragment FilmItem on Film {
     id
     title
@@ -86,8 +86,8 @@ export const FilmFragment = graphql(/* GraphQL */ `
   }
 `)
 
-const Film = (props: { film: FragmentType<typeof FilmFragment> }) => {
-  const film = useFragment(FilmFragment, props.film)
+const Film = (props: { film: FragmentType<typeof FilmItemFragment> }) => {
+  const film = useFragment(FilmItemFragment, props.film)
   return (
     <div>
       <h3>{film.title}</h3>
@@ -108,13 +108,13 @@ For an introduction on how to design your GraphQL Query to leverage Fragment Mas
 
 As explained in [our guide](/docs/guides/react-vue), the top-level GraphQL Query should include the fragment (`...FilmItem`) and pass down the data to child components.
 
-At the component props definition level, the `FragmentType<T>` type ensures that the passed data contains the required fragment (here: `FilmFragment` aka `FilmItem` in GraphQL).
+At the component props definition level, the `FragmentType<T>` type ensures that the passed data contains the required fragment (here: `FilmItemFragment` aka `FilmItem` in GraphQL).
 
 ```tsx filename="src/Film.tsx" {14-15}
 import { FragmentType, useFragment } from './gql/fragment-masking'
 import { graphql } from '../src/gql'
 
-export const FilmFragment = graphql(/* GraphQL */ `
+export const FilmItemFragment = graphql(/* GraphQL */ `
   fragment FilmItem on Film {
     id
     title
@@ -125,9 +125,9 @@ export const FilmFragment = graphql(/* GraphQL */ `
 
 const Film = (props: {
   /* the passed `film` property contains a valid `FilmItem` fragment 🎉 */
-  film: FragmentType<typeof FilmFragment>
+  film: FragmentType<typeof FilmItemFragment>
 }) => {
-  const film = useFragment(FilmFragment, props.film)
+  const film = useFragment(FilmItemFragment, props.film)
   return (
     <div>
       <h3>{film.title}</h3>
@@ -152,13 +152,13 @@ as described in [the next section](#getting-a-fragments-type).
 
 #### The `useFragment()` helper
 
-The `useFragment()` function helps narrow down the Fragment type from a given data object (ex: `film` object to a `FilmFragment` object):
+The `useFragment()` function helps narrow down the Fragment type from a given data object (ex: `film` object to a `FilmItemFragment` object):
 
 ```tsx filename="src/Film.tsx" {14-15}
 import { FragmentType, useFragment } from './gql/fragment-masking'
 import { graphql } from '../src/gql'
 
-export const FilmFragment = graphql(/* GraphQL */ `
+export const FilmItemFragment = graphql(/* GraphQL */ `
   fragment FilmItem on Film {
     id
     title
@@ -167,8 +167,8 @@ export const FilmFragment = graphql(/* GraphQL */ `
   }
 `)
 
-const Film = (props: { film: FragmentType<typeof FilmFragment> }) => {
-  const film = useFragment(FilmFragment, props.film)
+const Film = (props: { film: FragmentType<typeof FilmItemFragment> }) => {
+  const film = useFragment(FilmItemFragment, props.film)
   // `film` is of type `FilmItemFragment` 🎉
   return (
     <div>
@@ -237,7 +237,7 @@ Or, if you have access to the Fragment's definition, you can extract the type fr
 ```tsx filename="src/Film.tsx" {1, 3, 12}
 import { ResultOf } from '@graphql-typed-document-node/core'
 
-export const FilmFragment = graphql(/* GraphQL */ `
+export const FilmItemFragment = graphql(/* GraphQL */ `
   fragment FilmItem on Film {
     id
     title
@@ -246,7 +246,7 @@ export const FilmFragment = graphql(/* GraphQL */ `
   }
 `)
 
-function myFilmHelper(film: ResultOf<typeof FilmFragment>) {
+function myFilmHelper(film: ResultOf<typeof FilmItemFragment>) {
   // ...
 }
 ```