NuxtN
Nuxtβ€’3y ago
Hadrien

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


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",
    },
  },
);

It works in my template if I use it like :

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

to type :
_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 πŸ™‚
Was this page helpful?