feat(useFetch): new function #330

wheatjs · 2021-02-12T01:21:10Z

Here is the initial implementation of useFetch, as mentioned in #327.

General Feature Overview

Abort Requests if the browser supports it
Auto refetch requests if the url is a ref and the user has enabled autoRefetch
Reactive status, fetching state, finished stated, error, and canAbort
Ability to prevent the first initial fetch and manually call the fetch with the execute function

The signature for useFetch provides multiple overrides so it can be used in any of the following ways

useFetch(url: MaybeRef<string>)
useFetch(url: MaybeRef<string>, useFetchOptions: UseFetchOptions)
useFetch(url: MaybeRef<string>, options: RequestInit, useFetchOptions?: UseFetchOptions)

Let me know what you think and if you would like anything changed!

BREAKING CHANGES: - the `ws` option in the return of `useWebSocket` is not a ref instead of plain WebSocket instance - `useWebSocket`'s `send` will now buffers data before the connection established instead of discarding sliently - `useWebSocket`'s returned `state` is renamed to `status`

packages/core/useFetch/index.ts

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

… to check for their existance

wheatjs · 2021-02-12T16:36:18Z

Everything you mentioned should be fixed now

packages/core/useFetch/index.ts

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

packages/core/useFetch/index.ts

antfu · 2021-02-12T16:46:41Z

packages/core/useFetch/index.ts

+        if (contentType && contentType.includes('application/json'))
+          fetchResponse.json().then(json => data.value = json)
+        else
+          fetchResponse.text().then(text => data.value = text)


Could we make this usage simpler with some API?

Hmm, is there something out there that would allow us to simplify it? I'm not aware of anything, but if you know I'll update it

Not really. But maybe keep your implementation and make a useFetchJson wrapper with preconfigured header? Moreover, something like usePost and usePostJson?

Another approach might be similar to ky

useFetch(URL, {}).json()

WDYT?

Hmm doing more research into the fetch API they actually have more than just text() and json(), https://developer.mozilla.org/en-US/docs/Web/API/Body#methods

If we were to make a wrapper for all of these we would have useFetch, useFechJson, useFetchBlob, useFetchFormData, and useFetchArrayBuffer. But I feel like most of these would not be used very often and it would create quite a few methods. Perhaps another option would be to have an option in the config to set how the data is parsed. Something like this perhaps?

