index.ts

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

  const resonse = await fetch('/graphql', {
    method: 'POST',
    credentials: 'include',
    headers: {
      'content-type': 'application/json',
      'authorization': `Bearer ${token}`,
      'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]')!.getAttribute('content')!
    },
    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;
}

const [fetch, { data, loading, error }] = useLazyQuery<AppQuery, AppQueryVariables>(gql`
  query App {
    gcpInstances {
      ...GcpInstances_GcpInstance
    }
    parsecHosts {
      ...ParsecHosts_ParsecHosts
    }
  }
  ${GcpInstances.Fragments.gcpInstances}
  ${ParsecHosts.Fragments.parsecHosts}
`);