Add useSuspenseConfigValue hook (#985)

* add useSuspenseConfigValue hook

* Fix types for get options

Author: Assem-Uber

src/hooks/use-config-value/__tests__/use-suspense-config-value.test.tsx

@@ -0,0 +1,66 @@
+import React, { Suspense } from 'react';
+
+import { HttpResponse } from 'msw';
+
+import { act, renderHook, waitFor } from '@/test-utils/rtl';
+
+import useSuspenseConfigValue from '../use-suspense-config-value';
+
+describe(useSuspenseConfigValue.name, () => {
+  it('should return correct result when data is loaded', async () => {
+    const { result } = setup({});
+
+    await waitFor(() => {
+      const value = result.current.data;
+      expect(value).toStrictEqual('mock_config_response');
+    });
+  });
+
+  it('should throw error if the API route errors out', async () => {
+    let renderErrorMessage;
+    try {
+      await act(async () => {
+        setup({ error: true });
+      });
+    } catch (error) {
+      if (error instanceof Error) {
+        renderErrorMessage = error.message;
+      }
+    }
+
+    expect(renderErrorMessage).toEqual('Failed to fetch config');
+  });
+});
+
+function setup({ error }: { error?: boolean }) {
+  const { result } = renderHook(
+    () => {
+      // @ts-expect-error - using a nonexistent config value
+      return useSuspenseConfigValue('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');
+            }
+          },
+        },
+      ],
+    },
+    {
+      wrapper: ({ children }) => <Suspense>{children}</Suspense>,
+    }
+  );
+
+  return { result };
+}

src/hooks/use-config-value/get-config-value-query-options.ts

@@ -0,0 +1,33 @@
+import queryString from 'query-string';
+
+import { type GetConfigKeys } from '@/route-handlers/get-config/get-config.types';
+import request from '@/utils/request';
+
+import {
+  type UseConfigQueryOptions,
+  type UseConfigValueParams,
+} from './use-config-value.types';
+
+export default function getConfigValueQueryOptions<K extends GetConfigKeys>(
+  params: UseConfigValueParams<K>
+): UseConfigQueryOptions<K> {
+  return {
+    queryKey: [
+      'dynamic_config',
+      { configKey: params.key, jsonArgs: params.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.ts

@@ -1,51 +1,30 @@
 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 getConfigValueQueryOptions from './get-config-value-query-options';
 import { type UseConfigValueResult } from './use-config-value.types';
 
-export default function useConfigValue<K extends GetConfigKeysWithArgs>(
+export default function useConfigValue<K extends GetConfigKeysWithoutArgs>(
   key: K,
-  args: GetConfigArgs<K>
+  args?: GetConfigArgs<K>
 ): UseConfigValueResult<K>;
 
-export default function useConfigValue<K extends GetConfigKeysWithoutArgs>(
-  key: K
+export default function useConfigValue<K extends GetConfigKeysWithArgs>(
+  key: K,
+  args: GetConfigArgs<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()),
-  });
+  return useQuery(
+    getConfigValueQueryOptions<K>({ key, args: args as GetConfigArgs<K> })
+  );
 }

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

@@ -1,6 +1,12 @@
-import { type UseQueryResult } from '@tanstack/react-query';
+import {
+  type UseQueryOptions,
+  type UseQueryResult,
+  type UseSuspenseQueryResult,
+} from '@tanstack/react-query';
 
 import {
+  type GetConfigRequestQuery,
+  type GetConfigArgs,
   type GetConfigKeys,
   type GetConfigResponse,
 } from '@/route-handlers/get-config/get-config.types';
@@ -10,3 +16,18 @@ export type UseConfigValueResult<K extends GetConfigKeys> = UseQueryResult<
   GetConfigResponse<K>,
   RequestError
 >;
+
+export type UseSuspenseConfigValueResult<K extends GetConfigKeys> =
+  UseSuspenseQueryResult<GetConfigResponse<K>, RequestError>;
+
+export type UseConfigValueParams<K extends GetConfigKeys> = {
+  key: K;
+  args: GetConfigArgs<K>;
+};
+
+export type UseConfigQueryOptions<K extends GetConfigKeys> = UseQueryOptions<
+  GetConfigResponse<K>,
+  RequestError,
+  GetConfigResponse<K>,
+  [string, GetConfigRequestQuery<K>]
+>;

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

@@ -0,0 +1,29 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+import {
+  type GetConfigKeys,
+  type GetConfigArgs,
+  type GetConfigKeysWithArgs,
+  type GetConfigKeysWithoutArgs,
+} from '@/route-handlers/get-config/get-config.types';
+
+import getConfigValueQueryOptions from './get-config-value-query-options';
+import { type UseSuspenseConfigValueResult } from './use-config-value.types';
+
+export default function useSuspenseConfigValue<
+  K extends GetConfigKeysWithoutArgs,
+>(key: K, args?: GetConfigArgs<K>): UseSuspenseConfigValueResult<K>;
+
+export default function useSuspenseConfigValue<K extends GetConfigKeysWithArgs>(
+  key: K,
+  args: GetConfigArgs<K>
+): UseSuspenseConfigValueResult<K>;
+
+export default function useSuspenseConfigValue<K extends GetConfigKeys>(
+  key: K,
+  args?: GetConfigArgs<K>
+): UseSuspenseConfigValueResult<K> {
+  return useSuspenseQuery(
+    getConfigValueQueryOptions({ key, args: args as GetConfigArgs<K> })
+  );
+}

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

@@ -10,7 +10,7 @@ export type GetConfigKeys = PublicDynamicConfigKeys;
 export type GetConfigKeysWithArgs = PublicConfigKeysWithArgs;
 export type GetConfigKeysWithoutArgs = PublicConfigKeysWithoutArgs;
 
-export type GetConfigArgs<K extends PublicDynamicConfigKeys> =
+export type GetConfigArgs<K extends GetConfigKeys> =
   ArgsOfLoadedConfigResolver<K>;
 
 export type GetConfigRequestQuery<K extends PublicDynamicConfigKeys> = {