feat(useQueryWithUtilities): Allow passing custom func to combine params

eslint.config.mjs

@@ -13,7 +13,13 @@ import eslint from '@eslint/js';
 export default defineConfig([
   ...pluginQuery.configs['flat/recommended'],
   tseslint.config(eslint.configs.recommended, tseslint.configs.recommended),
-  globalIgnores(['node_modules/*', 'dist/*', 'docs/*', '**/coverage']),
+  globalIgnores([
+    'node_modules/*',
+    'dist/*',
+    'docs/*',
+    '**/coverage',
+    'storybook-static/*',
+  ]),
   fecPlugin,
   reactHooks.configs['recommended-latest'],
   jsdoc.configs['flat/recommended'],

src/utilities/hooks/useQueryWithUtilities/hooks/useParamsFromTableState.js

@@ -2,7 +2,16 @@ import { useDeepCompareMemo } from 'use-deep-compare';
 
 import { useSerialisedTableState } from '~/hooks';
 
-const useParamsFromTableState = ({ paramsOption, useTableState }) => {
+const defaultCombine = (tableParams, optionParams) => ({
+  ...(tableParams || {}),
+  ...(optionParams || {}),
+});
+
+const useParamsFromTableState = ({
+  paramsOption,
+  useTableState,
+  combineParamsWithTableState = defaultCombine,
+}) => {
   const serialisedTableState = useSerialisedTableState();
 
   const params = useDeepCompareMemo(() => {
@@ -15,15 +24,18 @@ const useParamsFromTableState = ({ paramsOption, useTableState }) => {
         }
       : undefined;
 
-    // TODO There may be issues here if for example there is a filter passed via the paramsOption
-    // We should maybe have a "combineWithTableState" option to pass in a "transforming" function
-    const combinedParams = {
-      ...(tableStateParams ? tableStateParams : {}),
-      ...(paramsOption ? paramsOption : {}),
-    };
+    const combinedParams = combineParamsWithTableState(
+      tableStateParams,
+      paramsOption,
+    );
 
     return Object.keys(combinedParams).length ? combinedParams : undefined;
-  }, [serialisedTableState, useTableState, paramsOption]);
+  }, [
+    serialisedTableState,
+    useTableState,
+    paramsOption,
+    combineParamsWithTableState,
+  ]);
 
   return params;
 };

src/utilities/hooks/useQueryWithUtilities/useQueryWithUtilities.js

@@ -16,10 +16,12 @@ const useQueryWithUtilities = ({
   queue,
   tableQueries: tableQueriesOptions,
   totalBatched: totalBatchedOptions,
+  combineParamsWithTableState,
 } = {}) => {
   const params = useParamsFromTableState({
     paramsOption,
     useTableState,
+    combineParamsWithTableState,
   });
 
   const queryClient = useQueryClient();
@@ -32,8 +34,14 @@ const useQueryWithUtilities = ({
     [queryKeyOption, params],
   );
   const queryFn = useCallback(
-    async (queryFnParams) => await fetchFn({ ...params, ...queryFnParams }),
-    [fetchFn, params],
+    async (queryFnParams) => {
+      if (combineParamsWithTableState) {
+        const finalParams = combineParamsWithTableState(params, queryFnParams);
+        return await fetchFn(finalParams);
+      }
+      return await fetchFn({ ...params, ...queryFnParams });
+    },
+    [fetchFn, params, combineParamsWithTableState],
   );
 
   const {

src/utilities/hooks/useQueryWithUtilities/useQueryWithUtilities.stories.js

@@ -254,3 +254,81 @@ export const QueryQueueStory = {
 };
 
 export default meta;
+
+const TableQueriesWithCombinedFiltersExample = () => {
+  const fetchFn = useCallback(
+    async (params) => await restApi('/api', params),
+    [],
+  );
+
+  const combineParamsWithTableState = useCallback(
+    (tableStateParams, additionalParams) => {
+      const tableFilters = tableStateParams?.filters;
+      const optionFilters = additionalParams?.filters;
+
+      const combinedParams = {
+        ...(tableStateParams ? tableStateParams : {}),
+        ...(additionalParams ? additionalParams : {}),
+      };
+      if (tableFilters && optionFilters) {
+        combinedParams.filters = `${tableFilters} and ${optionFilters}`;
+      }
+      return combinedParams;
+    },
+    [],
+  );
+
+  const {
+    loading,
+    result: { data, meta: { total } = {} } = {},
+    error,
+    exporter,
+    itemIdsInTable,
+    itemIdsOnPage,
+  } = useQueryWithUtilities({
+    fetchFn,
+    useTableState: true,
+    params: {
+      filters: '(.rating >= 3)',
+    },
+    combineParamsWithTableState,
+  });
+
+  return (
+    <>
+      <Content>
+        <p></p>
+      </Content>
+      <TableToolsTable
+        loading={loading}
+        items={data}
+        total={total}
+        error={error}
+        columns={columns}
+        filters={{
+          filterConfig: filters,
+        }}
+        options={{
+          ...defaultOptions,
+          onSelect: true,
+          exporter,
+          itemIdsInTable,
+          itemIdsOnPage,
+        }}
+      />
+    </>
+  );
+};
+
+export const TableQueriesWithCombinedFiltersStory = {
+  decorators: [
+    (Story) => (
+      <QueryClientProvider client={queryClient}>
+        <TableStateProvider>
+          <Story />
+        </TableStateProvider>
+      </QueryClientProvider>
+    ),
+  ],
+  render: (args) => <TableQueriesWithCombinedFiltersExample {...args} />,
+};