Use TypeORM with Next.js

[jmaister]

I would like to configure TypeORM in server.js
When I run the server (node server.js), as the entities are defined in TypeScript, there is an error:

import {createConnection} from "typeorm";
^^^^^^

SyntaxError: Cannot use import statement outside a module

Describe the solution you'd like

I would like to have a better way to initialize other libraries that I use along with Next.js instead of writing my own server.js.

Define the convention of a file in JS or TS for initializations.

Describe alternatives you've considered

I tried to create the connection on every place that I use the database connection.

Additional context

Add any other context or screenshots about the feature request here.

[timneutkens]

If you want to create API endpoints it's recommended to use API routes: https://nextjs.org/docs/api-routes/introduction. API routes are automatically compiled through Next.js' compilation pipeline and allow you to use import/export syntax and a bunch of other syntax that hasn't landed in Node.js yet, similar to pages.

If you use a custom server you're basically handing off a request to Next.js and Next.js is unaware of the server existing, it also boots up after the server boots up, meaning we can't compile the server, hence why you can only use Node.js features and Node.js currently does not compile import syntax.

[revskill10]

So as i understand, i could use import dynamic from 'next/dynamic' to import React components in api routes ?

[jmaister]

Definitely, I don't want to use the custom server, I want to keep all Next.js functionality as it is now.

Adding the connection code to the api-routes makes me to create a new connection on each of the API calls. And that is something I would like to avoid.

[timneutkens]

Adding the connection code to the api-routes makes me to create a new connection on each of the API calls. And that is something I would like to avoid.

If you add it in the global scope it's not re-initialized except for if you use serverless functions (eg when hosting on Vercel).

[jmaister]

Sorry, I can't find how to define the connection in the global scope in Next.js documentation.

[timneutkens]

Something like this:

// lib/db.js
function setupConnection(username, password) {
  return db.initialize(username, password)
}

export default setupConnection('hello', 'world')

// pages/api/user.js
import connection from '../../lib/db'

export default () => {
  const result = await connection.query(`SELECT * FROM 'hello_world'`)
}

[kandros]

Adding the connection code to the api-routes makes me to create a new connection on each of the API calls. And that is something I would like to avoid.

If you add it in the global scope it's not re-initialized except for if you use serverless functions (eg when hosting on Vercel).

for some reasons I always believed the same as @jmaguirrei, that /api routes were always treated as target: serverless and would not share execution context regardless of using target: server, (thus being unable to share a DB connection)

well, I'm happy to discover I was wrong
here's a little example
https://github.com/kandros/nextjs-api-routes-demo

[jmaister]

In development mode, not sure why this happens but queries only work for the first request, the next request fail of finding the Typescript classes.

RepositoryNotFoundError: No repository for "User" was found. Looks like this entity is not registered in current "default" connection?
    at new RepositoryNotFoundError (C:\workspace\fcputbol\node_modules\typeorm\error\RepositoryNotFoundError.js:11:28)
    at EntityManager.getRepository (C:\workspace\fcputbol\node_modules\typeorm\entity-manager\EntityManager.js:660:19)
    at Connection.getRepository (C:\workspace\fcputbol\node_modules\typeorm\connection\Connection.js:343:29)
    ...

In production mode, it works fine.

[JacobSNGoodwin]

@jmaister, I'm trying to figure this out for myself. It works at first, but when the server recompiles on it's own, or I resave, then it can't find the repository.

I think probably we need to be referencing the Entities as a javascript file, but I can't see anyway to do this with nextjs's build system and am not proficient enough in Typescript.

I still haven't been able to put my finger on what the issue is.

[rwieruch]

Changing .getRepository(Coupon) to .getRepository<Coupon>('Coupon') helped in my case.

[sFrady20]

I put together this concept (tested locally for development and production).

The problem:
Basically the script is being recompiled every time the module is reloaded by HMR. this will cause the function that calls getConnectionOptions to be recompiled with new references to the entities but inside getConnectionOptions it preserves the old references. (I think)

The solution:
We can thow away an existing connection if we think it may have bad data, but we don't want to do that every time we want to "connect" in our application (for our case - api services). By initializing the database in the top level we can throw away an existing connection and start a fresh new connection every time the module is reloaded but still preserve that connection until the server is stopped.

//TODO: get from environment vars or something
const ENVIRONMENT = "development"
const CONNECTION_ATTEMPT_INTERVAL = 100;
const CONNECTION_TIMEOUT = 3; //3 seconds

//initialize database connection
let isConnecting = false;
let connection: Connection;
const initializeDatabase = async () => {
  if (isConnecting) return;
  isConnecting = true;

  //close connection if exists. could contain references to unloaded entities.
  const connections = getConnectionManager();
  if (connections.has(ENVIRONMENT)) {
    await connections.get(ENVIRONMENT).close();
  }

  //create new connection
  const newConnection = await createConnection({
    ...(await getConnectionOptions(ENVIRONMENT)),
    name: ENVIRONMENT,
    entities: [User, VerificationToken, Airport, Route],
    synchronize: true,
  });

  connection = newConnection;
  isConnecting = false;

  //log for debugging
  console.log(blue(`Connection to database "${ENVIRONMENT}" initialized.`));
};

//run initialization on script execution.
//for prod this will only happen once, but for dev this will happen every time this module is hot reloaded
initializeDatabase();

