tdc-js-modules/hooks/useQuery.ts

import React, { Dispatch, SetStateAction } from 'react';
import { GraphQLTaggedNode, Variables } from 'relay-runtime';
import { useEffect, useState } from 'react';
import { fetchQuery, Environment } from 'react-relay';
import { UseQueryT, UseQueryConfigT, UseQueryReturnT } from '../@types/UseQuery';
/*const query: any = '';*/

/*
const Qry: UseQuery<string[]> = () => {
  return {sort: null!}
};
*/

function useQuery<T = any>(
  query: GraphQLTaggedNode,
  variables: any,
  config: UseQueryConfigT<T> = {
    onMount: false,
    initialValue: null!,
    transformFunction: null!,
  },
  environment: Environment,
): UseQueryReturnT<T> {
  const [data, setData] = useState(config.initialValue);
  const [loading, setLoading] = useState<boolean>(false);
  const [error, setError] = useState<Error | null>(null);
  const [trigger, setTrigger] = useState<boolean>(false);

  function fetchData() {
    /*setLoading(true);*/
    setLoading(true);
    fetchQuery(environment, query, variables)
      .then(data => {
        if (config.transformFunction) {
          setData(config.transformFunction(data));
        } else {
          // @ts-ignore
          setData(data);
        }
        setLoading(false);
      })
      .catch(err => {
        setData(config.initialValue);
        setError(err);
        setLoading(false);
      });
  }
  const fetch = () => {
    setError(null);
    setLoading(true);
    setTrigger(true);
  };

  useEffect(() => {
    if (config.onMount) {
      fetchData();
    }
  }, [config.onMount]);

  useEffect(() => {
    if (trigger) {
      fetchData();
      setTrigger(false);
    }
  }, [trigger]);

  return { data, loading, error, fetch, setData };
}

function createUseQueryInstance<T>(useQryFn: UseQueryT<T>, environment: Environment) {
  return (query: GraphQLTaggedNode, variables: any, config: UseQueryConfigT<T>) =>
    useQryFn(query, variables, config, environment);
}

export default useQuery;