diff --git a/packages/example/src/Pokemon.generated.ts b/packages/example/src/Pokemon.generated.ts
index 103d4252..805d1ca9 100644
--- a/packages/example/src/Pokemon.generated.ts
+++ b/packages/example/src/Pokemon.generated.ts
@@ -4,6 +4,14 @@ export type PokemonFieldsFragment = {
   __typename?: 'Pokemon';
   id: string;
   name: string;
+  attacks?: {
+    __typename?: 'AttacksConnection';
+    fast?: Array<{
+      __typename?: 'Attack';
+      damage?: number | null;
+      name?: string | null;
+    } | null> | null;
+  } | null;
 };
 
 export const PokemonFieldsFragmentDoc = {
@@ -21,6 +29,29 @@ export const PokemonFieldsFragmentDoc = {
         selections: [
           { kind: 'Field', name: { kind: 'Name', value: 'id' } },
           { kind: 'Field', name: { kind: 'Name', value: 'name' } },
+          {
+            kind: 'Field',
+            name: { kind: 'Name', value: 'attacks' },
+            selectionSet: {
+              kind: 'SelectionSet',
+              selections: [
+                {
+                  kind: 'Field',
+                  name: { kind: 'Name', value: 'fast' },
+                  selectionSet: {
+                    kind: 'SelectionSet',
+                    selections: [
+                      {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'damage' },
+                      },
+                      { kind: 'Field', name: { kind: 'Name', value: 'name' } },
+                    ],
+                  },
+                },
+              ],
+            },
+          },
         ],
       },
     },
diff --git a/packages/example/src/Pokemon.ts b/packages/example/src/Pokemon.ts
index 796d7d0e..0ee516f0 100644
--- a/packages/example/src/Pokemon.ts
+++ b/packages/example/src/Pokemon.ts
@@ -1,10 +1,27 @@
+import { TypedDocumentNode } from '@graphql-typed-document-node/core';
 import { gql } from '@urql/core';
 
 export const PokemonFields = gql`
   fragment pokemonFields on Pokemon {
     id
     name
+    attacks {
+      fast {
+        damage
+        name
+      }
+    }
   }
 ` as typeof import('./Pokemon.generated').PokemonFieldsFragmentDoc;
 
-export const Pokemon = () => 'hi';
+export const Pokemon = (data: any) => {
+  const pokemon = useFragment(PokemonFields, data);
+  return `hi ${pokemon.name}`;
+};
+
+export function useFragment<Type>(
+  _fragment: TypedDocumentNode<Type>,
+  data: any
+): Type {
+  return data;
+}
diff --git a/packages/graphqlsp/README.md b/packages/graphqlsp/README.md
index 00455915..ca69a34c 100644
--- a/packages/graphqlsp/README.md
+++ b/packages/graphqlsp/README.md
@@ -46,6 +46,37 @@ when on a TypeScript file or adding a file like [this](https://github.com/0no-co
 - `shouldCheckForColocatedFragments` when turned on (default), this will scan your imports to find
   unused fragments and provide a message notifying you about them
 
+## Fragment masking
+
+When we use a `useQuery` that supports `TypedDocumentNode` it will automatically pick up the typings
+from the `query` you provide it. However for fragments this could become a bit more troublesome, the
+minimal way of providing typings for a fragment would be the following:
+
+```tsx
+import { TypedDocumentNode } from '@graphql-typed-document-node/core';
+
+export const PokemonFields = gql`
+  fragment pokemonFields on Pokemon {
+    id
+    name
+  }
+` as typeof import('./Pokemon.generated').PokemonFieldsFragmentDoc;
+
+export const Pokemon = props => {
+  const pokemon = useFragment(props.pokemon, PokemonFields);
+};
+
+export function useFragment<Type>(
+  _fragment: TypedDocumentNode<Type>,
+  data: any
+): Type {
+  return data;
+}
+```
+
+This is mainly needed in cases where this isn't supported out of the box and mainly serves as a way
+for you to case your types.
+
 ## Local development
 
 Run `pnpm i` at the root. Open `packages/example` by running `code packages/example` or if you want to leverage