make TypeORM work with SvelteKit

[Ennoriel]

I'm trying to make TypeORM work with SvelteKit and following the Getting Started page of their documentation (https://typeorm.io/) but encontered some difficulties to make it work: the js anotation (@entity) added with the library reflect-metadata does not seem to be recognized well:

first error:

Column type for User2#name is not defined and cannot be guessed. Make sure you have turned on an "emitDecoratorMetadata": true option in tsconfig.json. Also make sure you have imported "reflect-metadata" on top of the main entry file in your application (before any entity imported).If you are using JavaScript instead of TypeScript you must explicitly provide a column type.

second error (when explicitely specifying a type):

EntityMetadataNotFoundError: No metadata for "User" was found.

What I tried:

• set the lib as dependencies (and not dev dep): "reflect-metadata", "typeorm", "pg"
• set the lib in ssr.external in vite config

There is already a discussion but with a beta version and thought it would be better to open a fresh one: #3334

Anyone figured out how to make it work or willing to help me? :)

Thanks ;)

[ngramp]

First of all ensure you have emitDecoratorMetadata set in tsconfig.json as per the docs:

 "compilerOptions": {
    ...    
    // needed for typeORM
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true
  },`

And include reflect-metadata in vite.config.js as you mentioned:

export default defineConfig({
  ...
  ssr: {
    external: ['reflect-metadata'],
  },
});

Despite all this effort with metadata reflection, there have been previous bugs with it, so ensure that every column in your entities has a labelled type:

@Entity({ name: 'test' })
export class Test extends BaseEntity {
  ...
  @Column({ type: 'varchar'})
  name!: string | null;
}

I personally have had some issues with DataSource being re instantiated, so I put it inside of a singleton in $lib/db.ts:

import { Test } from './entities/Test';

class TypeOrm {
  private static instance: Promise<DataSource> | null = null;

  private constructor() {
    // Private constructor to prevent external instantiation
  }

  public static getDb(): Promise<DataSource> {
    if (!TypeOrm.instance) {
      TypeOrm.instance = new DataSource({
        type: 'postgres',
        host: 'localhost',
        port: 5432,
        username: 'svelte', // make these .env
        password: 'sveltepassword',
        database: 'sveltetypeorm',
        synchronize: true,
        entities: [Test],
        migrations: [],
        subscribers: [],
        logging: true,
      })
        .initialize()
        .then((fulfilled) => {
          console.info('Data Source has been initialized!');
          return fulfilled;
        })
        .catch((err) => {
          console.error('Error during Data Source initialization', err);
          return null;
        });
    }
    return TypeOrm.instance;
  }
}

export default TypeOrm;

Then, at the top level of hooks.server.ts I start the Datasource and import reflect-metadata:

import 'reflect-metadata';
...
await TypeOrm.getDb();

This appears to fire only once on startup, and rarely when hot reloading.

In my server load functions I then use the active record pattern:

export const load: PageLoad = async () => {
  const test = new Test();
  test.name = 'test name';
  await test.save();
  const tests = await Test.find();
  const json = JSON.stringify(tests);
  return { json };
};

To use either entity manager or repository, bring in the singleton:

  ...
  const db = await TypeOrm.getDb();
  const test = new Test();
  test.name = 'test name';
  db.manager.save(test)

However I'll note that the repository pattern doesn't appear to be creating new entities for me, but haven't put much effort into fixing it.

[ngramp]

Been a while, but iirc 'DataSource is not set for this entity' suggests TypeOrm loaded fine but it can't find the User entity. Is it in the entities array? Is the db synced?

[saki82]

Yes it's on the entities array and db is synced.

I can pinpoint the issue to hooks.server.ts not being called during the build, which leads to Typeorm.getDb() not being invoked and thus, new Datasource() not being instantiated.

My workaround is to invoke Typeorm.getDb() in every single page.server.ts. This way the build succeeds, but its certainly not the most elegant. 😕

[Ennoriel]

Are you trying to generate a static site with the adapter static and export const prerender = true? If so, it should call hooks.server.ts on every request (you may need to provide an empty handle function):

export async function handle({ event, resolve }) {
    return await resolve(event);
}

[saki82]

Hi @Ennoriel,
i am building with the node adapter in default ssr mode.
This is what my hooks.server.ts looks like:

export const handle = {
	auth: SvelteKitAuth({
		providers: [GitHub({ clientId: env.GITHUB_ID, clientSecret: env.GITHUB_SECRET })],
	}),
	db: TypeOrm.getDb(), <-- this is the db instantiation function
};

I suspect it is never called during build with the default ssr option

[Ennoriel]

I would try something like that:

const db = TypeOrm.getDb()

export const handle = {
	auth: SvelteKitAuth({
		providers: [GitHub({ clientId: env.GITHUB_ID, clientSecret: env.GITHUB_SECRET })],
	}),
	db,
};

in the build step, handle is anly called in static site generation when rendering each single route