Where I can do some initialisation of app like to init database connection?

[thinksource]

Hi, I want to use typescript like db.ts to initialize the database connection.
I can not write it in next.config.js, since I using typeORM it is base on typescript not javascript to connection database.
Where or which file can do it to make sure the database only connected once during the booting app process.
any variable can share as the global variable during the running of app? where to set them.

[jamesmosier]

There is no singleton like that available with Next applications. Instead you initialize the database connection as you need it. For example the MongoDB example shows this off:

next.js/examples/with-mongodb/pages/index.js

Lines 225 to 233 in cdff5df

	export async function getServerSideProps(context) {
	const { client } = await connectToDatabase()
	const isConnected = await client.isConnected() // Returns true or false
	return {
	props: { isConnected },
	}
	}

[dmmz]

I managed to do this with a singleton to manage connections with mongodb. (I haven't test it in production)

qry/mongoConnection.tsx

import { MongoClient, Db } from 'mongodb';

const host = process.env.HOST || 'localhost';

let db: Db;

const getDb = async (): Db => {
  if (db) {
    console.log('reusing connection');
    return db;
  }
  console.log('connecting');
  const client = await MongoClient.connect(`mongodb://${host}`, { useNewUrlParser: true, useUnifiedTopology: true });
  db = client.db('mydb');

  return db;
};

export { getDb };

Then I have a a file for the query

qry/getStandards.tsx

import { getDb } from './mongoConnection';

export type OptionType = { label: string; value: string };

const getStandards = async (): Promise<Array<OptionType>> => {
  const db = await getDb();
  return db
    .collection('standards')
    .aggregate([
    .....
   ]).toArray();

Then from my page I use that query

pages/index.tsx

import getStandards, { OptionType } from '../qrys/getStandards';

const Home: FunctionComponent<{ standards: Array<OptionType> }> = ({ standards }) => {
   // here I can use the result of the query
}

export const getServerSideProps: GetServerSideProps = async () => {
  const standards: Array<OptionType> = await getStandards();
  return { props: { standards } };
};

Logs say it only connects once and reuses connection among several requests:

    wait  - compiling...
    event - compiled successfully 
    connecting
    reusing connection
    reusing connection
    reusing connection

[aspiiire]

There is no singleton like that available with Next applications. Instead you initialize the database connection as you need it. For example the MongoDB example shows this off:

next.js/examples/with-mongodb/pages/index.js

Lines 225 to 233 in cdff5df

	export async function getServerSideProps(context) {
	const { client } = await connectToDatabase()
	const isConnected = await client.isConnected() // Returns true or false
	return {
	props: { isConnected },
	}
	}

Imho this reply is not clear enough, I answer only to help others in my same position... I found an example util in a mongodb example project, so the code is not written by me.

After creating this file, for example under utils

import { MongoClient } from 'mongodb'

const { MONGODB_URI, MONGODB_DB } = process.env

if (!MONGODB_URI) {
  throw new Error(
    'Please define the MONGODB_URI environment variable inside .env.local'
  )
}

if (!MONGODB_DB) {
  throw new Error(
    'Please define the MONGODB_DB environment variable inside .env.local'
  )
}

/**
 * Global is used here to maintain a cached connection across hot reloads
 * in development. This prevents connections growing exponentially
 * during API Route usage.
 */
let cached = global.mongo

if (!cached) {
  cached = global.mongo = { conn: null, promise: null }
}

export async function connectToDatabase() {
  if (cached.conn) {
    return cached.conn
  }

  if (!cached.promise) {
    const opts = {
      useNewUrlParser: true,
      useUnifiedTopology: true,
    }

    cached.promise = MongoClient.connect(MONGODB_URI, opts).then((client) => {
      return {
        client,
        db: client.db(MONGODB_DB),
      }
    })
  }
  cached.conn = await cached.promise
  return cached.conn
}

You then can import it

import { connectToDatabase } from "../util/mongodb"

Then you can go ahead with the example of @jamesmosier

This is the project example that I have took the file from https://github.com/lucasmmaidana/nextbnb/blob/main/pages/index.js

[hhzhgit]

base on this example i wrote a code that i was able to connect to database
but problem is that on every api call that need database u should first using dbconnect() or something like isdbConnected() and this will make a boilerplate
the correct way is to make dbconnected at startup and then throw error if connection lost
so how to do correct way?

[hhzhgit]

hi
i am not familiar with typescript
is there any way to do connection to mongodb database as we do it with express
using express as startup we did it using mongoose.connect("<databaseString>")
how can we do same using nextjs so that we arenot having to use dbconnect() in every api call?

[Sliffcak]

This in theory is fine. But I still see more connections getting created constantly. Even when using some sort of caching using LRU-cache or just as a global variable map of database names to connections. i think that has to do with how functions are run in a serverless environment. Any way around this?

[tfarhan00]

You can create a singleton class to create a db connection once for all

Here some example with planetscale and drizzle orm, you can try to call as many request as you want in /api routes, client-side routes, or server-side routes and see how the initializedTimes remain at 1:

Folder path (depends on you):
src/server/db/instance.ts

import "dotenv/config";
import {
  PlanetScaleDatabase,
  drizzle,
} from "drizzle-orm/planetscale-serverless";
import { connect } from "@planetscale/database";
import * as schema from "@/server/db/schema";

type Opts = {
  debug?: boolean;
};

let initializedTimes: number = 0;

class MainDB {
  private static instance: MainDB | null = null;
  private db: PlanetScaleDatabase<typeof schema>;

  private constructor(opts: Opts) {
    this.initializeDB(opts);
  }

  public static getInstance(opts?: Opts): MainDB {
    if (!MainDB.instance) {
      MainDB.instance = new MainDB(opts!);
    }
    return MainDB.instance;
  }

  private switchClientOrServerConfig() {
    return {
      host: process.env.NEXT_PUBLIC_DATABASE_HOST,
      username: process.env.NEXT_PUBLIC_DATABASE_USERNAME,
      password: process.env.NEXT_PUBLIC_DATABASE_PASSWORD,
    };
  }

  private initializeDB(opts: Opts) {
    initializedTimes++;
    const connection = connect(this.switchClientOrServerConfig());
    const db = drizzle(connection, { schema });
    this.db = db;
    if (opts?.debug)
      console.log(
        "DEBUG_DB :",
        "INSTANCE HAS BEEN INITIALIZED " + initializedTimes + " TIMES"
      );
  }

  public getDB() {
    return this.db;
  }
}

export default MainDB;

Usage in /api routes:

import MainDB from "@/server/db/instance";

export async function GET() {
  const dbInstance = MainDB.getInstance({
    debug: true,
  });
  const db = dbInstance.getDB();

  const res = await db.query.users.findMany();

  return Response.json(res);
}

[Jared-Dahlke]

this was exactly what i needed. thank you for posting.

Updated yours to work with my GRPC client:

interface IProps {
  url: string;
  accessToken: string;
}

export class MainDB {
  private static instance: MainDB | null = null;
  private client: v1.HSTPServiceClient | null = null;

  private constructor(opts: IProps) {
    this.initializeClient(opts);
  }

  public static getInstance(opts: IProps): MainDB {
    if (!MainDB.instance) {
      MainDB.instance = new MainDB(opts);
    }
    return MainDB.instance;
  }

  private initializeClient = async (opts: IProps) => {
    console.debug("Creating new client");
    const authInterceptor: RpcInterceptor = {
      
       interceptUnary(next, method, input, options) {
        options.meta = {
          ...options.meta,
          Authorization: `Bearer ${opts.accessToken}`,
        };

        return next(method, input, options);
      },
    };

    const transport = new GrpcWebFetchTransport({
      baseUrl: opts.url,
      interceptors: [authInterceptor],
    }) as unknown as RpcTransport;

    this.client = new v1.HSTPServiceClient(transport);
  };

  public getDBClient() {
    if (!this.client) throw new Error("no client");
    return this.client;
  }
}

[eladonline]

Ive managed this by putting this in the root layout
import dbConnect from "@/app/(server)/services/mongooseDB";
await (async () => dbConnect().catch((err) => console.error(err.stack)))();