Data Fetching Development Tutorials, Guides & Insights

No preview available for this content.

This tutorial has covered the basics of setting up a GraphQL API with Node.js and Apollo Server, including creating queries, mutations, and subscriptions. By leveraging GraphQL's powerful features, you can build efficient, flexible, and scalable APIs for your applications.

• Explore Authentication: Implement authentication and authorization to secure your GraphQL API.
• Integrate with a Database: Connect your GraphQL server to a database for persistent data storage.
• Optimize Performance: Use techniques like query batching and caching to improve API performance.

Run the server using Node.js:

   node index.js

import { useState, useEffect } from 'react';

function useFetch(url, options = {}) {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        let isMounted = true; // Track if component is mounted

        const fetchData = async () => {
            setLoading(true);
            try {
                const response = await fetch(url, options);
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                const result = await response.json();
                if (isMounted) {
                    setData(result);
                }
            } catch (error) {
                if (isMounted) {
                    setError(error);
                }
            } finally {
                if (isMounted) {
                    setLoading(false);
                }
            }
        };

        fetchData();

        return () => {
            isMounted = false; // Cleanup to avoid setting state on unmounted component
        };
    }, [url, options]);

    return { data, loading, error };
}

export default useFetch;

Here’s an example of how to use the useFetch hook in a React component to fetch and display data.