CODEWITHSUNDEEP
fetchsveltefastapisveltekitsvelte-3
Olli
Olli

Reputation: 1126

Connection is refused if FastAPI endpoints are called sequentially from Svelte frontend

I've posted this before and deleted after being pointed to this post because I thought it may solve it. Several hours of headaches later I am none the wiser and cannot deduce a solution to my problem. But I am as mentioned often quite new to all this.

In my backend I have these two functions:

@app.get("/mdstats_team")
async def get_mdstats_team():
    '''
    get events summary df for the matchday
    :return: json of eventdf
    '''
    eventdf = get_eventdf(WEEK)
    eventdf = eventdf[eventdf.groupby('event_type')[0].transform(max) == eventdf[0]]
    eventdf.columns = ['Team', 'Statistic', 'Max']
    return json.loads(eventdf.to_json(orient='records'))

@app.get("/md_events_team/{event}")
async def md_events_team(event="shot"):
    '''
    returns the filtered eventdf per event
    :param event: string, event to be filtered
    :return: json with team, event, score per row
    '''
    df = get_eventdf(WEEK)
    df.columns = ['team', 'event', 'score']
    return json.loads(df[df.event == event.upper()].to_json(orient='records'))

From the other post I've tried awaiting the df from get_eventdf(). WEEK is a preloaded pandas dataframe. Awaiting, i.e: df = await get_eventdf(WEEK) results in the same error.

I've tried fetching it in multiple ways, like so:

async function getData(endpoint) 
{
    return fetch(endpoint)
        .then((d) => d.json());
}
$: summary = getData(summary_endpoint);
$: shot = getData(shot_endpoint);

It works sometimes, but most of the times I get this error:

D:\project\frontend\node_modules\undici\lib\fetch\index.js:199
        Object.assign(new TypeError('fetch failed'), { cause: response.error })
                      ^

TypeError: fetch failed
    at Object.processResponse (D:\project\frontend\node_modules\undici\lib\fetch\index.js:199:23)
    at D:\mondaystats\frontend\node_modules\undici\lib\fetch\index.js:928:38
    at node:internal/process/task_queues:141:7
    at AsyncResource.runInAsyncScope (node:async_hooks:202:9)
    at AsyncResource.runMicrotask (node:internal/process/task_queues:138:8)
    at processTicksAndRejections (node:internal/process/task_queues:96:5) {
  cause: Error: connect ECONNREFUSED ::1:8000
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1187:16) {
    errno: -4078,
    code: 'ECONNREFUSED',
    syscall: 'connect',
    address: '::1',
    port: 8000
  }
}

Fetching just one of the endpoints works always, i.e:

$: summary = getData(summary_endpoint);
//$: shot = getData(shot_endpoint);

or

//$: summary = getData(summary_endpoint);
$: shot = getData(shot_endpoint);

I am perplexed because I have used the same backend with the same structure, serving jsons from pandas dataframes computed on the fly with about 40 endpoints in my first project (using React). I don't understand why this, with just 2 endpoints runs into trouble already.

Your help is much appreciated.

Upvotes: 2

Views: 1782

Answers (1)

Chris
Chris

Reputation: 34249

As described in this github issue, which is associated with the undici package that throws the TypeError: fetch failed, as shown in your error log, there seems to be an issue when connecting to localhost, which has to do with them switching the default ordering of DNS entries in node v17.

Until the issue gets resolved (see here), you might as well replace localhost with 127.0.0.1 in your HTTP requests to the API. For example, a fetch request to http://localhost:8000/mdstats_team should instead look like this:

http://127.0.0.1:8000/mdstats_team

On a side note, I would suggest you have a look at this answer on how to convert a DataFrame into JSON and return it from FastAPI backend, instead of the way you are currently using.

Upvotes: 3

Related Questions