问题

以下是您要翻译的内容：

"Learning Nuxt3 and first time using fetch as opposed to Axios.

I have an API that returns data with 'meta' object and 'data' array.

Fetch expects response to only include a single 'data' object with everything in it. The Response type doesn't include a 'data' prop.

Here is a simple example:

const { data, error, pending, refresh } = await useAPIFetch<Response>(
   "/matters",
   {
   method: "GET",

  params: {
    search: "",
    list: "",
   },
  }
 );

const matters = data.data

I want to set matters to just get the data.data array. However, I get a type error

Property 'data' does not exist on type 'Ref<Response | null>'

How do I extend the Response type to include meta and data types? Or is there another way I should be doing this?"

    const { data, error, pending, refresh } = await useAPIFetch<Response>(
   "/matters",
   {
   method: "GET",

  params: {
    search: "",
    list: "",
   },
  }
 );

const matters = data.data

答案1

得分: 1

你需要创建自己的接口并将其扩展到response接口。类似于这个示例。

<script setup lang="ts">

interface Meta {
  obj1: string
  obj2: string
}

interface Data {
  data: string[]
}

interface CustomResponse extends Response {
  meta: Meta
  data: string[]
}

const { data: response } = await useFetch<CustomResponse>('/api/your-api')

</script>

照着这样做，对你也应该有效。查看截图作为证明。

Meta接口
[![进入图像描述][2]][2]

至于Data部分，当你尝试进行map或push时，它应该被建议为数组。
[![进入图像描述][3]][3]

请注意，我只翻译了代码和图像的描述文字。

<details>
<summary>英文:</summary>

You need to create your own interface and extend it to the `response` interface. Something like this example.

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    &lt;script setup lang=&quot;ts&quot;&gt;

    interface Meta {
      obj1: string
      obj2: string
    }

    interface Data {
      data: string[]
    }

    interface CustomResponse extends Response {
      meta: Meta
      data: string[]
    }

    const { data: response } = await useFetch&lt;CustomResponse&gt;(&#39;/api/your-api&#39;)

    &lt;/script&gt;

&lt;!-- end snippet --&gt;

By following that, it should be working for you as well. See screenshots as proof.
[![enter image description here][1]][1]


Meta interface
[![enter image description here][2]][2]


As for the Data. When you try to `map` or `push` It should be suggested as they are for arrays.
[![enter image description here][3]][3]


  [1]: https://i.stack.imgur.com/jL8PV.png
  [2]: https://i.stack.imgur.com/Z093d.png
  [3]: https://i.stack.imgur.com/ZTpm3.png

</details>