use custom hook for address input - usequery or client.query

useEffect(() => {
    const fetchStripeClient = async () => {
      const result = await client.query({
        query: QUERY_STRIPE_CLIENT_SECRET,
        variables: { amount: Math.floor(totalOfOrder * 100) },
      })
      const {
        data: { getStripeClientSecret },
      } = result
      setStripeClientSecret(getStripeClientSecret)
    }
    if (fetchingStripeClient) {
      fetchStripeClient()
      setFetchingStripeClient(false)
    }
  }, [fetchingStripeClient, client, totalOfOrder])



import React, { useState, useEffect } from 'react'
import { useQuery } from '@apollo/react-hooks'
import { QUERY_LISTING } from './queries'
import { ApolloError } from 'apollo-client'
interface Props {
  listingId: string
}
function useListingData<T>(
  initialValue: T,
  listingId: T
): [T, ApolloError | undefined, React.Dispatch<T>] {
  const [listingData, setListingData] = useState<T>(initialValue)
  const { loading, error, data } = useQuery(QUERY_LISTING, {
    variables: { id: listingId },
  })
  useEffect(() => {
    if (!loading) setListingData(data.getListing)
  }, [data, loading])
  return [listingData, error, setListingData]
}
export default useListingData

import { useState, useEffect } from 'react';

function useDebounce<T>(
  initialValue: T,
  time: number
): [T, T, React.Dispatch<T>] {
  const [value, setValue] = useState<T>(initialValue);
  const [debouncedValue, setDebouncedValue] = useState<T>(initialValue);

  useEffect(() => {
    const debounce = setTimeout(() => {
      setDebouncedValue(value);
    }, time);
    return () => {
      clearTimeout(debounce);
    };
  }, [value, time]);

  return [debouncedValue, value, setValue];
}