How to call GET in +page.server.ts route from another route

[xpluscal]

I currently have a structure like this:

-routeA
|-- +layout.server.ts
|-- +layout.svelte
|-- +page.svelte
-routeB
|-- +page.svelte

Now I would like to get data from endpoint "routeA" into page from "routeB".
In routeA's layout.server.ts I have "load()" and "GET()" functions.

Calling routeA's GET through fetch from routeB, but the result is not json, but the full HTML page instead, even though I am adding the following headers to fetch, like so:

//routeB/+page.svelte
let res = await fetch('/routeA', {
    method: 'GET',
    headers: {
      "content-type": "application/json",
      "accept": "application/json"
    }
  })

Any help much appreciated

[kesdigital]

Actually, you don't have an endpoint at routeA, endpoints are written in server.ts files and cannot exist at the same route as a page.svelte. So, your call to /routeA sends a GET request to the page, thus the HTML response.
If you want to share data across pages, I'd recommend using PageData, which makes data returned from a page.js | page.server.js available to all other pages.

// routeA/page.js | page.server.js

export function load() {
  return { myData } 
}

// routeA/page.svelte
<script>
  export let data;

  console.log(data.myData)
</script>

// routeB/page.svelte
<script>
  export let data;

  console.log(data.myData)
</script>

[xpluscal]

Hey! Thx.
Not sure I follow completely, how is in your routeB example the data available if I have not been to routeA prior?

[eltigerchino]

You have a few options:

1. Create a GET endpoint in +server.ts which you can fetch from anywhere (likely inside +page.ts and +layout.ts).

-someResource
|-- +server.ts // GET endpoint here
-routeA
|-- +layout.ts // fetch /someResource
|-- +layout.svelte
|-- +page.svelte
-routeB
|-- +page.ts // fetch /someResource
|-- +page.svelte

2. Retrieve your data in a load function inside +layout.server.ts and use a (group) so both routes can inherit the data.

-(yourGroup)/
|-- -routeA/
|-- |-- +layout.svelte
|-- |-- +page.svelte // receive data prop
|-- -routeB/
|-- |-- +page.svelte  // receive data prop
|-- +layout.server.ts // load function returns data
|-- +layout.svelte 

3. Abstract the retrieval of your data into a function which you can call in any +page.server.ts or +layout.server.ts files.

-api.ts // export getSomeData()
-routeA
|-- +layout.server.ts // call getSomeData()
|-- +layout.svelte
|-- +page.svelte
-routeB
|-- +page.server.ts // call getSomeData()
|-- +page.svelte

[xpluscal]

Hey @s3812497 thank you for the detailed response!
I had actually tried option 1 in the meantime and struggling a little with the response.

I created a +server.ts in a api/routeA folder with a GET Action, returning this:

// api/routeA/+server.ts
export const GET: Action = async ({ locals }) => {
...
return new Response({
    status: 200,
		headers: {
			'Content-Type': 'application/json'
		},
    body: JSON.stringify({
      content: ...
    })
  })
 }

and in routeB I am calling it like this:

let res = await fetch('/routeA', {
    method: 'GET',
    header: {
      'Accept': 'application/json'
    }
  })
 await res.json();

The weird thing is that it returns [Object Object] aka invalid JSON.
I searched the docs but couldn't find a recent example that's similar.

Help much appreciated :)

[eltigerchino]

You can also use the json helper to return your response.

// api/routeA/+server.ts
import { json } from '@sveltejs/kit'

export const GET: RequestHandler = async ({ locals }) => {
...
  const data = { ... }
  return json(data);
}

I think the issue might be the object you've passed in to the Response constructor.

// api/routeA/+server.ts
export const GET: Action = async ({ locals }) => {
...
return new Response({
    status: 200,
		headers: {
			'Content-Type': 'application/json'
		},
    body: JSON.stringify({
      content: ...
    })
  })
 }

I think it's suppose to be something like this instead:

const options = { status, headers }
const body = JSON.stringify({ data })
new Response(body, options}

https://developer.mozilla.org/en-US/docs/Web/API/Response/Response

[xpluscal]

Hey @s3812497 the json() did the trick!
I had the response indeed misconfigured, too.

So basically everything you said.
Thx!!