Nuxt•2y ago

Working with `useFetch()`, Typescript and JSON-LD

Hi everyone, I have an API that responds with an object like so :

"@id": "a string",
// Some other properties...
"hydra:member": an array of the actual objects I use

"@id": "a string",
// Some other properties...
"hydra:member": an array of the actual objects I use

I'm currently fetching like this :

const { data: response, error } = await useFetch<{ "hydra:member": Recipe[] }>(
  config.public.apiUrl + "/api/recipes",
  {
    transform: (response) => response["hydra:member"],
    headers: {
      Authorization: `Bearer ${token}`,
      accept: "application/ld+json",
    },
  },
);

const { data: response, error } = await useFetch<{ "hydra:member": Recipe[] }>(
  config.public.apiUrl + "/api/recipes",
  {
    transform: (response) => response["hydra:member"],
    headers: {
      Authorization: `Bearer ${token}`,
      accept: "application/ld+json",
    },
  },
);

It works in my template if I use it like :

<div v-for="recipe in response">{{ recipe.name }}</div>

<div v-for="recipe in response">{{ recipe.name }}</div>

but my editor is not happy with the transform method : Can't assign type

(response: {
  "hydra:member": Recipe[];
}) => Recipe[]

(response: {
  "hydra:member": Recipe[];
}) => Recipe[]

to type :

_Transform<
  { "hydra:member": Recipe[] },
  { "hydra:member": Recipe[] }
>

_Transform<
  { "hydra:member": Recipe[] },
  { "hydra:member": Recipe[] }
>

I tried changing the return type of the useFetch() to useFetch<Recipe[]> but it doesn't work either. Thanks in advance for your help 🙂

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Working with `useFetch()`, Typescript and JSON-LD