Starting dev server and moving to component fails onMount fetch requests

[Krystioz]

Hi everyone !
I'm working on my first project with sveltekit/vite and by it learning web dev stuff in general. Error occurs to my which I really don't understand after trying to solve this or even look for solution.

I'm using kit @0.0.1 and vite v2.9.14.

I'm using this function in lib/mongodb/db.ts to connect to my database :

import dotenv from 'dotenv';
dotenv.config();
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');
}

let cached = global.mongo;
if (!cached) cached = global.mongo = {};

export async function connectToDatabase() {
	if (cached.conn) return cached.conn;
	if (!cached.promise) {
		const conn: any = {};
		const opts = {
			useNewUrlParser: true,
			useUnifiedTopology: true
		};
		cached.promise = MongoClient.connect(MONGODB_URI, opts)
			.then((client: any) => {
				conn.client = client;
				return client.db(MONGODB_DB);
			})
			.then((db) => {
				conn.db = db;
				cached.conn = conn;
			});
	}
	await cached.promise;
	return cached.conn.db;
}

Then by using this endpoint in src/routes/Cities/index.ts :

import { connectToDatabase } from '$lib/mongodb/db';

export async function get() {
	try {
		const dbConnection = await connectToDatabase();
		const db = dbConnection.db;
		const collection = await db.collection('Cities');
		const query = await collection.find({}).toArray();
		return {
			status: 200,
			body: {
				query
			}
		};
	} catch (err: any) {
		return {
			status: 500,
			body: {
				error: err.message
			}
		};
	}
}

Fetch data from the database by this onMount function in my src/routes/places.svelte component :

	onMount(async () => {
		fetch('/Cities')
			.then((response) =>  response.json())
			.then((data) => {
				$citiesArr = data.query;
				gotCities = true;
			})
			.catch((error) => {
				console.log(error);
			});
	});

The problem is as follows, when I start the dev server and go to that component this fetch request ends with an error :

start.js:286 
GET http://localhost:3000/Cities 500 (Internal Server Error)

But then when I refresh the page without restarting the dev server, my data fetches properly, without any error, it just fetches and I can go back and forth between components, and refresh the page again: no error happens.

Could someone please explain to me (big backend noob) why it works like this ? I just want to learn and really can't figure it out