Cannot perform data fetching in Astro using Netlify Function

[maxcell]

trafficstars

Describe the bug

It appears when using Astro's Data Fetching the build step for the project fails to move forward because the functions finish building at a different point in time after the time it would be called upon. This means that the route wouldn't be generated and fail the build.

Steps to reproduce

1. Git clone the project found here https://github.com/maxcell/test-astro-fetching
2. Make sure to install dependencies (npm install)
3. Make sure to have the Netlify CLI installed (npm install -g netlify-cli)
4. Run the netlify dev command (ntl dev)

From there this should produce:

error   request to http://localhost:8888/.netlify/functions/joke failed, reason: connect ECONNREFUSED 127.0.0.1:8888
    at ClientRequest.<anonymous> (file:///Users/USERNAME/github/netlify/astro-toolbox/node_modules/node-fetch/src/index.js:108:11)
    at ClientRequest.emit (node:events:390:28)
    at Socket.socketErrorListener (node:_http_client:447:9)
    at Socket.emit (node:events:390:28)
    at emitErrorNT (node:internal/streams/destroy:157:8)
    at emitErrorCloseNT (node:internal/streams/destroy:122:3)
    at processTicksAndRejections (node:internal/process/task_queues:83:21)
 error   request to http://localhost:8888/.netlify/functions/joke failed, reason: connect ECONNREFUSED 127.0.0.1:8888
    at ClientRequest.<anonymous> (file:///Users/USERNAME/github/netlify/astro-toolbox/node_modules/node-fetch/src/index.js:108:11)
    at ClientRequest.emit (node:events:390:28)
    at Socket.socketErrorListener (node:_http_client:447:9)
    at Socket.emit (node:events:390:28)
    at emitErrorNT (node:internal/streams/destroy:157:8)
    at emitErrorCloseNT (node:internal/streams/destroy:122:3)

Configuration

There is no netlify.toml set directly so it more than likely uses the defaults such as npm run build and the set directory of dist/ for the build directory.

Environment

System: OS: macOS 12.4 CPU: (8) arm64 Apple M1 Memory: 438.69 MB / 16.00 GB Shell: 5.8.1 - /bin/zsh Binaries: Node: 16.13.0 - ~/.volta/tools/image/node/16.13.0/bin/node Yarn: 1.22.17 - ~/.volta/tools/image/yarn/1.22.17/bin/yarn npm: 8.1.0 - ~/.volta/tools/image/node/16.13.0/bin/npm

[danez]

The underlying issue here is that we end up in a deadlock, as the netlify dev server is waiting for astro to finish starting, but astro is waiting for the function to be up :)

A quick fix, for now, is to change the fetch code to handle errors better. Here is a simple example.

let data = ''
try {
    const response = await fetch("http://localhost:8888/.netlify/functions/test")
    data = await response.text()
} catch {}

This will catch and ignore the initial error and things will boot up correctly and it starts working.

[maxcell]

This works! Thank you for the fix!

What would you consider a possible solution for this be? Would this entail basically having to rethink how we process files? Or do you imagine that this is something we'd just want to address at a per framework solution?

[hrishikesh-k]

The way I got this to work in the past when using Astro was was by executing npx netlify functions:serve in a terminal window and running the Astro dev server in another terminal window. I obviously also had to hardcode the fetch URL to localhost:9999 (I don't recall what the port number was), but at least that works.

[orkunzozturk]

@Hrishikesh-K thanks for the tip! netlify dev was causing this, forcing us to comment out all calls to the serverless function at boot. will this solution work in production?

[hrishikesh-k]

The deadlock will always exist - it doesn't matter if it's the CLI or the production. If you're trying to deploy Netlify Functions and also trying to fetch data from that function during the same build, it would not work. If you deploy Netlify Functions before, then use the next build to fetch data from the functions, that would work. If you use Astro SSR and try to fetch data from Netlify Functions, that should work too.