Add useConfigValue hook (#804)

Add useConfigValue hook that sends a query to the Config API route for config value
Add some extra types to dynamic config util and API route

Author: adhityamamallan

src/hooks/use-config-value/__tests__/use-config-value.test.ts

@@ -0,0 +1,56 @@
+import { HttpResponse } from 'msw';
+
+import { renderHook, waitFor } from '@/test-utils/rtl';
+
+import useConfigValue from '../use-config-value';
+
+describe(useConfigValue.name, () => {
+  it('should return correct loading state and result', async () => {
+    const { result } = setup({});
+
+    expect(result.current.isLoading).toStrictEqual(true);
+
+    await waitFor(() => {
+      const value = result.current.data;
+      expect(value).toStrictEqual('mock_config_response');
+    });
+  });
+
+  it('should return error if the API route errors out', async () => {
+    const { result } = setup({ error: true });
+
+    await waitFor(() => {
+      const res = result.current;
+      expect(res.status).toEqual('error');
+    });
+  });
+});
+
+function setup({ error }: { error?: boolean }) {
+  const { result } = renderHook(
+    () =>
+      // @ts-expect-error - using a nonexistent config value
+      useConfigValue('MOCK_CONFIG_VALUE', { arg: 'value' }),
+    {
+      endpointsMocks: [
+        {
+          path: '/api/config',
+          httpMethod: 'GET',
+          mockOnce: false,
+          httpResolver: async () => {
+            if (error) {
+              return HttpResponse.json(
+                { message: 'Failed to fetch config' },
+                { status: 500 }
+              );
+            } else {
+              return HttpResponse.json('mock_config_response');
+            }
+          },
+        },
+      ],
+    }
+  );
+
+  return { result };
+}

src/hooks/use-config-value/use-config-value.ts

@@ -0,0 +1,51 @@
+import { useQuery } from '@tanstack/react-query';
+import queryString from 'query-string';
+
+import {
+  type GetConfigResponse,
+  type GetConfigArgs,
+  type GetConfigKeys,
+  type GetConfigKeysWithArgs,
+  type GetConfigKeysWithoutArgs,
+  type GetConfigRequestQuery,
+} from '@/route-handlers/get-config/get-config.types';
+import request from '@/utils/request';
+import { type RequestError } from '@/utils/request/request-error';
+
+import { type UseConfigValueResult } from './use-config-value.types';
+
+export default function useConfigValue<K extends GetConfigKeysWithArgs>(
+  key: K,
+  args: GetConfigArgs<K>
+): UseConfigValueResult<K>;
+
+export default function useConfigValue<K extends GetConfigKeysWithoutArgs>(
+  key: K
+): UseConfigValueResult<K>;
+
+export default function useConfigValue<K extends GetConfigKeys>(
+  key: K,
+  args?: GetConfigArgs<K>
+): UseConfigValueResult<K> {
+  return useQuery<
+    GetConfigResponse<K>,
+    RequestError,
+    GetConfigResponse<K>,
+    [string, GetConfigRequestQuery<K>]
+  >({
+    queryKey: ['dynamic_config', { configKey: key, jsonArgs: args }] as const,
+    queryFn: ({ queryKey: [_, { configKey, jsonArgs }] }) =>
+      request(
+        queryString.stringifyUrl({
+          url: '/api/config',
+          query: {
+            configKey,
+            jsonArgs: JSON.stringify(jsonArgs),
+          },
+        }),
+        {
+          method: 'GET',
+        }
+      ).then((res) => res.json()),
+  });
+}

src/hooks/use-config-value/use-config-value.types.ts

@@ -0,0 +1,12 @@
+import { type UseQueryResult } from '@tanstack/react-query';
+
+import {
+  type GetConfigKeys,
+  type GetConfigResponse,
+} from '@/route-handlers/get-config/get-config.types';
+import { type RequestError } from '@/utils/request/request-error';
+
+export type UseConfigValueResult<K extends GetConfigKeys> = UseQueryResult<
+  GetConfigResponse<K>,
+  RequestError
+>;

src/route-handlers/get-config/get-config.types.ts

@@ -1,15 +1,22 @@
 import {
+  type PublicLoadedResolvedValues,
   type ArgsOfLoadedConfigResolver,
   type PublicDynamicConfigKeys,
-  type PublicLoadedConfig,
+  type PublicConfigKeysWithArgs,
+  type PublicConfigKeysWithoutArgs,
 } from '@/utils/config/config.types';
 
-export type GetConfigResponse<K extends PublicDynamicConfigKeys> =
-  PublicLoadedConfig[K];
 export type GetConfigKeys = PublicDynamicConfigKeys;
+export type GetConfigKeysWithArgs = PublicConfigKeysWithArgs;
+export type GetConfigKeysWithoutArgs = PublicConfigKeysWithoutArgs;
+
 export type GetConfigArgs<K extends PublicDynamicConfigKeys> =
   ArgsOfLoadedConfigResolver<K>;
+
 export type GetConfigRequestQuery<K extends PublicDynamicConfigKeys> = {
   configKey: K;
   jsonArgs: GetConfigArgs<GetConfigKeys>;
 };
+
+export type GetConfigResponse<K extends PublicDynamicConfigKeys> =
+  PublicLoadedResolvedValues[K];

src/utils/config/config.types.ts

@@ -148,6 +148,9 @@ export type PublicDynamicConfigKeys = keyof PublicDynamicConfigDefinitions;
 export type PublicLoadedConfig =
   InferLoadedConfig<PublicDynamicConfigDefinitions>;
 
+export type PublicLoadedResolvedValues =
+  ConfigResolvedValues<PublicDynamicConfigDefinitions>;
+
 export type LoadedConfigs = InferLoadedConfig<DynamicConfig>;
 
 export type ArgsOfLoadedConfigResolver<K extends keyof LoadedConfigs> =
@@ -187,3 +190,14 @@ export type ResolverSchemas = InferResolverSchema<DynamicConfig>;
 
 export type ArgsOfDynamicConfigResolver<K extends keyof ResolverSchemas> =
   ResolverSchemas[K]['args'];
+
+export type PublicConfigKeysWithArgs = {
+  [K in keyof PublicDynamicConfigDefinitions]: K extends ConfigKeysWithArgs
+    ? K
+    : never;
+}[keyof PublicDynamicConfigDefinitions];
+
+export type PublicConfigKeysWithoutArgs = Exclude<
+  keyof PublicDynamicConfigDefinitions,
+  PublicConfigKeysWithArgs
+>;