//wait for the connection to the database has been established
export const connect = async () => {
  let waiting = 0;
  while (!connection) {
    await new Promise((resolve) =>
      setTimeout(resolve, CONNECTION_ATTEMPT_INTERVAL)
    );
    waiting += CONNECTION_ATTEMPT_INTERVAL;
    if (waiting > CONNECTION_TIMEOUT) break;
  }
  if (!connection) throw new Error("Database not intiialized");
  return connection;
};

[olaven]

Thanks, this was helpful! Although I am still getting the same error as @chriseling, this was a step up from my previous setup! :D

[chriseling]

This is all super helpful. I'm trying to do the same thing and get typeorm+typegraphql+apollo mounted under /pages/api/graphql.js. I ran into the
RepositoryNotFoundError: No repository for
errors and realized that typeorm wasn't picking up the entities defined. It seems to find the modules when you add {ts,js} in ormconfig.json
"entities": ["./orm/models/*.{ts,js}"]
but then I get
`import { Entity, BaseEntity, PrimaryGeneratedColumn, Column } from "typeorm";
^^^^^^

SyntaxError: Cannot use import statement outside a module`
I was reading somewhere that this was related to trying to load .ts entities in a .js context? Ideas on what a good way to get this working would be?

[theprobugmaker]

The error is actually related to tsconfig.json, you are probably using the module option as esnext but it requires commonjs for node instead.

[olaven]

Hmm, thanks! However, Next automatically changes it back to esnext.

The following changes are being made to your tsconfig.json file:
  - compilerOptions.module must be esnext (for dynamic import() support)

Is there a way to prevent this behaviour?

[theprobugmaker]

I don't think so, perhaps @tim-phillips @Timer can explain it better

[rajat1saxena]

@zefexdeveloper Even after changing it to commonjs, it does not work.

[mmahalwy]

Same as @rajat1saxena

[ianwremmel]

I'm in the process of adding Next to an existing app (there's a lot of debt to unwind, so going entirely to Next would be a ground-up rewrite), and I've run into the RepositoryNotFoundError that others have reported here. As I understand it, it's because all of my entities get loaded twice: once by the custom server running through babel-register (in dev) and again by the Next handler (running ts-node?) and so even though an entity identical to the one I'm requesting is registered, it doesn't strictly equal the one I'm asking for.

I've come up with the following hack which I hope I can use in development only:

const original = Connection.prototype.findMetadata;
Connection.prototype.findMetadata = function findMetadata(target) {
  const result = original.call(this, target);
  if (result) {
    return result;
  }

  if (typeof target === 'function') {
    return this.entityMetadatas.find(
      (metadata) => metadata.name === target.name
    );
  }
};

Does anyone have a better solution? Or, at least confidence that things will "just work" in production with needing this hack?

[plashenkov]

The nature of this situation is clear: Next.js recompiles the code under the hood, so objects/classes are changed, but TypeORM connection still holds old entity classes and doesn't recognize new ones. And really, what would be the best option to really solve this?

[ianwremmel]

nope. I decided not to use Next because of this issue, next's apparent opposition to sourcemaps, and just how much of my app I would have to rewrite to play nicely with next. I've nearly got a ssr-webpack + react-router solution working that does the part of Next that I was particularly interested in.

[plashenkov]

Oh, that's sad. Thank you for the reply!

[plashenkov]

Ok, here is how I have solved the issue with TypeORM and HMR (for those who will be searching for the same problem): typeorm/typeorm#6241 (comment)

[plashenkov]

Sorry for spamming here again but for the sake of devs facing the same issue I should note that modifying findMetadata() method is not a suitable solution. This once was done right in TypeORM source but then reverted back because of many issues.

[plashenkov]

Hi there! For those who is facing the problem of Next.js HMR and TypeORM: after researching of different approaches I've come up with the following one: typeorm/typeorm#6241 (comment)

Please note you cannot use wildcard paths for entities, since Next.js compiles your entities (along with other JS/TS) files into its own internal bundles, and this path to source entity files is not already relevant:

// this will not work:
createConnection({
  entities: './orm/models/*.{ts,js}'
})

As well as you cannot use the following method of getting all the entities, since each HMR iteration creates new entities still keeping the old ones, and you get many duplicates of the same entity classes:

import { getMetadataArgsStorage } from 'typeorm';

// this is error-prone:
createConnection({
  entities: getMetadataArgsStorage().tables.map(tbl => tbl.target)
})

You should specify all entities in a straightforward way. Or create a separate JS/TS file which imports all the entities and reexports them, and then group-import them from this file and paste to the entities option.

[m4tta]

Have you worked with table relationships at all when using Next.Js and TypeORM?

ReferenceError: Cannot access '**EntityName**' before initialization

Is what I get no matter how I change the import orders etc. I've copy and pasted all my entities to a bare project with only TypeORM with typeorm init and the entities all work there. All my research as lead me to it being a problem with Next.JS forcing tsconfig to use "module": "esnext"

[mmahalwy]

@m4tta any luck fixing this?

[m4tta]

  @ManyToMany(type => User, user => user.organizations, { cascade: true })
  users: Partial<User[]>

Wrap all your relations with Partial. It seems to trick the TS compiler from struggling with circular dependencies. It's a bit hacky, but it will make everything work fine

[ivawzh]

Is there a way to put createConnection() inside next.config.js? It doesn't work for me so far.

[aleccool213]

Came up with an example repo to showcase TypeORM working with Next.js and TypeGraphQL:

https://github.com/aleccool213/next-js-typeorm-typegraphql-example

[mmahalwy]

@aleccool213 doesnt work once you have associations/relations. You have a single model there

[aleccool213]

Just a proof of concept. Feel free to make a pull request.