refactor: remove mappers (#326)

* refactor: remove mappers * chore: generate graphql types * lint: remove useless import * Remove preset-react-create-app from storybook addons * test: remove old tests * Upgrade storybook version * Remove sb preset-cra and add sb svgr loader * chore: remove figma image url from storybook --------- Co-authored-by: Charles Bochet <charles@twenty.com>
2024-12-25 13:02:15 +03:00 · 2023-06-19 16:07:16 +02:00 · 2023-06-19 16:07:16 +02:00 · 96a53ad765
commit 96a53ad765
parent c8c4a953c2
27 changed files with 849 additions and 1005 deletions
--- a/front/.storybook/main.js
+++ b/front/.storybook/main.js
@ -20,6 +20,24 @@ module.exports = {
      include: /node_modules/,
      type: 'javascript/auto'
    });
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: [
+        {
+          loader: '@svgr/webpack'
+        },
+        {
+          loader: 'file-loader',
+          options: {
+            name: 'static/media/[path][name].[ext]'
+          }
+        }
+      ],
+      type: 'javascript/auto',
+      issuer: {
+        and: [/\.(ts|tsx|js|jsx|md|mdx)$/]
+      }
+    });
    config.resolve.extensions.push('.mjs');
    config.resolve.alias = {
      ...config.resolve.alias,
@ -33,7 +51,6 @@ module.exports = {
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
-    "@storybook/preset-create-react-app",
    "@storybook/addon-coverage",
    "@storybook/addon-styling"

--- a/front/package.json
+++ b/front/package.json
@ -89,19 +89,19 @@
    "@graphql-codegen/typescript": "^3.0.4",
    "@graphql-codegen/typescript-operations": "^3.0.4",
    "@graphql-codegen/typescript-react-apollo": "^3.3.7",
-    "@storybook/addon-actions": "^7.0.2",
+    "@storybook/addon-actions": "^7.0.22",
    "@storybook/addon-coverage": "^0.0.8",
-    "@storybook/addon-essentials": "^7.0.2",
-    "@storybook/addon-interactions": "^7.0.2",
-    "@storybook/addon-links": "^7.0.2",
-    "@storybook/addon-styling": "^1.0.8",
+    "@storybook/addon-essentials": "^7.0.22",
+    "@storybook/addon-interactions": "^7.0.22",
+    "@storybook/addon-links": "^7.0.22",
+    "@storybook/addon-styling": "^1.3.0",
    "@storybook/jest": "^0.1.0",
-    "@storybook/node-logger": "^7.0.2",
-    "@storybook/preset-create-react-app": "^7.0.2",
-    "@storybook/react": "^7.0.2",
-    "@storybook/react-webpack5": "^7.0.2",
+    "@storybook/node-logger": "^7.0.22",
+    "@storybook/react": "^7.0.22",
+    "@storybook/react-webpack5": "^7.0.22",
    "@storybook/test-runner": "^0.10.0",
    "@storybook/testing-library": "^0.1.0",
+    "@svgr/webpack": "^8.0.1",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
@ -125,7 +125,7 @@
    "eslint-plugin-promise": "^6.1.1",
    "eslint-plugin-react": "^7.31.11",
    "eslint-plugin-simple-import-sort": "^10.0.0",
-    "eslint-plugin-storybook": "^0.6.11",
+    "eslint-plugin-storybook": "^0.6.12",
    "eslint-plugin-twenty": "file:../packages/eslint-plugin-twenty",
    "http-server": "^14.1.1",
    "mock-apollo-client": "^1.2.1",
@ -134,7 +134,7 @@
    "prettier": "^2.8.0",
    "prop-types": "^15.8.1",
    "react-scripts": "5.0.1",
-    "storybook": "^7.0.2",
+    "storybook": "^7.0.22",
    "ts-jest": "^29.1.0",
    "typescript": "^4.9.3",
    "webpack": "^5.75.0"
--- a/front/src/generated/graphql.tsx
+++ b/front/src/generated/graphql.tsx
@ -50,7 +50,7 @@ export type CommentCreateInput = {
  commentThread: CommentThreadCreateNestedOneWithoutCommentsInput;
  createdAt?: InputMaybe<Scalars['DateTime']>;
  deletedAt?: InputMaybe<Scalars['DateTime']>;
-  id: Scalars['String'];
+  id?: InputMaybe<Scalars['String']>;
  updatedAt?: InputMaybe<Scalars['DateTime']>;
 };

@ -59,7 +59,7 @@ export type CommentCreateManyCommentThreadInput = {
  body: Scalars['String'];
  createdAt?: InputMaybe<Scalars['DateTime']>;
  deletedAt?: InputMaybe<Scalars['DateTime']>;
-  id: Scalars['String'];
+  id?: InputMaybe<Scalars['String']>;
  updatedAt?: InputMaybe<Scalars['DateTime']>;
 };

@ -82,7 +82,7 @@ export type CommentCreateWithoutCommentThreadInput = {
  body: Scalars['String'];
  createdAt?: InputMaybe<Scalars['DateTime']>;
  deletedAt?: InputMaybe<Scalars['DateTime']>;
-  id: Scalars['String'];
+  id?: InputMaybe<Scalars['String']>;
  updatedAt?: InputMaybe<Scalars['DateTime']>;
 };

@ -124,7 +124,7 @@ export type CommentThreadCreateInput = {
  comments?: InputMaybe<CommentCreateNestedManyWithoutCommentThreadInput>;
  createdAt?: InputMaybe<Scalars['DateTime']>;
  deletedAt?: InputMaybe<Scalars['DateTime']>;
-  id: Scalars['String'];
+  id?: InputMaybe<Scalars['String']>;
  updatedAt?: InputMaybe<Scalars['DateTime']>;
 };

@ -171,7 +171,7 @@ export type CommentThreadTargetCreateManyCommentThreadInput = {
  commentableType: CommentableType;
  createdAt?: InputMaybe<Scalars['DateTime']>;
  deletedAt?: InputMaybe<Scalars['DateTime']>;
-  id: Scalars['String'];
+  id?: InputMaybe<Scalars['String']>;
  updatedAt?: InputMaybe<Scalars['DateTime']>;
 };

@ -194,7 +194,7 @@ export type CommentThreadTargetCreateWithoutCommentThreadInput = {
  commentableType: CommentableType;
  createdAt?: InputMaybe<Scalars['DateTime']>;
  deletedAt?: InputMaybe<Scalars['DateTime']>;
-  id: Scalars['String'];
+  id?: InputMaybe<Scalars['String']>;
  updatedAt?: InputMaybe<Scalars['DateTime']>;
 };

@ -408,7 +408,7 @@ export type CompanyCreateInput = {
  deletedAt?: InputMaybe<Scalars['DateTime']>;
  domainName: Scalars['String'];
  employees?: InputMaybe<Scalars['Int']>;
-  id: Scalars['String'];
+  id?: InputMaybe<Scalars['String']>;
  name: Scalars['String'];
  people?: InputMaybe<PersonCreateNestedManyWithoutCompanyInput>;
  updatedAt?: InputMaybe<Scalars['DateTime']>;
@ -420,7 +420,7 @@ export type CompanyCreateManyAccountOwnerInput = {
  deletedAt?: InputMaybe<Scalars['DateTime']>;
  domainName: Scalars['String'];
  employees?: InputMaybe<Scalars['Int']>;
-  id: Scalars['String'];
+  id?: InputMaybe<Scalars['String']>;
  name: Scalars['String'];
  updatedAt?: InputMaybe<Scalars['DateTime']>;
 };
@ -452,7 +452,7 @@ export type CompanyCreateWithoutAccountOwnerInput = {
  deletedAt?: InputMaybe<Scalars['DateTime']>;
  domainName: Scalars['String'];
  employees?: InputMaybe<Scalars['Int']>;
-  id: Scalars['String'];
+  id?: InputMaybe<Scalars['String']>;
  name: Scalars['String'];
  people?: InputMaybe<PersonCreateNestedManyWithoutCompanyInput>;
  updatedAt?: InputMaybe<Scalars['DateTime']>;
@ -882,7 +882,7 @@ export type PersonCreateInput = {
  deletedAt?: InputMaybe<Scalars['DateTime']>;
  email: Scalars['String'];
  firstname: Scalars['String'];
-  id: Scalars['String'];
+  id?: InputMaybe<Scalars['String']>;
  lastname: Scalars['String'];
  phone: Scalars['String'];
  updatedAt?: InputMaybe<Scalars['DateTime']>;
@ -1012,7 +1012,7 @@ export type PipelineProgress = {
 export type PipelineProgressCreateInput = {
  createdAt?: InputMaybe<Scalars['DateTime']>;
  deletedAt?: InputMaybe<Scalars['DateTime']>;
-  id: Scalars['String'];
+  id?: InputMaybe<Scalars['String']>;
  pipeline: PipelineCreateNestedOneWithoutPipelineProgressesInput;
  pipelineStage: PipelineStageCreateNestedOneWithoutPipelineProgressesInput;
  progressableId: Scalars['String'];
@ -1350,7 +1350,6 @@ export type User = {
  lastSeen?: Maybe<Scalars['DateTime']>;
  locale: Scalars['String'];
  metadata?: Maybe<Scalars['JSON']>;
-  passwordHash?: Maybe<Scalars['String']>;
  phoneNumber?: Maybe<Scalars['String']>;
  updatedAt: Scalars['DateTime'];
  workspaceMember?: Maybe<WorkspaceMember>;
@ -1388,11 +1387,10 @@ export type UserCreateWithoutCommentsInput = {
  displayName: Scalars['String'];
  email: Scalars['String'];
  emailVerified?: InputMaybe<Scalars['Boolean']>;
-  id: Scalars['String'];
+  id?: InputMaybe<Scalars['String']>;
  lastSeen?: InputMaybe<Scalars['DateTime']>;
  locale: Scalars['String'];
  metadata?: InputMaybe<Scalars['JSON']>;
-  passwordHash?: InputMaybe<Scalars['String']>;
  phoneNumber?: InputMaybe<Scalars['String']>;
  updatedAt?: InputMaybe<Scalars['DateTime']>;
 };
@ -1411,7 +1409,6 @@ export type UserOrderByWithRelationInput = {
  lastSeen?: InputMaybe<SortOrder>;
  locale?: InputMaybe<SortOrder>;
  metadata?: InputMaybe<SortOrder>;
-  passwordHash?: InputMaybe<SortOrder>;
  phoneNumber?: InputMaybe<SortOrder>;
  updatedAt?: InputMaybe<SortOrder>;
 };
@ -1463,7 +1460,6 @@ export type UserUpdateWithoutCommentsInput = {
  lastSeen?: InputMaybe<NullableDateTimeFieldUpdateOperationsInput>;
  locale?: InputMaybe<StringFieldUpdateOperationsInput>;
  metadata?: InputMaybe<Scalars['JSON']>;
-  passwordHash?: InputMaybe<NullableStringFieldUpdateOperationsInput>;
  phoneNumber?: InputMaybe<NullableStringFieldUpdateOperationsInput>;
  updatedAt?: InputMaybe<DateTimeFieldUpdateOperationsInput>;
 };
@ -1490,7 +1486,6 @@ export type UserWhereInput = {
  lastSeen?: InputMaybe<DateTimeNullableFilter>;
  locale?: InputMaybe<StringFilter>;
  metadata?: InputMaybe<JsonNullableFilter>;
-  passwordHash?: InputMaybe<StringNullableFilter>;
  phoneNumber?: InputMaybe<StringNullableFilter>;
  updatedAt?: InputMaybe<DateTimeFilter>;
 };
--- a/front/src/modules/companies/interfaces/tests/company.interface.test.ts
+++ b/front/src/modules/companies/interfaces/tests/company.interface.test.ts
@ -1,94 +0,0 @@
-import {
-  Company,
-  GraphqlMutationCompany,
-  GraphqlQueryCompany,
-  mapToCompany,
-  mapToGqlCompany,
-} from '../company.interface';
-
-describe('Company mappers', () => {
-  it('should map GraphQl Company to Company', () => {
-    const now = new Date();
-    now.setMilliseconds(0);
-    const graphQLCompany = {
-      id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b',
-      name: 'ACME',
-      domainName: 'exmaple.com',
-      createdAt: now.toUTCString(),
-      employees: 10,
-      address: '1 Infinite Loop, 95014 Cupertino, California, USA',
-      _commentCount: 1,
-      accountOwner: {
-        id: '7af20dea-0412-4c4c-8b13-d6f0e6e09e87',
-        email: 'john@example.com',
-        displayName: 'John Doe',
-        avatarUrl: 'https://example.com/avatar.png',
-        __typename: 'User',
-      },
-      pipes: [
-        {
-          id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6c',
-          name: 'Pipe 1',
-          icon: '!',
-          __typename: 'Pipe',
-        },
-      ],
-      __typename: 'Company',
-    } satisfies GraphqlQueryCompany;
-
-    const company = mapToCompany(graphQLCompany);
-    expect(company).toStrictEqual({
-      __typename: 'Company',
-      id: graphQLCompany.id,
-      name: graphQLCompany.name,
-      domainName: graphQLCompany.domainName,
-      createdAt: new Date(now.toUTCString()),
-      employees: graphQLCompany.employees,
-      address: graphQLCompany.address,
-      _commentCount: 1,
-      accountOwner: {
-        __typename: 'users',
-        id: '7af20dea-0412-4c4c-8b13-d6f0e6e09e87',
-        email: 'john@example.com',
-        avatarUrl: 'https://example.com/avatar.png',
-        displayName: 'John Doe',
-        workspaceMember: undefined,
-      },
-      pipes: [],
-    } satisfies Company);
-  });
-
-  it('should map Company to GraphQLCompany', () => {
-    const now = new Date();
-    now.setMilliseconds(0);
-    const company = {
-      id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b',
-      name: 'ACME',
-      domainName: 'example.com',
-      employees: 10,
-      address: '1 Infinite Loop, 95014 Cupertino, California, USA',
-      pipes: [],
-      _commentCount: 1,
-      accountOwner: {
-        id: '522d4ec4-c46b-4360-a0a7-df8df170be81',
-        email: 'john@example.com',
-        avatarUrl: 'https://example.com/avatar.png',
-        displayName: 'John Doe',
-        __typename: 'users',
-      },
-      createdAt: now,
-      __typename: 'Company',
-    } satisfies Company;
-    const graphQLCompany = mapToGqlCompany(company);
-    expect(graphQLCompany).toStrictEqual({
-      id: company.id,
-      name: company.name,
-      domainName: company.domainName,
-      createdAt: now.toUTCString(),
-      employees: company.employees,
-      address: company.address,
-      accountOwnerId: '522d4ec4-c46b-4360-a0a7-df8df170be81',
-      __typename: 'Company',
-    } satisfies GraphqlMutationCompany);
-  });
-});
--- a/front/src/modules/companies/interfaces/company.interface.ts
+++ b/front/src/modules/companies/interfaces/company.interface.ts
@ -1,84 +1,13 @@
-import {
-  GraphqlQueryPipeline,
-  Pipeline,
-} from '../../pipelines/interfaces/pipeline.interface';
-import {
-  GraphqlQueryUser,
-  mapToUser,
-  User,
-} from '../../users/interfaces/user.interface';
+import { Company as GQLCompany } from '../../../generated/graphql';
+import { DeepPartial } from '../../utils/utils';

-export type Company = {
-  __typename: 'Company';
-  id: string;
-  name?: string;
-  domainName?: string;
-  employees?: number | null;
-  address?: string;
+export type Company = DeepPartial<GQLCompany> & { id: string };

-  createdAt?: Date;
+export type GraphqlQueryCompany = Company;

-  pipes?: Pipeline[];
-  accountOwner?: User | null;
+export type GraphqlMutationCompany = Company;

-  _commentCount?: number;
-};
+export const mapToCompany = (company: GraphqlQueryCompany): Company => company;

-export type GraphqlQueryCompany = {
-  id: string;
-  name?: string;
-  domainName?: string;
-  employees?: number | null;
-  address?: string;
-
-  createdAt?: string;
-
-  accountOwner?: GraphqlQueryUser | null;
-  pipes?: GraphqlQueryPipeline[] | null;
-  __typename?: string;
-
-  _commentCount?: number;
-};
-
-export type GraphqlMutationCompany = {
-  id: string;
-  name?: string;
-  domainName?: string;
-  employees?: number | null;
-  address?: string;
-
-  createdAt?: string;
-
-  accountOwnerId?: string;
-  __typename?: string;
-};
-
-export const mapToCompany = (company: GraphqlQueryCompany): Company => ({
-  __typename: 'Company',
-  id: company.id,
-  employees: company.employees,
-  name: company.name,
-  address: company.address,
-  domainName: company.domainName,
-  createdAt: company.createdAt ? new Date(company.createdAt) : undefined,
-
-  accountOwner: company.accountOwner
-    ? mapToUser(company.accountOwner)
-    : company.accountOwner,
-  pipes: [],
-
-  _commentCount: company._commentCount,
-});
-
-export const mapToGqlCompany = (company: Company): GraphqlMutationCompany => ({
-  id: company.id,
-  name: company.name,
-  domainName: company.domainName,
-  address: company.address,
-  employees: company.employees,
-
-  createdAt: company.createdAt ? company.createdAt.toUTCString() : undefined,
-
-  accountOwnerId: company.accountOwner?.id,
-  __typename: 'Company',
-});
+export const mapToGqlCompany = (company: Company): GraphqlMutationCompany =>
+  company;
--- a/front/src/modules/companies/services/update.ts
+++ b/front/src/modules/companies/services/update.ts
@ -2,6 +2,7 @@ import { FetchResult, gql } from '@apollo/client';

 import { apiClient } from '~/apollo';

+import { UpdateCompanyMutationVariables } from '../../../generated/graphql';
 import { Company, mapToGqlCompany } from '../interfaces/company.interface';

 export const UPDATE_COMPANY = gql`
@ -78,11 +79,11 @@ export const DELETE_COMPANIES = gql`
 `;

 export async function updateCompany(
-  company: Company,
+  company: UpdateCompanyMutationVariables,
 ): Promise<FetchResult<Company>> {
  const result = await apiClient.mutate({
    mutation: UPDATE_COMPANY,
-    variables: mapToGqlCompany(company),
+    variables: company,
  });
  return result;
 }
--- a/front/src/modules/people/interfaces/tests/person.interface.test.ts
+++ b/front/src/modules/people/interfaces/tests/person.interface.test.ts
@ -1,86 +0,0 @@
-import {
-  GraphqlMutationPerson,
-  GraphqlQueryPerson,
-  mapToGqlPerson,
-  mapToPerson,
-  Person,
-} from '../person.interface';
-
-describe('Person mappers', () => {
-  it('should map GraphqlPerson to Person', () => {
-    const now = new Date();
-    now.setMilliseconds(0);
-    const graphQLPerson = {
-      id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b',
-      firstname: 'John',
-      lastname: 'Doe',
-      createdAt: now.toUTCString(),
-      email: 'john.doe@gmail.com',
-      phone: '+1 (555) 123-4567',
-      city: 'Paris',
-      _commentCount: 1,
-      company: {
-        id: '7af20dea-0412-4c4c-8b13-d6f0e6e09e87',
-        name: 'John Doe',
-        __typename: 'Company',
-      },
-      __typename: 'people',
-    } satisfies GraphqlQueryPerson;
-
-    const person = mapToPerson(graphQLPerson);
-    expect(person).toStrictEqual({
-      __typename: 'people',
-      id: graphQLPerson.id,
-      firstname: graphQLPerson.firstname,
-      lastname: graphQLPerson.lastname,
-      createdAt: new Date(now.toUTCString()),
-      email: graphQLPerson.email,
-      city: graphQLPerson.city,
-      phone: graphQLPerson.phone,
-      _commentCount: 1,
-      company: {
-        __typename: 'Company',
-        id: '7af20dea-0412-4c4c-8b13-d6f0e6e09e87',
-        accountOwner: undefined,
-        address: undefined,
-        createdAt: undefined,
-        domainName: undefined,
-        employees: undefined,
-        _commentCount: undefined,
-        name: 'John Doe',
-        pipes: [],
-      },
-    } satisfies Person);
-  });
-
-  it('should map Person to GraphQlPerson', () => {
-    const now = new Date();
-    now.setMilliseconds(0);
-    const person = {
-      id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b',
-      firstname: 'John',
-      lastname: 'Doe',
-      createdAt: new Date(now.toUTCString()),
-      email: 'john.doe@gmail.com',
-      phone: '+1 (555) 123-4567',
-      city: 'Paris',
-      _commentCount: 1,
-      company: {
-        id: '7af20dea-0412-4c4c-8b13-d6f0e6e09e87',
-      },
-    } satisfies Person;
-
-    const graphQLPerson = mapToGqlPerson(person);
-    expect(graphQLPerson).toStrictEqual({
-      id: person.id,
-      firstname: person.firstname,
-      lastname: person.lastname,
-      createdAt: now.toUTCString(),
-      email: person.email,
-      city: person.city,
-      phone: person.phone,
-      companyId: '7af20dea-0412-4c4c-8b13-d6f0e6e09e87',
-      __typename: 'people',
-    } satisfies GraphqlMutationPerson);
-  });
-});
--- a/front/src/modules/people/interfaces/person.interface.ts
+++ b/front/src/modules/people/interfaces/person.interface.ts
@ -1,82 +1,12 @@
-import {
-  Company,
-  GraphqlQueryCompany,
-  mapToCompany,
-} from '@/companies/interfaces/company.interface';
-import { Pipeline } from '@/pipelines/interfaces/pipeline.interface';
+import { Person as GQLPerson } from '../../../generated/graphql';
+import { DeepPartial } from '../../utils/utils';

-export type Person = {
-  __typename: 'people';
-  id: string;
-  firstname?: string;
-  lastname?: string;
-  picture?: string | null;
-  email?: string;
-  phone?: string;
-  city?: string;
+export type Person = DeepPartial<GQLPerson> & { id: GQLPerson['id'] };

-  createdAt?: Date;
+export type GraphqlQueryPerson = Person;

-  company?: Company | null;
-  pipes?: Pipeline[] | null;
+export type GraphqlMutationPerson = Person;

-  _commentCount?: number;
-};
+export const mapToPerson = (person: GraphqlQueryPerson): Person => person;

-export type GraphqlQueryPerson = {
-  id: string;
-  firstname?: string;
-  lastname?: string;
-  city?: string;
-  email?: string;
-  phone?: string;
-
-  createdAt?: string;
-
-  company?: GraphqlQueryCompany | null;
-
-  _commentCount?: number;
-
-  __typename?: string;
-};
-
-export type GraphqlMutationPerson = {
-  id: string;
-  firstname?: string;
-  lastname?: string;
-  email?: string;
-  phone?: string;
-  city?: string;
-  createdAt?: string;
-  companyId?: string;
-  __typename: 'people';
-};
-
-export const mapToPerson = (person: GraphqlQueryPerson): Person => ({
-  __typename: 'people',
-  id: person.id,
-  firstname: person.firstname,
-  lastname: person.lastname,
-  email: person.email,
-  phone: person.phone,
-  city: person.city,
-
-  createdAt: person.createdAt ? new Date(person.createdAt) : undefined,
-
-  company: person.company ? mapToCompany(person.company) : null,
-  _commentCount: person._commentCount,
-});
-
-export const mapToGqlPerson = (person: Person): GraphqlMutationPerson => ({
-  id: person.id,
-  firstname: person.firstname,
-  lastname: person.lastname,
-  email: person.email,
-  phone: person.phone,
-  city: person.city,
-
-  createdAt: person.createdAt ? person.createdAt.toUTCString() : undefined,
-
-  companyId: person.company?.id,
-  __typename: 'people',
-});
+export const mapToGqlPerson = (person: Person): GraphqlMutationPerson => person;
--- a/front/src/modules/people/services/tests/update.test.ts
+++ b/front/src/modules/people/services/tests/update.test.ts
@ -41,9 +41,9 @@ it('updates a person', async () => {
        icon: '!',
      },
    ],
-    createdAt: new Date(),
+    createdAt: new Date().toISOString(),
    city: 'San Francisco',
-    __typename: 'people',
+    __typename: 'Person',
  });
  expect(result.data).toBeDefined();
  result.data && expect(result.data.email).toBe('john@example.com');
--- a/front/src/modules/people/services/update.ts
+++ b/front/src/modules/people/services/update.ts
@ -93,7 +93,7 @@ export async function updatePerson(
 ): Promise<FetchResult<Person>> {
  const result = await apiClient.mutate({
    mutation: UPDATE_PERSON,
-    variables: mapToGqlPerson(person),
+    variables: person,
  });
  return result;
 }
--- a/front/src/modules/ui/components/table/EntityTable.tsx
+++ b/front/src/modules/ui/components/table/EntityTable.tsx
@ -23,10 +23,7 @@ import { currentRowSelectionState } from '../../tables/states/rowSelectionState'

 import { TableHeader } from './table-header/TableHeader';

-type OwnProps<
-  TData extends { id: string; __typename: 'Company' | 'people' },
-  SortField,
-> = {
+type OwnProps<TData extends { id: string }, SortField> = {
  data: Array<TData>;
  columns: Array<ColumnDef<TData, any>>;
  viewName: string;
@ -108,10 +105,7 @@ const StyledRow = styled.tr<{ selected: boolean }>`
    props.selected ? props.theme.secondaryBackground : 'none'};
 `;

-export function EntityTable<
-  TData extends { id: string; __typename: 'Company' | 'people' },
-  SortField,
->({
+export function EntityTable<TData extends { id: string }, SortField>({
  data,
  columns,
  viewName,
--- a/front/src/modules/users/components/stories/Avatar.stories.tsx
+++ b/front/src/modules/users/components/stories/Avatar.stories.tsx
@ -12,8 +12,7 @@ const meta: Meta<typeof Avatar> = {
 export default meta;
 type Story = StoryObj<typeof Avatar>;

-const avatarUrl =
-  'https://s3-alpha-sig.figma.com/img/bbb5/4905/f0a52cc2b9aaeb0a82a360d478dae8bf?Expires=1687132800&Signature=iVBr0BADa3LHoFVGbwqO-wxC51n1o~ZyFD-w7nyTyFP4yB-Y6zFawL-igewaFf6PrlumCyMJThDLAAc-s-Cu35SBL8BjzLQ6HymzCXbrblUADMB208PnMAvc1EEUDq8TyryFjRO~GggLBk5yR0EXzZ3zenqnDEGEoQZR~TRqS~uDF-GwQB3eX~VdnuiU2iittWJkajIDmZtpN3yWtl4H630A3opQvBnVHZjXAL5YPkdh87-a-H~6FusWvvfJxfNC2ZzbrARzXofo8dUFtH7zUXGCC~eUk~hIuLbLuz024lFQOjiWq2VKyB7dQQuGFpM-OZQEV8tSfkViP8uzDLTaCg__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4';
+const avatarUrl = 'http://placekitten.com/300/300';

 export const Rounded: Story = {
  render: getRenderWrapperForComponent(
--- a/front/src/modules/users/interfaces/tests/user.interface.test.ts
+++ b/front/src/modules/users/interfaces/tests/user.interface.test.ts
@ -1,77 +0,0 @@
-import {
-  GraphqlMutationUser,
-  GraphqlQueryUser,
-  mapToGqlUser,
-  mapToUser,
-  User,
-} from '../user.interface';
-
-describe('User mappers', () => {
-  it('should map GraphqlUser to User', () => {
-    const now = new Date();
-    now.setMilliseconds(0);
-    const graphQLUser = {
-      id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b',
-      displayName: 'John Doe',
-      avatarUrl: 'https://example.com/avatar.png',
-      email: 'john.doe@gmail.com',
-      workspaceMember: {
-        id: '7af20dea-0412-4c4c-8b13-d6f0e6e09e88',
-        workspace: {
-          id: '7af20dea-0412-4c4c-8b13-d6f0e6e09e89',
-          displayName: 'John Doe',
-          __typename: 'workspace',
-        },
-        __typename: 'workspace_members',
-      },
-      __typename: 'users',
-    } satisfies GraphqlQueryUser;
-
-    const User = mapToUser(graphQLUser);
-    expect(User).toStrictEqual({
-      __typename: 'users',
-      id: graphQLUser.id,
-      displayName: graphQLUser.displayName,
-      avatarUrl: graphQLUser.avatarUrl,
-      email: graphQLUser.email,
-      workspaceMember: {
-        id: graphQLUser.workspaceMember.id,
-        workspace: {
-          id: graphQLUser.workspaceMember.workspace.id,
-          displayName: graphQLUser.workspaceMember.workspace.displayName,
-          domainName: undefined,
-          logo: undefined,
-        },
-      },
-    } satisfies User);
-  });
-
-  it('should map User to GraphQlUser', () => {
-    const now = new Date();
-    now.setMilliseconds(0);
-    const user = {
-      __typename: 'users',
-      id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b',
-      displayName: 'John Doe',
-      avatarUrl: 'https://example.com/avatar.png',
-      email: 'john.doe@gmail.com',
-      workspaceMember: {
-        id: '7af20dea-0412-4c4c-8b13-d6f0e6e09e88',
-        workspace: {
-          id: '7af20dea-0412-4c4c-8b13-d6f0e6e09e89',
-          displayName: 'John Doe',
-        },
-      },
-    } satisfies User;
-
-    const graphQLUser = mapToGqlUser(user);
-    expect(graphQLUser).toStrictEqual({
-      id: user.id,
-      displayName: user.displayName,
-      avatarUrl: user.avatarUrl,
-      email: user.email,
-      workspaceMemberId: user.workspaceMember.id,
-      __typename: 'users',
-    } satisfies GraphqlMutationUser);
-  });
-});
--- a/front/src/modules/users/interfaces/user.interface.ts
+++ b/front/src/modules/users/interfaces/user.interface.ts
@ -1,52 +1,12 @@
-import {
-  GraphqlQueryWorkspaceMember,
-  mapToWorkspaceMember,
-  WorkspaceMember,
-} from './workspaceMember.interface';
+import { User as GQLUser } from '../../../generated/graphql';
+import { DeepPartial } from '../../utils/utils';

-export interface User {
-  __typename: 'users';
-  id: string;
-  email?: string;
-  displayName?: string;
-  avatarUrl?: string;
-  workspaceMember?: WorkspaceMember | null;
-}
+export type User = DeepPartial<GQLUser> & { id: string };

-export type GraphqlQueryUser = {
-  id: string;
-  email?: string;
-  displayName?: string;
-  workspaceMember?: GraphqlQueryWorkspaceMember | null;
-  avatarUrl?: string;
-  __typename?: string;
-};
+export type GraphqlQueryUser = User;

-export type GraphqlMutationUser = {
-  id: string;
-  email?: string;
-  displayName?: string;
-  avatarUrl?: string;
-  workspaceMemberId?: string;
-  __typename?: string;
-};
+export type GraphqlMutationUser = User;

-export const mapToUser = (user: GraphqlQueryUser): User => ({
-  __typename: 'users',
-  id: user.id,
-  email: user.email,
-  displayName: user.displayName,
-  avatarUrl: user.avatarUrl,
-  workspaceMember: user.workspaceMember
-    ? mapToWorkspaceMember(user.workspaceMember)
-    : user.workspaceMember,
-});
+export const mapToUser = (user: GraphqlQueryUser): User => user;

-export const mapToGqlUser = (user: User): GraphqlMutationUser => ({
-  id: user.id,
-  email: user.email,
-  displayName: user.displayName,
-  avatarUrl: user.avatarUrl,
-  workspaceMemberId: user.workspaceMember?.id,
-  __typename: 'users',
-});
+export const mapToGqlUser = (user: User): GraphqlMutationUser => user;
--- a/front/src/modules/users/interfaces/workspaceMember.interface.ts
+++ b/front/src/modules/users/interfaces/workspaceMember.interface.ts
@ -1,39 +1,18 @@
-import {
-  GraphqlQueryWorkspace,
-  mapToWorkspace,
-  Workspace,
-} from '../../workspaces/interfaces/workspace.interface';
+import { WorkspaceMember as GQLWorkspaceMember } from '../../../generated/graphql';
+import { DeepPartial } from '../../utils/utils';

-export interface WorkspaceMember {
-  id: string;
-  workspace: Workspace;
-}
-
-export type GraphqlQueryWorkspaceMember = {
-  id: string;
-  workspace: GraphqlQueryWorkspace;
-  __typename?: string;
+export type WorkspaceMember = DeepPartial<GQLWorkspaceMember> & {
+  id: GQLWorkspaceMember['id'];
 };

-export type GraphqlMutationWorkspaceMember = {
-  id: string;
-  workspace_id: string;
-  __typename?: string;
-};
+export type GraphqlQueryWorkspaceMember = WorkspaceMember;
+
+export type GraphqlMutationWorkspaceMember = WorkspaceMember;

 export const mapToWorkspaceMember = (
  workspaceMember: GraphqlQueryWorkspaceMember,
-): WorkspaceMember => ({
-  id: workspaceMember.id,
-  workspace: workspaceMember.workspace
-    ? mapToWorkspace(workspaceMember.workspace)
-    : workspaceMember.workspace,
-});
+): WorkspaceMember => workspaceMember;

 export const mapToGqlWorkspaceMember = (
  workspaceMember: WorkspaceMember,
-): GraphqlMutationWorkspaceMember => ({
-  id: workspaceMember.id,
-  workspace_id: workspaceMember.workspace?.id,
-  __typename: 'workspace_members',
-});
+): GraphqlMutationWorkspaceMember => workspaceMember;
--- a/front/src/modules/utils/interfaces/generic.interface.ts
+++ b/front/src/modules/utils/interfaces/generic.interface.ts
@ -15,7 +15,7 @@ import {

 export type AnyEntity = {
  id: string;
-  __typename: string;
+  __typename?: string;
 } & Record<string, any>;

 export type UnknownType = void;
--- a/front/src/modules/utils/utils.ts
+++ b/front/src/modules/utils/utils.ts
@ -13,3 +13,9 @@ export const getLogoUrlFromDomainName = (domainName?: string): string => {
 export const browserPrefersDarkMode = (): boolean => {
  return window.matchMedia('(prefers-color-scheme: dark)').matches;
 };
+
+export type DeepPartial<T> = T extends object
+  ? {
+      [P in keyof T]?: DeepPartial<T[P]>;
+    }
+  : T;
--- a/front/src/modules/workspaces/interfaces/workspace.interface.ts
+++ b/front/src/modules/workspaces/interfaces/workspace.interface.ts
@ -1,26 +1,11 @@
-export interface Workspace {
-  id: string;
-  domainName?: string;
-  displayName?: string;
-  logo?: string | null;
-  __typename?: string;
-}
+import { Workspace as GQLWorkspace } from '../../../generated/graphql';
+import { DeepPartial } from '../../utils/utils';

-export type GraphqlQueryWorkspace = {
-  id: string;
-  displayName?: string;
-  domainName?: string;
-  logo?: string | null;
-  __typename?: string;
-};
+export type Workspace = DeepPartial<GQLWorkspace> & { id: GQLWorkspace['id'] };

-export type GraphqlMutationWorkspace = {
-  id: string;
-  displayName?: string;
-  domainName?: string;
-  logo?: string | null;
-  __typename?: string;
-};
+export type GraphqlQueryWorkspace = Workspace;
+
+export type GraphqlMutationWorkspace = Workspace;

 export const mapToWorkspace = (
  workspace: GraphqlQueryWorkspace,
@ -33,10 +18,4 @@ export const mapToWorkspace = (

 export const mapToGqlWorkspace = (
  workspace: Workspace,
-): GraphqlMutationWorkspace => ({
-  id: workspace.id,
-  domainName: workspace.domainName,
-  displayName: workspace.displayName,
-  logo: workspace.logo,
-  __typename: 'workspaces',
-});
+): GraphqlMutationWorkspace => workspace;
--- a/front/src/pages/companies/Companies.tsx
+++ b/front/src/pages/companies/Companies.tsx
@ -63,8 +63,7 @@ export function Companies() {
      domainName: '',
      employees: null,
      address: '',
-      pipes: [],
-      createdAt: new Date(),
+      createdAt: new Date().toISOString(),
      accountOwner: null,
      __typename: 'Company',
    };
--- a/front/src/pages/companies/companies-columns.tsx
+++ b/front/src/pages/companies/companies-columns.tsx
@ -2,7 +2,6 @@ import { useMemo } from 'react';
 import { createColumnHelper } from '@tanstack/react-table';

 import { CompanyEditableNameChipCell } from '@/companies/components/CompanyEditableNameCell';
-import { Company } from '@/companies/interfaces/company.interface';
 import { updateCompany } from '@/companies/services';
 import {
  PersonChip,
@ -24,9 +23,9 @@ import {
 } from '@/ui/icons/index';
 import { getCheckBoxColumn } from '@/ui/tables/utils/getCheckBoxColumn';
 import { mapToUser, User } from '@/users/interfaces/user.interface';
-import { QueryMode } from '~/generated/graphql';
+import { GetCompaniesQueryHookResult, QueryMode } from '~/generated/graphql';

-const columnHelper = createColumnHelper<Company>();
+const columnHelper = createColumnHelper<GetCompaniesQueryHookResult>();

 export const useCompaniesColumns = () => {
  return useMemo(() => {
@ -53,7 +52,7 @@ export const useCompaniesColumns = () => {
            content={props.row.original.domainName || ''}
            placeholder="Domain name"
            changeHandler={(value) => {
-              const company = props.row.original;
+              const company = { ...props.row.original };
              company.domainName = value;
              updateCompany(company);
            }}
@ -70,7 +69,7 @@ export const useCompaniesColumns = () => {
            content={props.row.original.employees?.toString() || ''}
            placeholder="Employees"
            changeHandler={(value) => {
-              const company = props.row.original;
+              const company = { ...props.row.original };

              if (value === '') {
                company.employees = null;
@ -93,7 +92,7 @@ export const useCompaniesColumns = () => {
            content={props.row.original.address || ''}
            placeholder="Address"
            changeHandler={(value) => {
-              const company = props.row.original;
+              const company = { ...props.row.original };
              company.address = value;
              updateCompany(company);
            }}
@ -110,10 +109,14 @@ export const useCompaniesColumns = () => {
        ),
        cell: (props) => (
          <EditableDate
-            value={props.row.original.createdAt || new Date()}
+            value={
+              props.row.original.createdAt
+                ? new Date(props.row.original.createdAt)
+                : new Date()
+            }
            changeHandler={(value: Date) => {
-              const company = props.row.original;
-              company.createdAt = value;
+              const company = { ...props.row.original };
+              company.createdAt = value.toISOString();
              updateCompany(company);
            }}
          />
@ -140,17 +143,8 @@ export const useCompaniesColumns = () => {
              };
            }}
            onChange={(relation: User) => {
-              const company = props.row.original;
-              if (company.accountOwner) {
-                company.accountOwner.id = relation.id;
-              } else {
-                company.accountOwner = {
-                  __typename: 'users',
-                  id: relation.id,
-                  email: relation.email,
-                  displayName: relation.displayName,
-                };
-              }
+              const company = { ...props.row.original };
+              company.accountOwnerId = relation.id;
              updateCompany(company);
            }}
            searchConfig={
--- a/front/src/pages/people/People.tsx
+++ b/front/src/pages/people/People.tsx
@ -8,7 +8,7 @@ import {
  reduceSortsToOrderBy,
 } from '@/filters-and-sorts/helpers';
 import { SelectedFilterType } from '@/filters-and-sorts/interfaces/filters/interface';
-import { mapToPerson, Person } from '@/people/interfaces/person.interface';
+import { Person } from '@/people/interfaces/person.interface';
 import {
  defaultOrderBy,
  insertPerson,
@ -50,21 +50,20 @@ export function People() {

  const { data } = usePeopleQuery(orderBy, where);

-  const people = data?.people.map(mapToPerson) ?? [];
+  const people = data?.people ?? [];

  async function handleAddButtonClick() {
-    const newPerson: Person = {
-      __typename: 'people',
+    const newPerson = {
+      __typename: 'Person',
      id: uuidv4(),
      firstname: '',
      lastname: '',
      email: '',
      phone: '',
      company: null,
-      pipes: [],
-      createdAt: new Date(),
+      createdAt: new Date().toISOString(),
      city: '',
-    };
+    } as const;

    await insertPerson(newPerson);
  }
--- a/front/src/pages/people/people-columns.tsx
+++ b/front/src/pages/people/people-columns.tsx
@ -3,7 +3,6 @@ import { createColumnHelper } from '@tanstack/react-table';

 import { EditablePeopleFullName } from '@/people/components/EditablePeopleFullName';
 import { PeopleCompanyCell } from '@/people/components/PeopleCompanyCell';
-import { Person } from '@/people/interfaces/person.interface';
 import { updatePerson } from '@/people/services';
 import { EditableDate } from '@/ui/components/editable-cell/types/EditableDate';
 import { EditablePhone } from '@/ui/components/editable-cell/types/EditablePhone';
@ -19,7 +18,9 @@ import {
 } from '@/ui/icons/index';
 import { getCheckBoxColumn } from '@/ui/tables/utils/getCheckBoxColumn';

-const columnHelper = createColumnHelper<Person>();
+import { GetPeopleQueryHookResult } from '../../generated/graphql';
+
+const columnHelper = createColumnHelper<GetPeopleQueryHookResult>();

 export const usePeopleColumns = () => {
  return useMemo(() => {
@ -34,7 +35,7 @@ export const usePeopleColumns = () => {
            <EditablePeopleFullName
              person={props.row.original}
              onChange={async (firstName: string, lastName: string) => {
-                const person = props.row.original;
+                const person = { ...props.row.original };
                person.firstname = firstName;
                person.lastname = lastName;
                await updatePerson(person);
@ -80,7 +81,7 @@ export const usePeopleColumns = () => {
            placeholder="Phone"
            value={props.row.original.phone || ''}
            changeHandler={(value: string) => {
-              const person = props.row.original;
+              const person = { ...props.row.original };
              person.phone = value;
              updatePerson(person);
            }}
@ -97,10 +98,14 @@ export const usePeopleColumns = () => {
        ),
        cell: (props) => (
          <EditableDate
-            value={props.row.original.createdAt || new Date()}
+            value={
+              props.row.original.createdAt
+                ? new Date(props.row.original.createdAt)
+                : new Date()
+            }
            changeHandler={(value: Date) => {
-              const person = props.row.original;
-              person.createdAt = value;
+              const person = { ...props.row.original };
+              person.createdAt = value.toISOString();
              updatePerson(person);
            }}
          />
@ -117,7 +122,7 @@ export const usePeopleColumns = () => {
            placeholder="City"
            content={props.row.original.city || ''}
            changeHandler={(value: string) => {
-              const person = props.row.original;
+              const person = { ...props.row.original };
              person.city = value;
              updatePerson(person);
            }}
--- a/front/src/providers/AuthProvider.tsx
+++ b/front/src/providers/AuthProvider.tsx
@ -4,7 +4,6 @@ import { useRecoilState } from 'recoil';
 import { getUserIdFromToken } from '@/auth/services/AuthService';
 import { currentUserState } from '@/auth/states/currentUserState';
 import { isAuthenticatingState } from '@/auth/states/isAuthenticatingState';
-import { mapToUser } from '@/users/interfaces/user.interface';
 import { useGetCurrentUserQuery } from '@/users/services';

 type OwnProps = {
@ -18,13 +17,13 @@ export function AuthProvider({ children }: OwnProps) {
  const userIdFromToken = getUserIdFromToken();

  const { data } = useGetCurrentUserQuery(userIdFromToken);
-
+  const user = data?.users?.[0];
  useEffect(() => {
-    if (data?.users[0]) {
-      setCurrentUser(mapToUser(data?.users?.[0]));
+    if (user) {
+      setCurrentUser(user);
      setIsAuthenticating(false);
    }
-  }, [data, setCurrentUser, setIsAuthenticating]);
+  }, [user, setCurrentUser, setIsAuthenticating]);

  return <>{children}</>;
 }
--- a/front/src/testing/mock-data/companies.ts
+++ b/front/src/testing/mock-data/companies.ts
@ -1,6 +1,6 @@
-import { GraphqlQueryCompany } from '@/companies/interfaces/company.interface';
+import { Company } from '../../generated/graphql';

-export const mockedCompaniesData: Array<GraphqlQueryCompany> = [
+export const mockedCompaniesData = [
  {
    id: '89bb825c-171e-4bcc-9cf7-43448d6fb278',
    domainName: 'airbnb.com',
@ -13,7 +13,7 @@ export const mockedCompaniesData: Array<GraphqlQueryCompany> = [
      email: 'charles@test.com',
      displayName: 'Charles Test',
      id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b',
-      __typename: 'users',
+      __typename: 'User',
    },
    __typename: 'Company',
  },
@ -83,4 +83,4 @@ export const mockedCompaniesData: Array<GraphqlQueryCompany> = [
    accountOwner: null,
    __typename: 'Company',
  },
-];
+] as Array<Company>;
--- a/front/src/testing/mock-data/people.ts
+++ b/front/src/testing/mock-data/people.ts
@ -1,4 +1,4 @@
-import { GraphqlQueryPerson } from '@/people/interfaces/person.interface';
+import { Person } from '../../modules/people/interfaces/person.interface';

 export const mockedPeopleData = [
  {
@ -55,7 +55,6 @@ export const mockedPeopleData = [

    city: 'Paris',
  },
-
  {
    id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6h',
    __typename: 'Person',
@ -74,4 +73,4 @@ export const mockedPeopleData = [

    city: 'Paris',
  },
-] satisfies Array<GraphqlQueryPerson>;
+] satisfies Array<Person>;
--- a/front/src/testing/mock-data/users.ts
+++ b/front/src/testing/mock-data/users.ts
@ -37,4 +37,4 @@ export const mockedUsersData: Array<GraphqlQueryUser> = [
      },
    },
  },
-];
+] as GraphqlQueryUser[];
--- a/front/yarn.lock
+++ b/front/yarn.lock