Query class with generic types for query management @boonya.dev/frontend-utils/query (#15)

* Clean up
* @boonya.dev/frontend-utils/query

Author: boonya

eslint.config.mjs

@@ -1,7 +1,7 @@
 import * as reactHooks from 'eslint-plugin-react-hooks';
 import {defineConfig} from 'eslint/config';
 import globals from 'globals';
-import importX from 'eslint-plugin-import-x';
+import {importX} from 'eslint-plugin-import-x';
 import js from '@eslint/js';
 import json from '@eslint/json';
 import markdown from '@eslint/markdown';
@@ -43,9 +43,7 @@ const tsConfig = ts.config(
 );
 
 const importXConfig = [
-  // eslint-disable-next-line import-x/no-named-as-default-member
   importX.flatConfigs.recommended,
-  // eslint-disable-next-line import-x/no-named-as-default-member
   importX.flatConfigs.typescript,
   {
     files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],

packages/frontend-utils/src/query.test.ts

@@ -0,0 +1,61 @@
+import Query from './query';
+
+const sumFn = async (...args: number[]) => args.reduce((a, b) => a + b, 0);
+
+describe('constructor', () => {
+  it('should instantiate valid query object.', () => {
+    const queryInstance = new Query(sumFn, ['base']);
+
+    expect(queryInstance).toEqual({
+      baseKey: ['base'],
+      queryFn: sumFn,
+      getKey: expect.any(Function),
+      create: expect.any(Function),
+    });
+  });
+});
+
+describe('getKey', () => {
+  it('should return a combination of baseKey and arguments.', () => {
+    const queryInstance = new Query(sumFn, ['sum']);
+
+    const actual = queryInstance.getKey(2, 3);
+    expect(actual).toEqual(['sum', '2', '3']);
+  });
+
+  it.each([
+    {params: [], expected: ['base']},
+    {params: [1], expected: ['base', '1']},
+    {params: [1, 2], expected: ['base', '1', '2']},
+    {params: [1, 2, 3], expected: ['base', '1', '2', '3']},
+  ])('should return $expected when called with $params', ({params, expected}) => {
+    const queryInstance = new Query(jest.fn(), ['base']);
+    const actual = queryInstance.getKey(...params);
+    expect(actual).toEqual(expected);
+  });
+});
+
+describe('create', () => {
+  it('should return a query object.', () => {
+    const queryInstance = new Query(sumFn, ['sum']);
+
+    const query = queryInstance.create(2, 3);
+    expect(query).toEqual({
+      queryKey: ['sum', '2', '3'],
+      queryFn: expect.any(Function),
+    });
+  });
+
+  it.each([
+    {params: [], expected: 0},
+    {params: [1], expected: 1},
+    {params: [1, 2], expected: 3},
+    {params: [1, 2, 3], expected: 6},
+    {params: [1, 2, 3, 4], expected: 10},
+  ])('should return $expected when called with $params', ({params, expected}) => {
+    const sum = new Query(sumFn, ['sum']);
+
+    const query = sum.create(...params).queryFn();
+    expect(query).resolves.toBe(expected);
+  });
+});

packages/frontend-utils/src/query.ts

@@ -0,0 +1,28 @@
+type QueryKey = [string, ...string[]];
+
+export default class Query<
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  QueryFn extends (...params: any[] | never) => any,
+  Key extends QueryKey = QueryKey,
+  Params extends unknown[] | never = Parameters<QueryFn>,
+  Data = ReturnType<QueryFn>,
+> {
+  public queryFn: QueryFn;
+  public baseKey: Key;
+
+  constructor(queryFn: QueryFn, baseKey: Readonly<Key>) {
+    this.baseKey = baseKey;
+    this.queryFn = queryFn;
+  }
+
+  public getKey = (...params: Params) => {
+    return [...this.baseKey, ...params.map(String)] as const;
+  };
+
+  public create = (...params: Params) => {
+    return {
+      queryKey: this.getKey(...params),
+      queryFn: () => this.queryFn(...params) as Data,
+    };
+  };
+}