How to use the @apollo/react-hooks.useQuery function in @apollo/react-hooks

export default (props: IPage) => {
  const { t } = useTranslation();
  const { id } = props.match.params as { id: string };

  // ref
  const infoFormRef = useRef>(null);

  // query
  const getCouponVariables = { id: Number(id) };
  const getCouponQuery = useQuery<{ coupon: Coupon }, CouponArgs>(GET_COUPON, {
    variables: getCouponVariables,
    fetchPolicy: 'network-only',
  });

  // mutation
  const [submitVariables, setSubmitVariables] = useState<{ id: number; coupon: UpdateCouponInput }>();
  const [updateCouponMutate, updateCouponMutation] = useMutation(UPDATE_COUPON, {
    variables: submitVariables,
    // apollo-link-error onError: e => messageUtil.gqlError(e.message),
    onCompleted: () => messageUtil.gqlSuccess(t('_lang:updatedSuccessfully')),
    refetchQueries: () => [{ query: GET_COUPON, variables: getCouponVariables }],
  });

  const onSubmit = async () => {
    const infoData: ISubmitData = await infoFormRef.current?.onValidateForm();

export function useQuery(query, options) {
  const { loading, error, data, ...others } = useApolloQuery(query, options)
  if (error) {
    throw error
  }
  return { loading, data, ...others }
}

const mutation = gql`
      mutation SetSelfDestructAuto($id: ID!, $auto: Boolean) {
        setSelfDestructAuto(simulatorId: $id, auto: $auto)
      }
    `;
    const variables = {
      id: simulator.id,
      auto: evt.target.checked
    };
    client.mutate({
      mutation,
      variables
    });
  };

  const { loading, data, subscribeToMore } = useQuery(SELF_DESTRUCT_QUERY, {
    variables: { simulatorId: simulator.id }
  });
  const config = React.useMemo(
    () => ({
      variables: { simulatorId: simulator.id },
      updateQuery: (previousResult, { subscriptionData }) => ({
        ...previousResult,
        simulators: subscriptionData.data.simulatorsUpdate
      })
    }),
    [simulator.id]
  );
  useSubscribeToMore(subscribeToMore, SELF_DESTRUCT_SUB, config);
  const { simulators } = data;
  if (loading || !simulators) return null;

const ChatsTab = props => {
  const { subscribeToMore, data, loading, error, refetch } = useQuery(
    CHAT_GROUPS_QUERY,
    {
      variables: { userId: props.auth.user.id },
    },
  );

  useEffect(() => {
    if (props.tab2) refetch();
  }, [props.tab2]);

  useEffect(() => {
    if (!loading) subscribeToNewChats();
  }, [loading]);

  function subscribeToNewChats() {
    subscribeToMore({

const SubscriptionsTable: React.FunctionComponent = () => {
  const { data, loading, error } = useQuery(SUBSCRIPTIONS_QUERY);

  if (loading) return <>Loading...;
  if (error) return <>{`Error! ${error.message}`};

  return (
    <div>
      
          {data &amp;&amp; data.subscriptions &amp;&amp; data.subscriptions.map((subscription) =&gt; (<table>
        <thead>
          <tr>
            <th>Email</th>
            <th>Source</th>
          </tr>
        </thead>
        <tbody></tbody></table></div>

const CommunitiesPage = () => {
  let communities = [];
  const { loading, error, data } = useQuery(GET_COMMUNITIES);

  if (!loading && !error && data && data.communities) {
    communities = data.communities;
  }

  return (
    
      
    
  );
};

const Admin = () => {
  const { data, loading, error } = useQuery(ADMIN_QUERY);
  if (loading && !data) return ;
  if (error) return ;
  const { me } = data;
  return me ?  : ;
};