Skip to content
This repository has been archived by the owner on Apr 6, 2023. It is now read-only.

docs: add query option with example for useFetch #8719

Merged
merged 2 commits into from Nov 10, 2022
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
15 changes: 14 additions & 1 deletion docs/content/3.api/1.composables/use-fetch.md
Expand Up @@ -15,6 +15,7 @@ function useFetch(
type UseFetchOptions = {
key?: string
method?: string
query?: SearchParams
params?: SearchParams
body?: RequestInit['body'] | Record<string, any>
headers?: { key: string, value: string }[]
Expand Down Expand Up @@ -43,7 +44,8 @@ type AsyncData<DataT> = {
* **Url**: The URL to fetch.
* **Options (extends [unjs/ohmyfetch](https://github.com/unjs/ohmyfetch) options & [AsyncDataOptions](/api/composables/use-async-data#params))**:
* `method`: Request method.
* `params`: Query params.
* `query`: Adds query search params to URL using [ufo](https://github.com/unjs/ufo)
* `params`: Alias for `query`
* `body`: Request body - automatically stringified (if an object is passed).
* `headers`: Request headers.
* `baseURL`: Base URL for the request.
Expand Down Expand Up @@ -86,6 +88,17 @@ const { data, pending, error, refresh } = await useFetch('https://api.nuxtjs.dev
pick: ['title']
})
```
Adding Query Search Params:

Using the `query` option, you can add search parameters to your query. This option is extended from [unjs/ohmyfetch](https://github.com/unjs/ohmyfetch) and is using [ufo](https://github.com/unjs/ufo) to create the URL. Objects are automatically stringified.

```ts
const param1 = ref('value1')
const { data, pending, error, refresh } = await useFetch('https://api.nuxtjs.dev/mountains',{
query: { param1, param2: 'value2' }
})
```
Results in `https://api.nuxtjs.dev/mountains?param1=value1&param2=value2`

Using [interceptors](https://github.com/unjs/ohmyfetch#%EF%B8%8F-interceptors):

Expand Down