* Update with-mongodb to be TypeScript-friendly
I slightly modified the approach so TypeScript can correctly infer types without actually having to type anything but the global:
**index.d.ts**
```ts
import { Db, MongoClient } from "mongodb";
declare global {
namespace NodeJS {
interface Global {
mongoCache: {
conn: {
client: MongoClient | null;
db: Db | null;
}
promise: Promise<MongoClient> | null;
};
}
}
}
```
* lint
Co-authored-by: Joe Haddad <joe.haddad@zeit.co>
I've looked at the example code and saw some consistent issues related to code style. The changes applied to this PR fixes the following points:
- Differences of line breaks styles between multiple files
- Differences of if statements styles
- Unnecessary comment
- A typo on a JSDocs
---
There were line breaks between statements on `pages/index.js`
````
export async function getServerSideProps(context) {
const { client } = await connectToDatabase()
const isConnected = await client.isConnected()
return {
props: { isConnected },
}
}
````
And this wasn't being applied to the MongoDB utility:
````
export async function connectToDatabase() {
if (cached.conn) return cached.conn
if (!cached.promise) {
const conn = {}
const opts = {
useNewUrlParser: true,
useUnifiedTopology: true,
}
{...}
````
And also, as shown in the snippet above, there are different styles of if statements being used.
With that being said, the reason I made this PR is because I think that this kind of inconsistent arises questions when a contributor looks to the codebase, even if this is a simple example.
This PR fixes 2 issues with the mongodb example:
### 1. Fallable Caching Strategy
Calling `connectToDatabase()` multiple times before it's cached results in multiple connections being created. The latest one created was becoming the "cached" one and the others dissappear into the background.
This is now fixed by using **promise sharing** so that only one connection can ever be created.
### 2. Problematic Hot Reload
During development you can monitor your database connections and see that it continues to create more and more connections over time. Some users have reported their [databases reaching maximum connection limits](https://github.com/vercel/next.js/discussions/12229).
This is resolved by using `global` to store the cached connection. It's not ideal but it is necessary.
* MongoDB Example
* Apply suggestions from code review
* Add changes based on feedback.
* clean up code with more descriptive props
* Use MongoDB in ServerSideProps instead of separate API route
* Update examples/with-mongodb/README.md
Co-authored-by: Luis Alvarez D. <luis@vercel.com>
* Update examples/with-mongodb/README.md
Co-authored-by: Luis Alvarez D. <luis@vercel.com>
* Update examples/with-mongodb/README.md
Co-authored-by: Luis Alvarez D. <luis@vercel.com>
* Update examples/with-mongodb/README.md
Co-authored-by: Luis Alvarez D. <luis@vercel.com>
* Update examples/with-mongodb/README.md
Co-authored-by: Luis Alvarez D. <luis@vercel.com>
* Update examples/with-mongodb/README.md
Co-authored-by: Luis Alvarez D. <luis@vercel.com>
* Update examples/with-mongodb/README.md
Co-authored-by: Luis Alvarez D. <luis@vercel.com>
Co-authored-by: Luis Alvarez D <luis@vercel.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
