How to use custom hook (fetch) with typescript

Question

I have created a custom hooks called useFetch.

import { useState, useEffect } from 'react'

export const useFetch = (url: string, options?: object) => {
    const [response, setResponse] = useState(null);
    const [error, setError] = useState(null);

    useEffect(() => {
      const fetchData = async () => {
        try {
          const res = await fetch(url, options);
          const json = await res.json();
          setResponse(json);
        } catch (error) {
          setError(error);
        }
      };
      fetchData();
    }, []);

    return { response, error };
  };

But destructuring useFetch and typing it with typescript fails as if the answer may be null

import React, { FunctionComponent } from 'react'
import { useFetch } from '../../hooks/useFetch'

export const ListOfMovies: FunctionComponent = () => {
    const { response, error }: { response: object, error: object} = useFetch("http://www.omdbapi.com/?apikey=****&s=batman&page=2")
    
    if (!response) return <h2>Loading...</h2>

    if (error) return <h2>Error</h2>

    return (
        <div>
            <h2>Lista de películas</h2>
            {response.Search.map(movie => (
                <p>{movie.Title}</p>
            ))}
        </div>
    )
}

I think the generic solution given in the accepted answer is wrong and will give syntax errors. Could you verify if the generic approach worked for you? — Rohan Agarwal
– Rohan Agarwal, Commented Jul 17, 2020 at 17:23

Сергей Седых · Accepted Answer · 2020-07-17 14:20:09Z

2

You can try to set your response manually as 'any'

import { useState, useEffect } from 'react'

export const useFetch = (url: string, options?: object) => {
    const [response, setResponse] = useState<any>(null);
    const [error, setError] = useState<any>(null);
    ...
  };

...

If you don't like 'any' try using generic.

export const useFetch = <T>(url: string, options?: object) => {
    const [response, setResponse] = useState<T>(null);
    const [error, setError] = useState<T>(null);
    ...
  };

}

So the function invocation will look like

    type YourCustomType = {response: ..., error: ...}
    const { response, error }: { response: object, error: object} = 
    useFetch<YourCustomType>("http://www.omdbapi.com/?apikey=****&s=batman&page=2");

}

edited Jul 17, 2020 at 14:20

answered Jul 17, 2020 at 14:14

Сергей Седых

1651 silver badge4 bronze badges

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

3 Comments

Rohan Agarwal Over a year ago

Any shouldn't be suggested as it defeats a major goal of using Typescript and should be used when there are no other options.

JonShipman Over a year ago

And there are always other options.

Vicktor Jul 20 at 13:57

The generic version is preferable in many instances while avoiding any.

Rohan Agarwal · Accepted Answer · 2020-07-17 13:46:59Z

-1

You have set the initial value of response and error as null therefore you are getting this warning.

Try this:

const [response, setResponse] = useState({});
const [error, setError] = useState({});

answered Jul 17, 2020 at 13:46

Rohan Agarwal

2,6093 gold badges20 silver badges37 bronze badges

Collectives™ on Stack Overflow

How to use custom hook (fetch) with typescript

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related