react-async: Problems to make it work with TypeScript and axios

I am trying to use react-async in an app with TypeScript and Axios, but can’t find any documentation about it, would be great to find som, because they are pretty popular. If you can help me with my problem i would be happy to create a PR or write an article about it, because i really like the idea of your package.

My basic problem is that i have a function that handles the fetch via axios with async/await:

    const fetchCategories = async() => {
        const response = await axios.get("/route/");
        return response;
    }

And in my Component i use the following:

<Async promiseFn={fetchCategories}>...</Async>

Now, TS throws the following error:

JSX element type 'Async<AxiosResponse<any>>' is not a constructor function for JSX elements.
  Type 'Async<AxiosResponse<any>>' is missing the following properties from type 'Element': type, key

But i don’t really understand what is going on here - what kind of response does promiseFN expect, because ‘Element’: type, key seems to be very generic. Or did i understand something fundamentally wrong?

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Comments: 15 (8 by maintainers)

Most upvoted comments

There is proper built-in support for these argument types unfortunately, it’s a limitation of the current API. We want to fix this in the future but I need some help to make that happen. I’m not that familiar with TypeScript yet.

Hi, How can I avoid setting the parameter definition of the async function like… { todoId }: any and specify it with the business type?