From 1f34d6dfbad346a845823ccb5fb56d2b89ff52b9 Mon Sep 17 00:00:00 2001 From: Henrik Wenz Date: Tue, 16 Aug 2022 16:13:03 +0200 Subject: [PATCH] =?UTF-8?q?[Docs]=C2=A0Update=20mongodb=20example?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../lib/{mongodb.js => mongodb.ts} | 4 ++ examples/with-mongodb/package.json | 11 ++-- .../pages/{index.js => index.tsx} | 51 ++++++++++--------- examples/with-mongodb/tsconfig.json | 20 ++++++++ examples/with-mongodb/types/mongodb.d.ts | 5 ++ 5 files changed, 64 insertions(+), 27 deletions(-) rename examples/with-mongodb/lib/{mongodb.js => mongodb.ts} (90%) rename examples/with-mongodb/pages/{index.js => index.tsx} (97%) create mode 100644 examples/with-mongodb/tsconfig.json create mode 100644 examples/with-mongodb/types/mongodb.d.ts diff --git a/examples/with-mongodb/lib/mongodb.js b/examples/with-mongodb/lib/mongodb.ts similarity index 90% rename from examples/with-mongodb/lib/mongodb.js rename to examples/with-mongodb/lib/mongodb.ts index 0eef49bf499..7aaf63e04ce 100644 --- a/examples/with-mongodb/lib/mongodb.js +++ b/examples/with-mongodb/lib/mongodb.ts @@ -1,5 +1,9 @@ import { MongoClient } from 'mongodb' +if (!process.env.MONGODB_URI) { + throw new Error('Invalid environment variable: "MONGODB_URI"') +} + const uri = process.env.MONGODB_URI const options = {} diff --git a/examples/with-mongodb/package.json b/examples/with-mongodb/package.json index f03fe2598d0..84979ab24b0 100644 --- a/examples/with-mongodb/package.json +++ b/examples/with-mongodb/package.json @@ -6,9 +6,14 @@ "start": "next start" }, "dependencies": { - "mongodb": "^4.1.3", + "mongodb": "^4.8.1", "next": "latest", - "react": "^17.0.2", - "react-dom": "^17.0.2" + "react": "^18.2.0", + "react-dom": "^18.2.0" + }, + "devDependencies": { + "@types/node": "18.7.5", + "@types/react": "16.9.17", + "typescript": "4.6.3" } } diff --git a/examples/with-mongodb/pages/index.js b/examples/with-mongodb/pages/index.tsx similarity index 97% rename from examples/with-mongodb/pages/index.js rename to examples/with-mongodb/pages/index.tsx index 86b32f11343..5d405015029 100644 --- a/examples/with-mongodb/pages/index.js +++ b/examples/with-mongodb/pages/index.tsx @@ -1,7 +1,33 @@ import Head from 'next/head' import clientPromise from '../lib/mongodb' +import { InferGetServerSidePropsType } from 'next' -export default function Home({ isConnected }) { +export async function getServerSideProps(context) { + try { + await clientPromise + // `await clientPromise` will use the default database passed in the MONGODB_URI + // However you can use another database (e.g. myDatabase) by replacing the `await clientPromise` with the following code: + // + // `const client = await clientPromise` + // `const db = client.db("myDatabase")` + // + // Then you can execute queries against your database like so: + // db.find({}) or any of the MongoDB Node Driver commands + + return { + props: { isConnected: true }, + } + } catch (e) { + console.error(e) + return { + props: { isConnected: false }, + } + } +} + +export default function Home({ + isConnected, +}: InferGetServerSidePropsType) { return (
@@ -221,26 +247,3 @@ export default function Home({ isConnected }) {
) } - -export async function getServerSideProps(context) { - try { - await clientPromise - // `await clientPromise` will use the default database passed in the MONGODB_URI - // However you can use another database (e.g. myDatabase) by replacing the `await clientPromise` with the following code: - // - // `const client = await clientPromise` - // `const db = client.db("myDatabase")` - // - // Then you can execute queries against your database like so: - // db.find({}) or any of the MongoDB Node Driver commands - - return { - props: { isConnected: true }, - } - } catch (e) { - console.error(e) - return { - props: { isConnected: false }, - } - } -} diff --git a/examples/with-mongodb/tsconfig.json b/examples/with-mongodb/tsconfig.json new file mode 100644 index 00000000000..50bcb22f653 --- /dev/null +++ b/examples/with-mongodb/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "noEmit": true, + "incremental": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve" + }, + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], + "exclude": ["node_modules"] +} diff --git a/examples/with-mongodb/types/mongodb.d.ts b/examples/with-mongodb/types/mongodb.d.ts new file mode 100644 index 00000000000..440c0b19962 --- /dev/null +++ b/examples/with-mongodb/types/mongodb.d.ts @@ -0,0 +1,5 @@ +import { MongoClient } from 'mongodb' + +declare global { + var _mongoClientPromise: Promise +}