Sources Contact Advanced Search Tutorials

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

June 17, 2022 03:09 pm GMT

Calling your APIs with hooks in react

Hi all! This is my first post, and I want to bring an interesting topic:

How do we call an API from our react project?
What is the best approach?

Of course, there is no silver bullet, and it depends on the project you are working on. Today I will share a few optimizations you can make in your calls and could be a trigger for new ideas.

The problem

During my career, I worked on different projects, and I've found things like this:

Example 1

export const MyComponent: React.FC = () => {    const [dogs, setDogs] = useState();    useEffect(() => {        fetch('/api/v1/dogs')            .then(r => r.json())            .then(json => setData(json));    });    return <DogsList dogs={dogs} />;}export const MyComponent2: React.FC = () => {    const [cats, setCats] = useState();    useEffect(() => {        fetch('/api/v1/cats')            .then(r => r.json())            .then(json => setData(json));    });    return <CatsList cats={cats} />;}

or this:

Example 2

const MyComponent: React.FC = () => {    const [loading, setLoading] = useState(true);    const [error, setError] = useState();    const [dogs, setDogs] = useState();    useEffect(() => {        fetch('/api/v1/dogs')            .then(r => r.json())            .then(json => setDogs(json))            .then(() => setLoading(false))            .catch(e => setError(e));    });    if (loading) {        return <div>Loading dogs</div>;    }    return <DogsList dogs={dogs} />;}

As you can see, the code starts to duplicate, and we are putting the communication logic inside our component. And it gets even worse if we want to add more logic, i.e. set the state only if the component is mounted.

For some reason, people sometimes forget we can create a simple hook to handle all these scenarios and keep our code cleaner.

Note: Of course, there are libraries to tackle this, but just for the purpose of this article I prefer we implement it by ourselves

1: A simple approach

Let's start with a small implementation of a new hook to retrieve the data from an API. As we are good at naming things here, let's call it useApi:

function useApi(url: string) {    const [data, setData] = useState();    useEffect(() => {        fetch(url)            .then(r => r.json())            .then(json => setData(json))    }, [url]) // Remember your dependencies    return data;}

Only with this simple hook, we could rewrite the first example to this:

export const MyComponent: React.FC = () => {    const dogs = useApi('/api/v1/dogs');    return <DogsList dogs={dogs} />;}export const MyComponent2: React.FC = () => {    const cats = useApi('/api/v1/cats');    return <CatsList cats={cats} />;}

Look how clean this is, my component does not care about how we call this API, if we are using fetch or axios, we just know the data will be there.

A small step for improvement

Let's iterate this a little bit more, we've forgotten some power we have here... We have typescript! And we are not using the most important feature it provides to us: Types.

function useApi<T>(url: string): T | undefined {    const [data, setData] = useState<T>();    useEffect(() => {        fetch(url)            .then(r => r.json())            .then(json => setData(json))    }, [url]) // Remember your dependencies    return data;}

Now, in our components, we are going to have static validation with the proper types

export const MyComponent: React.FC = () => {    const dogs = useApi<Dog>('/api/v1/dogs');    return <DogsList dogs={dogs} />;}export const MyComponent2: React.FC = () => {    const cats = useApi<Cat>('/api/v1/cats');    return <CatsList cats={cats} />;}

With this first approach we have:

Removed duplicated code in both components
Separated communication logic from component logic
Added static validation for our models

2: Managing the state of the request

Now that we are happy with our useApi implementation, we want to display to the user if we are waiting for the data, or if there is an error fetching our resources.

Adding a few states and returning a tuple we can achieve the following:

function useApi<T>(url: string): [T | undefined, boolean, Error | undefined] {    const [data, setData] = useState<T>();    const [loading, setLoading] = useState(true);    const [error, setError] = useState<Error>();    useEffect(() => {        setLoading(true);        fetch(url)            .then(r => r.json())            .then(json => setData(json))            .then(() => setLoading(false))            .catch((e) => {                setError(e);                setLoading(false);            })    }, [url]) // Remember your dependencies    return [data, loading, error];}

And then in our component:

const MyComponent: React.FC = () => {    const [dogs, loading, error] = useApi('/api/v1/dogs');    if (loading) {        return <div>Loading dogs</div>;    }    if (error) {        return <div>Oops!</div>;    }    return <DogsList dogs={dogs} />;}

Conclusion

With this approach, we were able to create a custom hook to communicate with the API. We don't have repeated code across our components, and we are handling different statuses from the request properly.

Adding another library to make the requests would be straightforward, and even we can extract a fetcher: (url: string) => Promise<T> to allow the users to decide which library to use.

Thank you very much to read until the end, I hope this helped you a little bit . Feedback is always appreciated.

Original Link: https://dev.to/jor_exe/calling-your-apis-with-hooks-in-react-c30

Share this article:

View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To