#Endpoints params and Dynamic routing

7 messages · Page 1 of 1 (latest)

prisma swift
#

Hello everyone, I have a question. I'm using the example from the official website to build an Endpoint in my own project, and it's located at src/pages/api/[id].json.ts. It looks like this:

import type { APIRoute } from 'astro'
const usernames = ['Sarah', 'Chris', 'Dan']
export const get: APIRoute = ({ params, request }) => {
  const id = params.id
  return {
    body: JSON.stringify({
      name: usernames[id],
    }),
  }
}
export function getStaticPaths() {
  return [
    { params: { id: '0' } },
    { params: { id: '1' } },
    { params: { id: '2' } },
  ]
}

Later, I want to use the JSON file generated by this Endpoint at my project's root domain, for example, I want to use /api/1.json generated by it. So I used fetch to request it in src/pages/index.astro, like this:

---


const res = await fetch('/api/1.json') // ❌ This will result in an error:  `Failed to parse URL from /api/1.json`
const res = await fetch('http://localhost:8001/api/1.json') //  ✅ This will result in a successful request.

---

I need to deploy it to Netlify or other platforms after development, and the root domain will change. So I think I should use relative paths to request in 'fetch'. However, using a relative path like in the example above will result in an error. Has anyone found any errors in my code? I hope someone can help me solve this problem. Thank you 🥰 .

fair gulch
#

On the server fetch requires the full url of the resource to fetch
What you can do is use the SITE environment variable to prefix your path

marble elkBOT
#
Learn: Using environment variables - Default environment variables #default-environment-variables

Astro includes a few environment variables out-of-the-box:
import.meta.env.MODE: The mode your site is running in. This is development when running astro dev and production when running astro build.
import.meta.env.PROD: true if your site is running in production; false otherwise.
import.meta.env.DEV: true if your site is running in development; false otherwise. Always the opposite of import.meta.env.PROD.
import.meta.env.BASE_URL: The base url your site is being served from. This is determined by the base config option.
import.meta.env.SITE: This is set to the site option specified in your project’s astro.config.
import.meta.env.ASSETS_PREFIX: The prefix for Astro-generated asset links if the build.assetsPrefix config option is set. This can be used to create asset links not handled by Astro.

read more

fair gulch
#

By the way, this probably won't work in SSG, since at build time, the server won't be up to be able to process that request

prisma swift
#

Hello! Thank you for your quick response. Actually, I am currently doing the same thing. like this: const href = import.meta.env.PROD ? 'https://ekar-gallery.netlify.app/' : Astro.request.url, I thought what I did was wrong, but it seems that I just didn't do it well enough, rather than doing it wrong.

fair gulch
#

Unless you want to query the potentially stale data from the previous deploys that you did

prisma swift
#

Thank you again for your help. Have a great day🫶 !