Grpc web client

grpc.js

import React, { useEffect, useState } from 'react';
import { createClient } from 'grpc-web-client';
import { DataService } from './generated/data_pb_service';

const DataClient = createClient(DataService);

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

    useEffect(() => {
        async function fetchData() {
            setLoading(true);
            setError(null);
            try {
                const request = new GetDataRequest();
                request.setUrl(url);
                const response = await DataClient.getData(request);
                setData(response.getData());
            } catch (e) {
                setError(e);
            } finally {
                setLoading(false);
            }
        }
        fetchData();
    }, [url]);
    return (
        <div>
            {loading && <p>Loading...</p>}
            {error && <p>Error: {error.message}</p>}
            {data && <p>Data: {data}</p>}
        </div>
    );
}

export default DataFetching;