[SOLVED] Event Source Fetch not returning Data

Issue

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'));

Solution

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);
});

Answered By – Phil

Answer Checked By – David Marino (BugsFixing Volunteer)