英文:
How to connect React to Postgres on Vercel
问题
以下是翻译好的内容：
这是我得到的错误。
Uncaught (in promise) VercelPostgresError: VercelPostgresError - 'missing_connection_string': You did not supply a 'connectionString' and no 'POSTGRES_URL' env var was found.
这是我的代码。
cndb.js
import { sql, db } from "@vercel/postgres";
export default async function handler(req, res) {
const client = await db.connect({
POSTGRES_URL: process.env.local.POSTGRES_URL,
});
try {
await client.sql`CREATE TABLE Things (Name varchar(255), Pass varchar(255));`;
const names = ["thinga", "thingb"];
await client.sql`INSERT INTO Things (Name, Pass) VALUES (${names[0]}, ${names[1]});`;
} catch (error) {
return res.status(500).json({ error });
}
const things = await client.sql`SELECT * FROM Things;`;
return res.status(200).json({ things });
}
page0.js
import { Link } from "react-router-dom";
import { useState } from "react";
import handler from "./api/cndb";
import "./page0.css";
export function Page0() {
const [inputvalue, setinputvalue] = useState("");
return (
<>
<div className="Circle" onClick={() => handler(null, null)}>
提交
</div>
</>
);
}
这是我的文件结构
我尝试创建了.env.local、.env.development.local和.env文件，但对我没有起作用。在cndb.js中，我不确定在const client = await db.connect({})下面的内容是否正确。我也不确定我在page0.js中调用handler的方式是否正确。我尝试将其部署到本地主机和Vercel上。
此外，使用http://localhost:3000/api/cndb查看数据库的方式与react-router-dom和我的文件结构一起使用时不起作用，但我不知道为什么。
英文:
This is the error I'm getting.
Uncaught (in promise) VercelPostgresError: VercelPostgresError - 'missing_connection_string': You did not supply a 'connectionString' and no 'POSTGRES_URL' env var was found.
Here's my code.
cndb.js
import { sql, db } from "@vercel/postgres";
export default async function handler(req, res) {
const client = await db.connect({
POSTGRES_URL: process.env.local.POSTGRES_URL,
});
try {
await client.sql`CREATE TABLE Things ( Name varchar(255), Pass varchar(255) );`;
const names = ["thinga", "thingb"];
await client.sql`INSERT INTO Things (Name,Pass) VALUES (${names[0]},${names[1]});`;
} catch (error) {
return res.status(500).json({ error });
}
const things = await client.sql`SELECT * FROM Things;`;
return res.status(200).json({ things });
}
page0.js
import { Link } from "react-router-dom";
import { useState } from "react";
import handler from "./api/cndb";
import "./page0.css";
export function Page0() {
const [inputvalue, setinputvalue] = useState("");
return (
<>
<div className="Circle" onClick={() => handler(null, null)}>
submit
</div>
<>
);
}
Here's my file structure
I've tried creating .env.local and .env.development.local and .env files which didn`t work for me. In cndb.js I'm not sure if what I have under const client = await db.connect({}) is correct. I'm also unsure about the way I've called handle in page0.js. I've tried deploying it to both localhost and vercel.
Also this way of looking at the database http://localhost:3000/api/cndb does not work together with react-router-dom and my file structure but I don't know why.
答案1
得分: 1
环境变量不会从.env文件中加载到Vercel。您需要将它们添加到您的Vercel部署设置中。
您可以在这里添加POSTGRES_URL环境变量，位置在您的项目 -> 设置 -> 环境变量。
我还注意到您的截图中，您的.env文件没有被忽略，请确保不要将它推送到GitHub！
英文:
Environment variables are not loaded from .env files on Vercel. You need to add them to your Vercel deployment settings.
You can add the POSTGRES_URL environment variable here, at Your Project -> Settings -> Environment Variables.
Another thing I noticed about your screenshot is that your .env file is not being ignored – make sure not to push it to GitHub!
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论