SolidJS•7d ago

Solid-Start error when using fetch/axios/ky to call to external service SSR

Hi I'm new at Solid-Start. Currently, I'd like to call to external API. I try to use all of fetch/axios/ky but all of them returned error. For detail: 1. If I call API inside onMount() it can work as normal.

onMount(() => {
    productService.getLatestProductList([
      "ca0c1ebd-71db-403f-90e0-a1a9a5295b01",
    ]);

onMount(() => {
    productService.getLatestProductList([
      "ca0c1ebd-71db-403f-90e0-a1a9a5295b01",
    ]);

2. If I call outside of onMount() like inside a createResouse() like

const [products, { refetch }] = createResource(async () => {
  const res = await fetch(
    "http://localhost:3001/api/products?page=1&limit=10&categoryIds=0e8df9e3-03ce-413f-8d84-5794f9b610db"
  );
  const data = await (res.json() as Promise<PagingData<Product>>);
  return data;
});

const [products, { refetch }] = createResource(async () => {
  const res = await fetch(
    "http://localhost:3001/api/products?page=1&limit=10&categoryIds=0e8df9e3-03ce-413f-8d84-5794f9b610db"
  );
  const data = await (res.json() as Promise<PagingData<Product>>);
  return data;
});

They all return the error

http://localhost:3001/api/products?page=1&limit=12&categoryIds=0e8df9e3-03ce-413f-8d84-5794f9b610db
node:internal/deps/undici/undici:13502
      Error.captureStackTrace(err);
            ^

TypeError: fetch failed
    at node:internal/deps/undici/undici:13502:13
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
    at async function_ (file:///home/quangnv/electronic-ecommerce/store-front/node_modules/.pnpm/[email protected]/node_modules/ky/distribution/core/Ky.js:18:28)
    at async Ky._retry (file:///home/quangnv/electronic-ecommerce/store-front/node_modules/.pnpm/[email protected]/node_modules/ky/distribution/core/Ky.js:187:20)
    at async result.<computed> [as json] (file:///home/quangnv/electronic-ecommerce/store-front/node_modules/.pnpm/[email protected]/node_modules/ky/distribution/core/Ky.js:54:34) {
  [cause]: Error: connect ECONNREFUSED 127.0.0.1:3001
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1634:16)
      at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
    errno: -111,
    code: 'ECONNREFUSED',
    syscall: 'connect',
    address: '127.0.0.1',
    port: 3001
  }
}

http://localhost:3001/api/products?page=1&limit=12&categoryIds=0e8df9e3-03ce-413f-8d84-5794f9b610db
node:internal/deps/undici/undici:13502
      Error.captureStackTrace(err);
            ^

TypeError: fetch failed
    at node:internal/deps/undici/undici:13502:13
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
    at async function_ (file:///home/quangnv/electronic-ecommerce/store-front/node_modules/.pnpm/[email protected]/node_modules/ky/distribution/core/Ky.js:18:28)
    at async Ky._retry (file:///home/quangnv/electronic-ecommerce/store-front/node_modules/.pnpm/[email protected]/node_modules/ky/distribution/core/Ky.js:187:20)
    at async result.<computed> [as json] (file:///home/quangnv/electronic-ecommerce/store-front/node_modules/.pnpm/[email protected]/node_modules/ky/distribution/core/Ky.js:54:34) {
  [cause]: Error: connect ECONNREFUSED 127.0.0.1:3001
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1634:16)
      at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
    errno: -111,
    code: 'ECONNREFUSED',
    syscall: 'connect',
    address: '127.0.0.1',
    port: 3001
  }
}

2 Replies

Madaxen86•7d ago

Tough to tell. It seems the api is rejecting the request, maybe because the requests are missing an api key or the you need to add the frontend domain (probably localhost:3000) to the list of allowed domains.

quangnguyen1311OP•7d ago

Thank you that's right. I've fixed it

Gaming

Programming

Solid-Start error when using fetch/axios/ky to call to external service SSR

Did you find this page helpful?