flowtype - How can I type in flow a high order function that takes a function to generate data?

Question

I want to type using generics a function that simulates a query. To give the most flexibility to the type of data to be used (and to avoid returning same referenced data) this function takes another function to generate the data to return. Because this function can return any data type, I don't want to restrict it to any specific type, but I don't want to use any either.

I thought this could be something achievable with generics, but all my attempts to type it properly fail. Here is what I tried so far:

//@flow
import { useState, useEffect } from 'react'

export const makeUseQuery = <T>(generateData: () => T) => () => {
  const [data, setData] = useState()
  const [isLoading, setIsLoading] = useState(true)
  useEffect(() => {
    const id = setTimeout(() => {
      setData(generateData())
      setIsLoading(false)
    }, 2500)
    return () => {
      clearTimeout(id)
    }
  }, [])
  return {
    data,
    isLoading,
    error: null,
  }
}

The error I get from flow is that I can not let the generic escape from the scope, but I am not sure how else can I keep this type safe.

question from:https://stackoverflow.com/questions/66050852/how-can-i-type-in-flow-a-high-order-function-that-takes-a-function-to-generate-d

Answer 1

Maybe something like this?

import { useState, useEffect } from 'react'

type UseQueryResult<Response> = $ReadOnly<{|
  data: Response | void,
  isLoading: boolean,
  error: null,
|}>;

export const makeUseQuery = <Response>(
  generateData: () => Response
): (() => UseQueryResult<Response>) => 
(): UseQueryResult<Response> => {
  const [data, setData] = useState()
  const [isLoading, setIsLoading] = useState(true)
  useEffect(() => {
    const id = setTimeout(() => {
      setData(generateData())
      setIsLoading(false)
    }, 2500)
    return () => {
      clearTimeout(id)
    }
  }, [])
  return {
    data,
    isLoading,
    error: null,
  }
}

(try)