feat(ui+backend): base of data persistence

client/src/gql/queries/helper.ts

@@ -1,7 +1,7 @@
-import { useQuery, DocumentNode } from "@apollo/client";
+import { useQuery, DocumentNode, QueryHookOptions } from "@apollo/client";
 import { useState, useEffect } from "react";
 
-export function useGraphQLData<T>(q: DocumentNode, key: string, defaultValue: T, options = {}) {
+export function useGraphQLData<T, A = any, R = Record<string, any>>(q: DocumentNode, key: string, defaultValue: T, options: QueryHookOptions<A, R> = {}) {
   const query = useQuery(q, options);
   const [ data, setData ] = useState<T>(defaultValue);
   useEffect(() => {

client/src/gql/queries/project.ts

@@ -0,0 +1,49 @@
+import { gql, useQuery, QueryHookOptions } from '@apollo/client';
+import { User } from '../../types/user';
+import { useGraphQLData } from './helper';
+import { Project } from '../../types/project';
+
+export const QUERY_PROJECTS = gql`
+query projects($filter: ProjectsFilter) {
+  projects(filter: $filter) {
+    id
+    title
+    taskCategories {
+      id
+      label
+      costPerTimeUnit
+    }
+    tasks {
+      id
+      label
+      category {
+        id
+        label
+      }
+      estimations {
+        optimistic
+        likely
+        pessimistic
+      }
+    }
+    params {
+      timeUnit {
+        label
+        acronym
+      }
+      currency
+      hideFinancialPreviewOnPrint
+    }
+  }
+}`;
+
+export function useProjectsQuery() {
+  return useQuery(QUERY_PROJECTS);
+}
+
+export function useProjects<A = any, R = Record<string, any>>(options: QueryHookOptions<A, R> = {}) {
+  const { data, loading, error } = useGraphQLData<Project[]>(
+    QUERY_PROJECTS, 'projects', [], options
+  );
+  return { projects: data, loading, error };
+}