index.tsx

const postQuery = async <TData, TVariables>(query: string, variables: TVariables) => {
  const token = await firebase.auth().currentUser!.getIdToken();

  const resonse = await fetch('/graphql', {
    method: 'POST',
    body: JSON.stringify({ query, variables })
  });

  const json: { data: TData, errors: Array<any> | undefined } = await resonse.json();

  return json;
}

const useLazyQuery = <TData, TVariables>(query: DocumentNode) => {
  const [state, setState] = useState<QueryState<TData>>({ loading: false, error: false, data: undefined });
  const isMountedRef = useIsMountedRef();

  const func = async (variables: TVariables) => {
    setState({ loading: true, error: false, data: undefined });

    try {
      const { data, errors } = await postQuery<TData, TVariables>(print(query), variables);

      if (isMountedRef.current) {
        setState({ loading: false, error: !!errors, data });
      }
    } catch {
      setState({ loading: false, error: true, data: undefined });
    }
  }

  return [func, state] as const;
}

import { AppQuery, AppQueryVariables } from "../graphql-generated";

export const App: React.FC = () => {
  const [fetch, { data, loading, error }] = useLazyQuery<AppQuery, AppQueryVariables>(gql`
      query App {
        foo {
          ...Bar
        }
      }
      ${Bar.Fragments.Bar}
    `);

  useEffect(() => fetch(), []);
  
  return <>
    <Bar foo={data.foo} />
  </>
}