How to make fetch request on server before sending html to client?

Hello everyone, I have a question about fetching data. I want to fetch data from an api and send html based on what I fetch.

import { createResource } from "solid-js";

const fetchData = async () => {
  "use server";
  const response = await fetch(
    "http://localhost:5000/api/items?" +
      new URLSearchParams({
        type: "11",
        min: "0",
        max: "1000000",
        polygon:
          "29.00743125000136 59.284420699563725, 13.36290000000119 59.284420699563725, -2.2816312499989806 59.284420699563725, -2.2816312499989806 32.5773969429995, 13.36290000000119 32.5773969429995, 29.00743125000136 32.5773969429995, 29.00743125000136 59.284420699563725",
        polygon2: "",
        itemSort: "new",
      })
  );
  const res = await response.json();
  console.log(res);
  return res;
};

export default function Home() {
  const data = createResource(fetchData);
  console.log(data);

  return <main>{data.toString()}</main>;
}

import { createResource } from "solid-js";

const fetchData = async () => {
  "use server";
  const response = await fetch(
    "http://localhost:5000/api/items?" +
      new URLSearchParams({
        type: "11",
        min: "0",
        max: "1000000",
        polygon:
          "29.00743125000136 59.284420699563725, 13.36290000000119 59.284420699563725, -2.2816312499989806 59.284420699563725, -2.2816312499989806 32.5773969429995, 13.36290000000119 32.5773969429995, 29.00743125000136 32.5773969429995, 29.00743125000136 59.284420699563725",
        polygon2: "",
        itemSort: "new",
      })
  );
  const res = await response.json();
  console.log(res);
  return res;
};

export default function Home() {
  const data = createResource(fetchData);
  console.log(data);

  return <main>{data.toString()}</main>;
}

The way I have it set up now results in the console.log(res); in the async fetchData function giving me the correct result, but the console.log(data); returns this:

[
  [Function: read] { loading: true, error: undefined, state: 'pending' },
  { refetch: [Function: load], mutate: [Function: mutate] }
]

[
  [Function: read] { loading: true, error: undefined, state: 'pending' },
  { refetch: [Function: load], mutate: [Function: mutate] }
]

Question: How do I make the sending of the html to the frontend wait until the async function has completed

What I have tried: I have already tried to make the function Home() async. This resulted in the whole component not rendering.

Help would be appreciated!

mdynnl•6/9/24, 5:23 PM

https://docs.solidjs.com/solid-start/building-your-application/data-loading#data-loading-always-on-the-server

Mmdynnl <https://docs.solidjs.com/solid-start/building-your-application/data-loading#dat...

aliOP•6/9/24, 6:08 PM

Thanks for the reply. I have changed my code now to this:

but instead of getting the rows from the DB, in <main>{data()}</main> I get:

"undefinedundefinedundefinedundefinedundefined"
In the api, I limited the rows to be returned to 5. So it seems it is giving me the right amount of results, but they are all undefined.
Do you know why?

mdynnl•6/9/24, 6:29 PM

you could check the actual response of the api, solid start doesn't have anything to do with this given the api response is json.

peerreynders•6/9/24, 6:45 PM

Use

If you want to prevent SolidStart from streaming the response before has settled.

Mmdynnl you could check the actual response of the api, solid start doesn't have anythin...

aliOP•6/9/24, 6:47 PM

It happens with all apis. Also, I have logged the response ( console.log(res);) and it is fine, but in the browser I get undefined

Aali It happens with all apis. Also, I have logged the response ( console.log(res);) ...

peerreynders•6/9/24, 7:40 PM

Because you are not using the response will start streaming before the promise from the API has settled.

Once it settles Seroval will try to serialize the result to be sent to the client.

Perhaps Seroval is not able to serialize the type of data that your API is returning.

Supported Types

GitHub

seroval/docs/compatibility.md at main · lxsmnsyc/seroval

Stringify JS values. Contribute to lxsmnsyc/seroval development by creating an account on GitHub.