fetching data in getStaticProps

Unanswered

Chausie posted this in #help-forum

ChausieOP

2023-12-26T13:50:13.000Z

hey guys i try to fetch data in getStaticProps but the api url throws error:
it works fine in normal components

import { useEffect, useState } from "react";
import useSWR from "swr";

export default function LastSalesPage(props) {
  const [sales, setSales] = useState(props.sales);
  //   const [isLoading, setIsLoading] = useState(false);

  const { data, error } = useSWR(
    "https://nextjs-course-46616-default-rtdb.europe-west1.firebasedatabase.app/sales.json",
    (url) => fetch(url).then((res) => res.json())
  );

  useEffect(() => {
    if (data) {
      const transformedSales = [];
      for (const key in data) {
        transformedSales.push({
          id: key,
          username: data[key].username,
          volume: data[key].volume,
        });
      }
      setSales(transformedSales);
    }
  }, [data]);
if (error) {
    return <p>Failed to load.</p>;
  }

  if (!data || !sales) {
    return <p>Loading...</p>;
  }

  return (
    <ul>
      {sales.map((sale) => (
        <li key={sale.id}>
          {sale.username} - ${sale.volume}
        </li>
      ))}
    </ul>
  );
}


export async function getStaticProps(context) {
 
    const response = await fetch(
      "https://nextjs-course-46616-default-rtdb.europe-west1.firebasedatabase.app/sales.json"
    );

    const data = await response.json();
    const transformedSales = [];
    console.log(transformedSales);
    for (const key in data) {
      transformedSales.push({
        id: key,
        username: data[key].username,
        volume: data[key].volume,
      });
    }

    return { props: { sales: transformedSales } };

}

67 Replies

Peterbald

2023-12-26T14:10:02.000Z

Please try to put the error handling in getStaticProps function.
export async function getStaticProps(context) {
try {
const response = await fetch(
"https://nextjs-course-46616-default-rtdb.europe-west1.firebasedatabase.app/sales.json"
);

if (!response.ok) {
throw new Error('Failed to fetch');
}

const data = await response.json();
const transformedSales = [];

for (const key in data) {
transformedSales.push({
id: key,
username: data[key].username,
volume: data[key].volume,
});
}

return { props: { sales: transformedSales } };
} catch (error) {
console.error('Error fetching data:', error);
return { props: { sales: [] } }; // Return empty array in case of error
}

This is the code I can provide

@Peterbald Please try to put the error handling in getStaticProps function. export async function getStaticProps(context) { try { const response = await fetch( "https://nextjs-course-46616-default-rtdb.europe-west1.firebasedatabase.app/sales.json" ); if (!response.ok) { throw new Error('Failed to fetch'); } const data = await response.json(); const transformedSales = []; for (const key in data) { transformedSales.push({ id: key, username: data[key].username, volume: data[key].volume, }); } return { props: { sales: transformedSales } }; } catch (error) { console.error('Error fetching data:', error); return { props: { sales: [] } }; // Return empty array in case of error }

ChausieOP

2023-12-26T14:29:04.000Z

I have done these but it just sends empty array on gives the error back

Peterbald

2023-12-26T14:30:40.000Z

Can you show me the error?

@Peterbald Can you show me the error?

ChausieOP

2023-12-26T14:32:10.000Z

Error fetching data: TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11730:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async getStaticProps (webpack-internal:///./pages/last-sales.js:95:26) {
  cause: Error: Client network socket disconnected before secure TLS connection was established
      at connResetException (node:internal/errors:787:14)
      at TLSSocket.onConnectEnd (node:_tls_wrap:1727:19)
      at TLSSocket.emit (node:events:526:35)
      at endReadableNT (node:internal/streams/readable:1589:12)
      at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
    code: 'ECONNRESET',
    path: undefined,
    host: 'nextjs-course-46616-default-rtdb.europe-west1.firebasedatabase.app',
    port: 443,
    localAddress: null
  }
}

Peterbald

2023-12-26T14:36:37.000Z

The url is valid?

Please try to make the simple Node.js Script for testing URL

const fetch = require('node-fetch');

fetch('https://nextjs-course-46616-default-rtdb.europe-west1.firebasedatabase.app/sales.json')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error fetching data:', error));

This is the script

@Peterbald The url is valid?

ChausieOP

2023-12-26T14:39:05.000Z

yes i have tried it in normal functions it works but not with getStaticProps

Peterbald

2023-12-26T14:44:21.000Z

getStaticProps is working on the other Components?

ChausieOP

2023-12-26T14:47:06.000Z

No the fetching method doesn't work with async function getStaticProps only but it works without any issues in normal components

Peterbald

2023-12-26T14:49:08.000Z

export const getStaticProps = (async (context) {
try {
const response = await fetch(
"https://nextjs-course-46616-default-rtdb.europe-west1.firebasedatabase.app/sales.json"
);

if (!response.ok) {
throw new Error('Failed to fetch');
}

const data = await response.json();
const transformedSales = [];

for (const key in data) {
transformedSales.push({
id: key,
username: data[key].username,
volume: data[key].volume,
});
}

return { props: { sales: transformedSales } };
} catch (error) {
console.error('Error fetching data:', error);
return { props: { sales: [] } }; // Return empty array in case of error
})

Please try to make the function like this

@Peterbald export const getStaticProps = (async (context) { try { const response = await fetch( "https://nextjs-course-46616-default-rtdb.europe-west1.firebasedatabase.app/sales.json" ); if (!response.ok) { throw new Error('Failed to fetch'); } const data = await response.json(); const transformedSales = []; for (const key in data) { transformedSales.push({ id: key, username: data[key].username, volume: data[key].volume, }); } return { props: { sales: transformedSales } }; } catch (error) { console.error('Error fetching data:', error); return { props: { sales: [] } }; // Return empty array in case of error })

ChausieOP

2023-12-26T14:55:21.000Z

Error fetching data: TypeError: fetch failed at Object.fetch (node:internal/deps/undici/undici:11730:11) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async getStaticProps (webpack-internal:///./pages/last-sales.js:95:26) { cause: Error: read ECONNRESET at TLSWrap.onStreamRead (node:internal/stream_base_commons:217:20) { errno: -4077, code: 'ECONNRESET', syscall: 'read' } } Error fetching data: TypeError: fetch failed at Object.fetch (node:internal/deps/undici/undici:11730:11) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async getStaticProps (webpack-internal:///./pages/last-sales.js:95:26) { cause: Error: read ECONNRESET at TLSWrap.onStreamRead (node:internal/stream_base_commons:217:20) { errno: -4077, code: 'ECONNRESET', syscall: 'read' } }

Peterbald

2023-12-26T14:56:27.000Z

remove .next folder and re-run the server and refresh your browser.

very weird

@Peterbald remove .next folder and re-run the server and refresh your browser.

ChausieOP

2023-12-26T15:00:57.000Z

it gave the same error again

Peterbald

2023-12-26T15:14:19.000Z

try to remove context in getStaticProps function parameter

ChausieOP

2023-12-26T15:45:20.000Z

Didn't change here is the photo from browser

Peterbald

2023-12-26T16:20:34.000Z

Can you provide the whole code?

ChausieOP

2023-12-26T17:17:22.000Z

I have provided it in the beginning