useTableQuery.js

using-react-query-2-table-query-component.js

function useTableQuery(queryFn, columnDefs, formatApiData, formatParamsToQueryKey) {
  const [queryKey, setQueryKey] = useState('');
  const {data, isLoading} = useQuery(queryKey, () => queryFn({ordering: queryKey.sortBy}));
  
  const tableData = useMemo(() => formatApiData(data), [data]);
  
  const columns = useMemo(() => columnDefs, [columnDefs]);
  
  const fetchData = useCallback((params) => {
    const paramsToQK = formatParamsToQueryKey(params);
    setQueryKey(paramsToQK);
  }, [tableData]);
  
  return {columns, tableData, fetchData}
}

const PurchaseOrderTableInstance = () => {
  const {columns, tableData, fetchData} = useTableOuery(
    ({queryKey}) => fetchPO({ordering: queryKey.ordering}),
    columnDefs,
    (data) => data?.body?.results,
    (params) => {ordering: …}
  );

  if (isLoading || !tableData) {
    return <div>Loading...</div>
  }

  return (
    <Table columns={columns} tableData={td} onFetchData={fetchData}/>
  );
}