useFetch hook with typescript and axios

Question

I have a question about the implementation useFetch hook with typescript and Axios.

Here is I find some example useFetch hook. But It's a javascript implementation. I just gave there any to response and err.

https://codesandbox.io/s/react-fetch-hook-gtiec?from-embed=&file=/src/components/App.js

so here is my useFetch hook .ts file.

import { useState, useEffect } from 'react'

export const useFetch = ({
    api,
    method,
    url,
    data = null,
    config = null,
}: any) => {
    const [response, setResponse] = useState(null)
    const [error, setError] = useState('')
    const [isLoading, setIsLoading] = useState(true)

    useEffect(() => {
        const fetchData = async () => {
            api[method](url, JSON.parse(config), JSON.parse(data))
                .then((res : any) => {
                    setResponse(res.data)
                })
                .catch((err : any) => {
                    setError(err)
                })
                .finally(() => {
                    setIsLoading(false)
                })
        }

        fetchData()
    }, [api, method, url, data, config])

    return { response, error, isLoading }
}

and here is my component where I make fetch request via useFetch.

  const { response, isLoading, error } = useFetch({
        api: BaseURL,
        method: 'get',
        url: 'some',
    })

everything works well request is works. But when I try to pass to my some child component (child component wait string value) some string value from response.

here is the child component in the component where I make a fetch request.

return (
    <Title>{response && response.id}</Title>
)

here is the title component

type Props = {
    children: string
}
export const Title: FC<Props> = ({ children }) => {
    return <h4>{children}</h4>
}

I get this error:

Type 'null' is not assignable to type 'string | (string & {}) | (string & ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<...>)>) | (string & ReactNodeArray) | (string & ReactPortal)'.ts(2322)
Object is possibly 'null'.ts(2531)

It's the first question of how I can implement this hook in a typescript way.

And here using fetch API. How I can use here Axios?

Do I need to add every type | null? I think it's not so correct, not? — user3348410
– user3348410, Commented Jan 10, 2021 at 9:46
response && response.id can be null (before request is completed), so you have 2 options: allow children to be null or provide some fallback (e.g. response?.id ?? '') — Aleksey L.
– Aleksey L., Commented Jan 10, 2021 at 9:48

tmhao2005 · Accepted Answer · 2021-01-10 09:58:48Z

1

I think you currently have 2 problems need to resolve as following:

In your custom hook, you use a state const [response, setResponse] = useState(null) which tells response always null which can end up an issue where you check here {response && response.id}. So I suggest you to fill the type for response in generic type:

export const useFetch = <R extends any = any>({
  api,
  method,
  url,
  data = null,
  config = null,
}: any) => {
  const [response, setResponse] = useState<R | null>(null); // set `R` as returned type
  // ...
}

Then you specify your response where you use your custom hook:

const { response, isLoading, error } = useFetch<{ id: string }>({
  // ...
});

Another thing is to refine is the children type is supposed to be React.ReactNode

type Props = {
    children: React.ReactNode
}

answered Jan 10, 2021 at 9:58

tmhao2005

17.7k4 gold badges46 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aleksey L. Over a year ago

@user3348410 Side note: when you use FC no need to type children explicitly

Collectives™ on Stack Overflow

useFetch hook with typescript and axios

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related