saltyshiomix / nextron

⚡ Next.js + Electron ⚡
https://npm.im/nextron
MIT License
3.94k stars 227 forks source link

Isn’t Nextron’s internal communication allowed? #429

Open Suchlikesamsung opened 11 months ago

Suchlikesamsung commented 11 months ago

Nextron calls the endpoint API server under api/userdata. The API component creates a DB connection to retrieve data and requests the API component from a specific page to retrieve data. It is retrieved normally from localhost, but when a product is created, the path changes and it is not called properly. Am I doing something wrong?

Below are the relevant images and my package.json,code

"private": true, "name": "front-local-csms", "description": "My application description", "version": "1.0.0", "author": "user", "main": "app/background.js", "scripts": { "dev": "nextron --renderer-port 3001", "build": "nextron build", "build:mac": "nextron build --mac", "build:mac:universal": "nextron build --mac --universal", "build:linux": "nextron build --linux", "build:win32": "nextron build --win --ia32", "build:win64": "nextron build --win --x64", "postinstall": "electron-builder install-app-deps" }, "dependencies": { "axios": "^1.6.2", "electron-serve": "^1.1.0", "electron-store": "^8.1.0", "formik": "^2.4.5", "mysql2": "^3.6.5", "styled-components": "^6.1.1", "styled-reset": "^4.5.1" }, "devDependencies": { "@ant-design/icons": "^4.7.0", "@types/node": "^18.11.18", "@types/react": "^18.0.26", "antd": "^4.22.8", "electron": "^26.2.2", "electron-builder": "^24.6.4", "next": "^12.3.4", "nextron": "^8.12.0", "react": "^18.2.0", "react-dom": "^18.2.0", "typescript": "^5.2.2" }

pages/userinfor/index.tsx

const fetchData = async () => { try{ const response = await fetch('/api/userdata'); const result = await response.json(); console.log(result.data) return result.data; } catch (error){ console.error("component mount error!",error); throw error; } }

product console img

스크린샷 2023-12-11 오전 11 08 10

bm777 commented 11 months ago

@Suchlikesamsung what do you mean by internal communication? IPC or nextjs API way ?

Suchlikesamsung commented 11 months ago

@Suchlikesamsung what do you mean by internal communication? IPC or nextjs API way ?

This is endpoint communication using pages/api.

bm777 commented 11 months ago

ok. gotcha. what I simply do is define functions inside the pages/api/method.js file and export each of them. And I just call them in my pages.

Screenshot 2023-12-12 at 12 45 51

Suchlikesamsung commented 11 months ago

The problem is that it works normally on localhost, but when I create a product, it doesn't work as above. Do I need to call the function directly in a production environment?

this is my chargerborad component

const fetchData = async () => { try{ const response = await fetch('/api/userdata'); const result = await response.json(); console.log(result.data) return result.data; } catch (error){ console.error("component mount error!",error); throw error; } }

const ChargerBoard: React.FC = () => { const [data, setData] = useState<string | null>(null); useEffect(() => { fetchData() .then((apidata) => setData(apidata)) .catch((error) => console.error("error",error)); },[]);

return (

hello world!

) };

export default ChargerBoard;

좋아요. 알았어. 내가 하는 일은 pages/api/method.js파일 내부에 함수를 정의하고 각각을 내보내는 것입니다. 그리고 난 그냥 내 페이지에서 그들을 호출합니다.

스크린샷 2023-12-12 at 12 45 51

bm777 commented 11 months ago

@Suchlikesamsung I cannot see your image, you just have to call that function in prod, and it works. and in that function, you call fetch your data from anywhere without issue :)