T
TanStack•13mo ago
harsh-harlequin

Setting item date string as Date on query

Hey there I was wondering if there's a way to automatically set the incoming date string as a date when the value is returned. I'm using graphql and so it's locked in that the request that I send will contractually send a date back. The thing is, I don't want to have to parse it, or make a new type. I simply want to be able to use it as a date as soon as I get it back. Is there a current way for me to do this or do I need to have 2 types (in typescript) to handle this response? btw: We do not use GraphQL Code Generator in our app 
export interface CelebrationSetup {
  showCleanerAnniversariesOnCalendar: boolean;
  showCleanerBirthdaysOnCalendar: boolean;
  showCustomerAnniversariesOnCalendar: boolean;
  showCustomerBirthdaysOnCalendar: boolean;
}
export interface CleanerWithAnniversaryDates {
  id: string;
  displayName: string;
  birthDate?: Date; // actually an incoming string
  hiredDate?: Date; // actually an incoming string
}

export interface CelebrationSetupQueryResponse {
  me: {
    id: string;
    account: CelebrationSetup;
    cleaners: CleanerWithAnniversaryDates[];
  };
}

export async function fetchCelebrationSetup() {
  return request<CelebrationSetupQueryResponse>(gql`
    query CelebrationSetup {
      me {
        id
        cleaners {
          id
          displayName
          birthDate
          hiredDate
        }
        account {
          id
          showCleanerAnniversariesOnCalendar
          showCleanerBirthdaysOnCalendar
          showCustomerAnniversariesOnCalendar
          showCustomerBirthdaysOnCalendar
        }
      }
    }
  `);
}
export interface CelebrationSetup {
  showCleanerAnniversariesOnCalendar: boolean;
  showCleanerBirthdaysOnCalendar: boolean;
  showCustomerAnniversariesOnCalendar: boolean;
  showCustomerBirthdaysOnCalendar: boolean;
}
export interface CleanerWithAnniversaryDates {
  id: string;
  displayName: string;
  birthDate?: Date; // actually an incoming string
  hiredDate?: Date; // actually an incoming string
}

export interface CelebrationSetupQueryResponse {
  me: {
    id: string;
    account: CelebrationSetup;
    cleaners: CleanerWithAnniversaryDates[];
  };
}

export async function fetchCelebrationSetup() {
  return request<CelebrationSetupQueryResponse>(gql`
    query CelebrationSetup {
      me {
        id
        cleaners {
          id
          displayName
          birthDate
          hiredDate
        }
        account {
          id
          showCleanerAnniversariesOnCalendar
          showCleanerBirthdaysOnCalendar
          showCustomerAnniversariesOnCalendar
          showCustomerBirthdaysOnCalendar
        }
      }
    }
  `);
}
thank you in advance
1 Reply
harsh-harlequin
harsh-harlequinOP•13mo ago
So far the cleanest answer I have is 
export interface CelebrationSetup {
  showCleanerAnniversariesOnCalendar: boolean;
  showCleanerBirthdaysOnCalendar: boolean;
  showCustomerAnniversariesOnCalendar: boolean;
  showCustomerBirthdaysOnCalendar: boolean;
}

export interface CleanerWithAnniversaryDates {
  id: string;
  displayName: string;
  birthDate?: Date;
  hiredDate?: Date;
}

export interface CelebrationSetupQueryResponse {
  me: {
    id: string;
    account: CelebrationSetup;
    cleaners: CleanerWithAnniversaryDates[];
  };
}

function parseDates(
  response: CelebrationSetupQueryResponse,
): CelebrationSetupQueryResponse {
  return {
    ...response,
    me: {
      ...response.me,
      cleaners: response.me.cleaners.map((cleaner) => ({
        ...cleaner,
        birthDate: cleaner.birthDate ? new Date(cleaner.birthDate) : undefined,
        hiredDate: cleaner.hiredDate ? new Date(cleaner.hiredDate) : undefined,
      })),
    },
  };
}

export async function fetchCelebrationSetup() {
  const response = await request<CelebrationSetupQueryResponse>(gql`
    query CelebrationSetup {
      me {
        id
        cleaners {
          id
          displayName
          birthDate
          hiredDate
        }
        account {
          id
          showCleanerAnniversariesOnCalendar
          showCleanerBirthdaysOnCalendar
          showCustomerAnniversariesOnCalendar
          showCustomerBirthdaysOnCalendar
        }
      }
    }
  `);

  // Parse dates in the response before returning
  return parseDates(response);
}

// Hook using TanStack Query to fetch and parse the data
export function useCelebrationSetupQuery() {
  return useQuery({
    queryKey: CelebrationSetupQueryKey.get(),
    queryFn: fetchCelebrationSetup,
    select(data) {
      return data.me;
    },
  });
}
export interface CelebrationSetup {
  showCleanerAnniversariesOnCalendar: boolean;
  showCleanerBirthdaysOnCalendar: boolean;
  showCustomerAnniversariesOnCalendar: boolean;
  showCustomerBirthdaysOnCalendar: boolean;
}

export interface CleanerWithAnniversaryDates {
  id: string;
  displayName: string;
  birthDate?: Date;
  hiredDate?: Date;
}

export interface CelebrationSetupQueryResponse {
  me: {
    id: string;
    account: CelebrationSetup;
    cleaners: CleanerWithAnniversaryDates[];
  };
}

function parseDates(
  response: CelebrationSetupQueryResponse,
): CelebrationSetupQueryResponse {
  return {
    ...response,
    me: {
      ...response.me,
      cleaners: response.me.cleaners.map((cleaner) => ({
        ...cleaner,
        birthDate: cleaner.birthDate ? new Date(cleaner.birthDate) : undefined,
        hiredDate: cleaner.hiredDate ? new Date(cleaner.hiredDate) : undefined,
      })),
    },
  };
}

export async function fetchCelebrationSetup() {
  const response = await request<CelebrationSetupQueryResponse>(gql`
    query CelebrationSetup {
      me {
        id
        cleaners {
          id
          displayName
          birthDate
          hiredDate
        }
        account {
          id
          showCleanerAnniversariesOnCalendar
          showCleanerBirthdaysOnCalendar
          showCustomerAnniversariesOnCalendar
          showCustomerBirthdaysOnCalendar
        }
      }
    }
  `);

  // Parse dates in the response before returning
  return parseDates(response);
}

// Hook using TanStack Query to fetch and parse the data
export function useCelebrationSetupQuery() {
  return useQuery({
    queryKey: CelebrationSetupQueryKey.get(),
    queryFn: fetchCelebrationSetup,
    select(data) {
      return data.me;
    },
  });
}

Did you find this page helpful?