Nuxt•4mo ago

[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?

1 Reply

d88m_andyOP•4mo ago

And the error was:

Type '(company: Company) => CompanyTransformed' is not assignable to type '_Transform<CompanyTransformed, CompanyTransformed>'.
  Types of parameters 'company' and 'input' are incompatible.
    Type 'CompanyTransformed' is not assignable to type 'Company'.
      Types of property 'employees' are incompatible.

Type '(company: Company) => CompanyTransformed' is not assignable to type '_Transform<CompanyTransformed, CompanyTransformed>'.
  Types of parameters 'company' and 'input' are incompatible.
    Type 'CompanyTransformed' is not assignable to type 'Company'.
      Types of property 'employees' are incompatible.

If it matters, useApi is just a wrapper from here https://nuxt.com/docs/guide/recipes/custom-usefetch#custom-usefetchuseasyncdata

Nuxt

Custom useFetch in Nuxt · Recipes

How to create a custom fetcher for calling your external API in Nuxt 3.

Gaming

Programming

[Q] useFetch's transform option + typescript