useFetch(url, { // Not sure what a good name for this would be // It could be defaulted toauto which would try to automatically detect the type from the response headers readAs: 'auto' //could also be json, formData, blob, arrayBuffer, or text })

I do like the idea of wrappers for usePost and usePostJson. If we do that would we also want ones for form-data and multipart form data?

antfu · 2021-02-12T16:48:37Z

packages/core/useFetch/index.ts

+  if (isRef(url)) {
+    if (isRef(options.refetch))
+      watch([options.refetch, url], () => unref(options.refetch) && execute())
+    else if (options.refetch)
+      watch(url, () => execute())
+  }


Suggested change

if (isRef(url)) {

if (isRef(options.refetch))

watch([options.refetch, url], () => unref(options.refetch) && execute())

else if (options.refetch)

watch(url, () => execute())

}

watch(

()=>{

unref(url)

unref(options.refetch)

},

() => unref(options.refetch) && execute()

)

Sorry for the formatting

No problem, I can fix it in a sec

This doesn't actually seem to work. Can you watch an unref? I was under the impression it just gave you back the raw value if it was a ref

Did you test it? It's not watching an unref but the "accessing". unref is just a unified way to accessing here, the return value doesn't matter. Should work I think.

Ok it looks like it does work, but the watch needs to have deep: true set

Em? I don't think it's necessary... 🤔

Weird, it only seems to work when I set deep: true. Not really sure why

I just created a repo to demonstrate the issue. It is a bit of a contrived example, but it should show the issue. It is in vite so you should be able to just clone it and run it https://github.com/jacobclevenger/vue3-watch-bug/blob/master/src/App.vue

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

antfu · 2021-02-14T20:23:59Z

@jacobclevenger got a few ideas of the api design, will give a try when I am back from vacation. Please wait for this a while, thanks.

wheatjs · 2021-02-14T20:33:31Z

@jacobclevenger got a few ideas of the api design, will give a try when I am back from vacation. Please wait for this a while, thanks.

Alright no problem, I look forward to it. Enjoy your vacation!

antfu · 2021-02-19T02:14:10Z

Made some changes to the API (haven't tested it out, and maybe we should have some unit tests), wondering what you think? Thanks!

wheatjs

API design looks good, I'll test out functionality and see about some tests

packages/core/useFetch/index.ts

wheatjs · 2021-02-19T19:46:18Z

packages/core/useFetch/index.test.ts

+  test('basic get request', async() => {
+    const { statusCode } = useFetch(urls.get)
+
+    /**


Would like some input on the best way to go about writing these tests in this situation

The comment starts on line 13

We can make the execute() async. And they can also use when

await when(isFinished)

Sounds good, I'll make those changes and create some basic tests

packages/core/useFetch/index.test.ts

wheatjs · 2021-02-22T21:44:48Z

@antfu Added in some basic tests and fixed a few bugs with the useFetch function. Let me know what you think and if you'd like anymore tests 😄

antfu and others added 3 commits February 9, 2021 23:32

feat(useFetch): initial implementation of useFetch

0ffbe6c

updated signature overrides and documentation for UseFetchOptions

38a9a94

antfu reviewed Feb 12, 2021

View reviewed changes

wheatjs and others added 4 commits February 12, 2021 11:26

Renamed autoFetch to immediate

f41c653

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

Renamed autoRefetch to refetch

954a037

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

Removed string from error message

9680574

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

Updated demos and docs to reflect changes in API. Args now use length…

83b82ef

… to check for their existance

antfu reviewed Feb 12, 2021

View reviewed changes

packages/core/useFetch/index.ts Show resolved Hide resolved

antfu reviewed Feb 12, 2021

View reviewed changes

packages/core/useFetch/index.ts Outdated Show resolved Hide resolved

wheatjs and others added 3 commits February 12, 2021 11:45

Rename status to statusCode

8f9d850

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

set statusCode to null on fetch

fc387cb

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

Reset varaibles on refetch and rename status to statusCode

b56d392

antfu reviewed Feb 12, 2021

View reviewed changes

wheatjs and others added 3 commits February 12, 2021 11:52

Remove instanceof from Abort controller check

d692c28

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

Simplify refetch watch

0d96f10

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

Patched watch bug for now. Started looking into apis for usePostJson

b9a8e2d

chore: api design

237724c

wheatjs commented Feb 19, 2021

View reviewed changes

fixed issue with new api implementation. Started working on tests

374ed94

wheatjs commented Feb 19, 2021

View reviewed changes

packages/core/useFetch/index.ts Outdated Show resolved Hide resolved

wheatjs commented Feb 19, 2021

View reviewed changes

antfu and others added 3 commits February 20, 2021 12:51

Merge branch 'main' into main

cc8edad

fixed issue with initialized check

34e8fed

Merge branch 'main' of github.com:jacobclevenger/vueuse into main

345d5de

antfu changed the title ~~feat(useFetch): initial implementation of useFetch~~ feat(useFetch): new function Feb 20, 2021

antfu and others added 3 commits February 20, 2021 20:31

Merge branch 'main' into main

cf21b90

chore: update docs

8530f98

execute now returns a promise

ae739be

wheatjs commented Feb 21, 2021

View reviewed changes

packages/core/useFetch/index.test.ts Outdated Show resolved Hide resolved

wheatjs added 2 commits February 21, 2021 01:48

fixed overly verbose return in execute function

2c5092a

Added 'aborted' proprty to useFetch. Added in basic tests

acb7bf0

Merge remote-tracking branch 'origin/main' into pr/jacobclevenger/330

9e07337

antfu enabled auto-merge (squash) February 23, 2021 03:39

antfu approved these changes Feb 23, 2021

View reviewed changes

chore: update locks

5ad7f98

antfu merged commit 889f234 into vueuse:main Feb 23, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(useFetch): new function #330

feat(useFetch): new function #330

wheatjs commented Feb 12, 2021 •

edited

wheatjs commented Feb 12, 2021

antfu Feb 12, 2021

wheatjs Feb 12, 2021

antfu Feb 12, 2021

wheatjs Feb 12, 2021

antfu Feb 12, 2021

wheatjs Feb 12, 2021

wheatjs Feb 12, 2021

antfu Feb 12, 2021

wheatjs Feb 12, 2021

antfu Feb 12, 2021 •

edited

wheatjs Feb 12, 2021

wheatjs Feb 14, 2021 •

edited

antfu commented Feb 14, 2021

wheatjs commented Feb 14, 2021

antfu commented Feb 19, 2021

wheatjs left a comment

wheatjs Feb 19, 2021

wheatjs Feb 19, 2021

antfu Feb 20, 2021

wheatjs Feb 20, 2021

wheatjs commented Feb 22, 2021

feat(useFetch): new function #330

feat(useFetch): new function #330

Conversation

wheatjs commented Feb 12, 2021 • edited

wheatjs commented Feb 12, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

antfu Feb 12, 2021 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wheatjs Feb 14, 2021 • edited

Choose a reason for hiding this comment

antfu commented Feb 14, 2021

wheatjs commented Feb 14, 2021

antfu commented Feb 19, 2021

wheatjs left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wheatjs commented Feb 22, 2021

wheatjs commented Feb 12, 2021 •

edited

antfu Feb 12, 2021 •

edited

wheatjs Feb 14, 2021 •

edited