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

docs: add query option with example for useFetch #8719

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3121114
Add 'query' option with example
Aietes Nov 5, 2022
8c07231
Update useFetch with query option
Aietes Nov 5, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 14 additions & 1 deletion docs/content/3.api/1.composables/use-fetch.md
View file
Open in desktop
Original file line number Diff line number Diff line change
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