Below is the code of the Service
import { fetchEventSource } from '@microsoft/fetch-event-source';
export const AlertFetchEventSource = () => {
fetchEventSource('https://puppygifs.tumblr.com/api/read/json'),
{
onmessage(ev) {
const data = JSON.parse(ev.data);
return data;
},
};
};
export default { AlertFetchEventSource };
index.tsx where I am making the call to this service but its not returning any data
import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import backendService from './services/backendService';
interface AppProps {}
interface AppState {
name: string;
}
class App extends Component<AppProps, AppState> {
constructor(props) {
super(props);
this.state = {
name: 'React',
};
console.log(backendService.AlertFetchEventSource());
}
render() {
return (
<div>
<Hello name={this.state.name} />
<p>Start editing to see some magic happen :)</p>
</div>
);
}
}
render(<App />, document.getElementById('root'));
Given the library you're using is an event handler, it doesn't ever actually return data. You'd need to provide it a callback to execute when it receives events.
// you might want to specify a better type than `any`
type MessageHandler = (data: any) => void;
export const AlertFetchEventSource = (onEvent: MessageHandler) => {
fetchEventSource('https://puppygifs.tumblr.com/api/read/json'), {
onmessage(ev) {
const data = JSON.parse(ev.data);
onEvent(data);
},
}); // you had a typo here, missing ")"
};
and use it like
import { AlertFetchEventSource } from "./services/backendService";
// snip
AlertFetchEventSource(data => {
// handle event data, eg
console.log(data);
// or perhaps something like
this.setState(data);
});