How to fetch from Netlify function

Support
,
1

The Getting started tutorial shows how to create a Netlify function and call it directly in the browser using netlify dev. I wrote a function to query a Fauna database, which returns the correct data in the browser, but when I try to access that data in my application, I keep getting 404 not found. Here’s my function, which just gets the document from the ‘maps’ collection with a specific _id of ‘1’

const faunadb = require('faunadb')
const q = faunadb.query;
  
exports.handler = async () => {
  // get a db client
  const client = new faunadb.Client({
    secret: process.env.FAUNA_KEY,
    domain: 'db.us.fauna.com',
  });
  return await client.query(
    q.Get(q.Ref(q.Collection('maps'),'1'))
  ) 
    .then((ret) => {
      return {
        statusCode: 200,
        body: JSON.stringify(ret.data),
      }
    })
    .catch((err) => {
      console.log('Error:', err)
      return {
        statusCode: 400,
        body: JSON.stringify(err)
      }
    })
};

If I run netlify dev and browse to http://localhost:8888/.netlify/functions/get-mapid
I get the expected response data {"mapId":12322}

So I wrote an api to access this data from my application. That’s where I’m having trouble.

read = async () => {
    return await fetch('/.netlify/functions/get-mapid').then((response) => {
    console.log('resp in api', response)
    return response.json()
  })
}

export default {
  read: read,
}

When this read function gets called from a preact component, a 404 response is always logged. I’m sure I’m doing something dumb, but I’m having trouble seeing it. Thanks for any help on this!

Best,
Dow

2

Hey @troutshorty

Have you tried fetch with the domain?

e.g.

fetch('http://localhost:8888/.netlify/functions/get-mapid')

or

fetch('https://mysite.netlify.app/.netlify/functions/get-mapid')
3

Thanks @coelmay!

I tried your suggestion, and I’m getting 200 response status now. It would be best if I could get it to work with just the path so I could test the code in netlify dev and know it would still work in deployment. Do you know of a way to do that?

4

If you are using client-side fetch() it is possible to use a /path/to/something. Using fetch() from node-fetch you need to use an absolute URL as mentioned here and here.

To get around this you can access process.env.URL so there is no need to change the URL when deployed or running locally e.g.

fetch(`${process.env.URL}/.netlify/functions/get-mapid`)
1 Like