diff --git a/examples/vite/graphql.config.ts b/examples/vite/graphql.config.ts
index 1e18df7..52fa874 100644
--- a/examples/vite/graphql.config.ts
+++ b/examples/vite/graphql.config.ts
@@ -4,6 +4,10 @@ const nitrogql: NitrogqlExtension = {
   generate: {
     mode: "with-loader-ts-5.0",
     schemaOutput: "./src/generated/schema.d.ts",
+    name: {
+      fragmentTypeSuffix: "Fragment",
+      fragmentVariableSuffix: "Fragment",
+    },
   },
 };
 
diff --git a/examples/vite/src/PokemonCell/index.tsx b/examples/vite/src/PokemonCell/index.tsx
index 1f01b06..7d6e802 100644
--- a/examples/vite/src/PokemonCell/index.tsx
+++ b/examples/vite/src/PokemonCell/index.tsx
@@ -1,8 +1,19 @@
-import type { PokemonCell as PokemonCellFragment } from "./PokemonCell.graphql";
+import { useFragment } from "@apollo/client";
+import { PokemonCellFragment } from "./PokemonCell.graphql";
 
 export const PokemonCell: React.FC<{
-  pokemon: PokemonCellFragment;
-}> = ({ pokemon }) => {
+  id: number;
+}> = ({ id }) => {
+  const { complete, data: pokemon } = useFragment({
+    from: {
+      __typename: "pokemon_v2_pokemonspecies",
+      id,
+    },
+    fragment: PokemonCellFragment,
+  });
+  if (!complete) {
+    throw new Error("Data is not complete");
+  }
   const ja = pokemon.names.find((name) => name.language_id === 1);
   const en = pokemon.names.find((name) => name.language_id === 9);
   return (
diff --git a/examples/vite/src/PokemonList.tsx b/examples/vite/src/PokemonList.tsx
index 3963667..c1c58ee 100644
--- a/examples/vite/src/PokemonList.tsx
+++ b/examples/vite/src/PokemonList.tsx
@@ -40,7 +40,7 @@ export const PokemonList: React.FC = () => {
       </div>
       <ul className="pokemonList">
         {data.species.map((pokemon) => (
-          <PokemonCell key={pokemon.id} pokemon={pokemon} />
+          <PokemonCell key={pokemon.id} id={pokemon.id} />
         ))}
       </ul>
     </div>