d88m_andy Posts - Answer Overflow

d88m_andy

•Created by d88m_andy on 8/13/2024 in #❓・help

[Q] useFetch's transform option + typescript

Hi everyone! I've been playing with useFetch's transform option recently and got into some typescript errors that i got resolved but the code feels hacky a bit. Do you think it can be improved a bit more? My interfaces:

interface Employee {
  name: string
  country: string
}

interface Company {
  name: string
  employees: Employee[]
}

interface CompanyTransformed {
  name: string
  employees: {
    all: {
      country: string
      employees: Employee[]
    }
    uk: {
      country: string
      employees: Employee[]
    }
    usa: {
      country: string
      employees: Employee[]
    }
  }
}

interface Employee {
  name: string
  country: string
}

interface Company {
  name: string
  employees: Employee[]
}

interface CompanyTransformed {
  name: string
  employees: {
    all: {
      country: string
      employees: Employee[]
    }
    uk: {
      country: string
      employees: Employee[]
    }
    usa: {
      country: string
      employees: Employee[]
    }
  }
}

Code before:

const { data: company } = await useApi<CompanyTransformed>('/some-endpoint', {
  transform(company: Company): CompanyTransformed {
    const employees = {
      all: {
        country: 'Global',
        employees: company.employees,
      },
      uk: {
        country: 'United Kingdom',
        employees: company.employees.filter(employee => employee.country === 'uk'),
      },
      usa: {
        country: 'United States of America',
        employees: company.employees.filter(employee => employee.country === 'usa'),
      },
    }
    return {
      ...company,
      employees,
    }
  },
})

const { data: company } = await useApi<CompanyTransformed>('/some-endpoint', {
  transform(company: Company): CompanyTransformed {
    const employees = {
      all: {
        country: 'Global',
        employees: company.employees,
      },
      uk: {
        country: 'United Kingdom',
        employees: company.employees.filter(employee => employee.country === 'uk'),
      },
      usa: {
        country: 'United States of America',
        employees: company.employees.filter(employee => employee.country === 'usa'),
      },
    }
    return {
      ...company,
      employees,
    }
  },
})

Code after:

const { data: company } = await useApi<CompanyTransformed>('/some-endpoint', {
  transform(company) {
    const { employees: originalEmployees, ...rest } = company as unknown as Company
    const employees = {
      all: {
        country: 'Global',
        employees: originalEmployees,
      },
      uk: {
        country: 'United Kingdom',
        employees: originalEmployees.filter(employee => employee.country === 'uk'),
      },
      usa: {
        country: 'United States of America',
        employees: originalEmployees.filter(employee => employee.country === 'usa'),
      },
    }
    return {
      ...rest,
      employees,
    } as unknown as CompanyTransformed
  },
})

const { data: company } = await useApi<CompanyTransformed>('/some-endpoint', {
  transform(company) {
    const { employees: originalEmployees, ...rest } = company as unknown as Company
    const employees = {
      all: {
        country: 'Global',
        employees: originalEmployees,
      },
      uk: {
        country: 'United Kingdom',
        employees: originalEmployees.filter(employee => employee.country === 'uk'),
      },
      usa: {
        country: 'United States of America',
        employees: originalEmployees.filter(employee => employee.country === 'usa'),
      },
    }
    return {
      ...rest,
      employees,
    } as unknown as CompanyTransformed
  },
})

What do u think?

2 replies

Gaming

Programming