added graphql entegration and tested tanstack query

frontend/pages/users/page.tsx

@@ -0,0 +1,26 @@
+'use client';
+import { useGraphQlUsersList } from './queries';
+import { useState } from 'react';
+
+const PageUsers = () => {
+    const [page, setPage] = useState(1);
+    const [limit, setLimit] = useState(10);
+    const [sort, setSort] = useState({ createdAt: 'desc' });
+    const [filters, setFilters] = useState({});
+    const { data, isLoading, error } = useGraphQlUsersList({ limit, skip: (page - 1) * limit, sort, filters });
+    return (
+        <div>
+            <h1>Users</h1>
+            {isLoading && <p>Loading...</p>}
+            {error && <p>Error: {error.message}</p>}
+            {data && <p>Total count: {data.totalCount}</p>}
+            <div>
+                {data && <p>Data: {JSON.stringify(data.data)}</p>}
+                <button onClick={() => setPage(page - 1)}>Previous</button>
+                <button onClick={() => setPage(page + 1)}>Next</button>
+            </div>
+        </div>
+    )
+}
+
+export { PageUsers };

frontend/pages/users/queries.tsx

@@ -0,0 +1,19 @@
+'use client'
+import { useQuery } from '@tanstack/react-query'
+import { UsersListResponse } from './types'
+import { ListArguments } from '@/types/listRequest'
+
+const fetchGraphQlUsersList = async (params: ListArguments): Promise<UsersListResponse> => {
+    console.log('Fetching test data from local API');
+    const { limit, skip, sort, filters } = params;
+    try {
+        const res = await fetch('/api/users/list', { method: 'POST', cache: 'no-store', credentials: "include", body: JSON.stringify({ limit, skip, sort, filters }) });
+        if (!res.ok) { const errorText = await res.text(); console.error('Test data API error:', errorText); throw new Error(`API error: ${res.status} ${res.statusText}`) }
+        const data = await res.json();
+        return { data: data.data, totalCount: data.totalCount }
+    } catch (error) { console.error('Error fetching test data:', error); throw error }
+};
+
+export function useGraphQlUsersList(params: ListArguments) {
+    return useQuery({ queryKey: ['graphql-users-list', params], queryFn: () => fetchGraphQlUsersList(params) })
+}

frontend/pages/users/types.ts

@@ -0,0 +1,46 @@
+interface UserToken {
+    prefix: string;
+    token: string;
+}
+
+interface CollectionTokens {
+    default: string;
+    tokens: UserToken[];
+}
+
+interface User {
+    _id: string;
+    uuid: string;
+    expiryStarts: string;
+    expiryEnds: string;
+    isConfirmed: boolean;
+    deleted: boolean;
+    active: boolean;
+    crypUuId: string;
+    createdCredentialsToken: string;
+    updatedCredentialsToken: string;
+    confirmedCredentialsToken: string;
+    isNotificationSend: boolean;
+    isEmailSend: boolean;
+    refInt: number;
+    refId: string;
+    replicationId: number;
+    expiresAt: string;
+    resetToken?: string | null;
+    password: string;
+    history: string[];
+    tag: string;
+    email: string;
+    phone: string;
+    collectionTokens: CollectionTokens;
+    createdAt: string;
+    updatedAt: string;
+}
+
+interface UsersListResponse {
+    data: User[] | null;
+    totalCount: number;
+}
+
+
+export type { User, UsersListResponse }