a possible workarround for dotansimha/graphql-code-generator#8103

graphql/fetcher.ts

@@ -1,9 +1,21 @@
-import { useGraphQLContext } from '../context/graphql';
+import { parse, print } from 'graphql'
+
 export const useFetchData = <TData, TVariables>(
   query: string,
 ): (() => Promise<TData>) => {
-  // FAILING: using a hook inside the fetcher
-  //const { endpoints } = useGraphQLContext();
+
+  const parsedQuery = parse(query)
+  const alreadyVisitedQueryNames: string[] = []
+  const fixedQuery = print({
+    ...parsedQuery,
+    definitions:  parsedQuery.definitions.filter(def => {
+      if(!(def.kind === 'FragmentDefinition' && alreadyVisitedQueryNames.includes(def.name.value))) {
+        if(def.kind === 'FragmentDefinition') alreadyVisitedQueryNames.push(def.name.value)
+        return true
+      }
+    })
+  })
+
 
   // PASSING: mocking the data so we don't use a hook inside the fetcher
   const endpoints = {
@@ -16,7 +28,7 @@ export const useFetchData = <TData, TVariables>(
         'Content-Type': 'application/json',
       },
       body: JSON.stringify({
-        query,
+        query: fixedQuery,
         variables,
       }),
     });

graphql/generated/index.ts

@@ -267,4 +267,4 @@ export const useCompanyQuery = <
       variables === undefined ? ['company'] : ['company', variables],
       useFetchData<CompanyQuery, CompanyQueryVariables>(CompanyDocument).bind(null, variables),
       options
-    );
+    );

pages/index.tsx

@@ -1,7 +1,7 @@
 import Head from 'next/head';
 import Image from 'next/image';
 import React, { useState } from 'react';
-import {useCompanyQuery, useInfiniteCompanyQuery, useInfiniteUsersQuery} from '../graphql/generated';
+import {useCompanyQuery} from '../graphql/generated';
 import styles from '../styles/Home.module.css';
 
 export default function Home() {