refactor: improve the amount of GET requests for translation assets (#2058)

* refactor: replace traslation hook refetch time with stale time

* refactor: make it the service responsebillety to send refetch keys for asset changes
This commit is contained in:
Alex Christoffer Rasmussen
2026-04-14 09:30:27 +02:00
committed by GitHub
parent 2d3c8e7eb2
commit 23a44b2f04
3 changed files with 12 additions and 7 deletions
@@ -1,16 +1,16 @@
import { useQuery } from '@tanstack/react-query'; import { useQuery } from '@tanstack/react-query';
import { langEn } from 'ontime-types'; import { langEn } from 'ontime-types';
import { MILLIS_PER_HOUR } from 'ontime-utils';
import { getUserTranslation } from '../../common/api/assets'; import { getUserTranslation } from '../../common/api/assets';
import { TRANSLATION } from '../../common/api/constants'; import { TRANSLATION } from '../../common/api/constants';
import { queryRefetchIntervalSlow } from '../../ontimeConfig';
export function useCustomTranslation() { export function useCustomTranslation() {
const { data, status, refetch } = useQuery({ const { data, status, refetch } = useQuery({
queryKey: TRANSLATION, queryKey: TRANSLATION,
queryFn: ({ signal }) => getUserTranslation({ signal }), queryFn: ({ signal }) => getUserTranslation({ signal }),
placeholderData: (previousData, _previousQuery) => previousData, placeholderData: (previousData, _previousQuery) => previousData,
refetchInterval: queryRefetchIntervalSlow, staleTime: MILLIS_PER_HOUR,
}); });
return { data: data ?? langEn, status, refetch }; return { data: data ?? langEn, status, refetch };
} }
@@ -1,5 +1,5 @@
import express from 'express'; import express from 'express';
import type { Request, Response } from 'express'; import type { Request, Response, Router } from 'express';
import { type ErrorResponse, RefetchKey } from 'ontime-types'; import { type ErrorResponse, RefetchKey } from 'ontime-types';
import { getErrorMessage } from 'ontime-utils'; import { getErrorMessage } from 'ontime-utils';
@@ -8,7 +8,7 @@ import { defaultCss } from '../../bundle/bundledCss.js';
import { readCssFile, writeCssFile, writeUserTranslation } from './assets.service.js'; import { readCssFile, writeCssFile, writeUserTranslation } from './assets.service.js';
import { validatePostCss, validatePostTranslation } from './assets.validation.js'; import { validatePostCss, validatePostTranslation } from './assets.validation.js';
export const router = express.Router(); export const router: Router = express.Router();
router.get('/css', async (_req: Request, res: Response<string | ErrorResponse>) => { router.get('/css', async (_req: Request, res: Response<string | ErrorResponse>) => {
try { try {
@@ -24,7 +24,6 @@ router.post('/css', validatePostCss, async (req: Request, res: Response<never |
const { css } = req.body; const { css } = req.body;
try { try {
await writeCssFile(css); await writeCssFile(css);
sendRefetch(RefetchKey.CssOverride);
res.status(204).send(); res.status(204).send();
} catch (error) { } catch (error) {
const message = getErrorMessage(error); const message = getErrorMessage(error);
@@ -53,7 +52,6 @@ router.post('/translations', validatePostTranslation, async (req: Request, res:
try { try {
await writeUserTranslation(translation); await writeUserTranslation(translation);
sendRefetch(RefetchKey.Translation);
res.status(204).send(); res.status(204).send();
} catch (error) { } catch (error) {
const message = getErrorMessage(error); const message = getErrorMessage(error);
@@ -1,8 +1,9 @@
import { existsSync } from 'node:fs'; import { existsSync } from 'node:fs';
import { readFile, writeFile } from 'node:fs/promises'; import { readFile, writeFile } from 'node:fs/promises';
import type { TranslationObject } from 'ontime-types'; import { RefetchKey, type TranslationObject } from 'ontime-types';
import { sendRefetch } from '../../adapters/WebsocketAdapter.js';
import { defaultCss } from '../../bundle/bundledCss.js'; import { defaultCss } from '../../bundle/bundledCss.js';
import { publicFiles } from '../../setup/index.js'; import { publicFiles } from '../../setup/index.js';
@@ -33,6 +34,9 @@ export async function writeCssFile(css: string) {
} }
await writeFile(path, css, { encoding: 'utf8' }); await writeFile(path, css, { encoding: 'utf8' });
setImmediate(() => {
sendRefetch(RefetchKey.CssOverride);
});
} }
/** /**
@@ -43,4 +47,7 @@ export async function writeUserTranslation(translations: TranslationObject) {
const path = publicFiles.translationsFile; const path = publicFiles.translationsFile;
const translationsString = JSON.stringify(translations, null, 2); const translationsString = JSON.stringify(translations, null, 2);
await writeFile(path, translationsString, { encoding: 'utf8' }); await writeFile(path, translationsString, { encoding: 'utf8' });
setImmediate(() => {
sendRefetch(RefetchKey.Translation);
});
} }