Function useQuery

src/preact/hooks/useQuery.ts:67–118

(
  queryFn: () => Promise<TData>,
  {
    enabled,
    initialData,
    onError = noop,
    onSettled = noop,
    onSuccess = noop,
  }: QueryConfig<TData>
)

 * )
 */
export function useQuery<TData>(
  queryFn: () => Promise<TData>,
  {
    enabled,
    initialData,
    onError = noop,
    onSettled = noop,
    onSuccess = noop,
  }: QueryConfig<TData>
) {
  const [state, setState] = useStateSafe<QueryState<TData>>({
    ...DEFAULT_STATE_VALUES,
    data: initialData,
  });

  // This ref ensures that the fetch function is not called more than once with the same props.
  const ref = useValueRef({
    initialData,
    onSettled,
    onError,
    onSuccess,
    state,
    queryFn,
  });

  const fetchQueryData = useCallback(() => {
    const {onError, onSettled, onSuccess, queryFn, state} = ref.current!;
    setState((s) => ({...s, error: null, loading: true}));
    // This function intentionally does not use async/await in order to avoid
    // issues with regenerator-runtime in bento components.
    queryFn().then(
      (data) => {
        setState((s) => ({...s, error: null, loading: false, data}));
        onSuccess(data);
        onSettled(state.data, state.error);
      },
      (error) => {
        setState((s) => ({...s, data: null, loading: false, error}));
        onError(error);
        onSettled(state.data, state.error);
      }
    );
  }, [ref, setState]);

  useEffect(() => {
    if (enabled) {
      fetchQueryData();
    }
  }, [enabled, fetchQueryData]);

  return {...state, refetch: fetchQueryData};
}