Next.js Discord

Discord Forum

How to type Await/async fetch request from an API?

Unanswered
Red-billed Tropicbird posted this in #help-forum
Open in Discord
Avatar
Red-billed TropicbirdOP
I am trying to practice API fetch requests, using the following known API: https://jsonplaceholder.typicode.com/users

I was wondering how to properly type the await res.json() part of the fetch Response and this is what I came up with:
interface Geo {
  lat: string
  lng: string
}

interface Address {
  street: string
  suite: string
  city: string
  zipcode: string
  geo: Geo
}

interface Company {
  name: string
  catchPhrase: string
  bs: string
}

interface User {
  id: number
  name: string
  username: string
  email: string
  address: Address
  phone: string
  website: string
  company: Company
}

async function UsersPage() {
  const res: Response = await fetch(
    'https://jsonplaceholder.typicode.com/users'
  )
  const users: User[] = await res.json()
  return <div>UsersPage</div>
}

export default UsersPage

Is this a proper way to type it? Or what is the most idiomatic way of handling the fetch response?

2 Replies

Avatar
Red-billed TropicbirdOP
or should I use Type instead of Interface?
Avatar
Rizky 🙃
that or using zod to enforce it is actually that type is the common methods