Use fetch, axios, ky, or any other promise-based library within useQuery hook

Tomasz Ducin
InstructorTomasz Ducin
Share this video with your friends

Social Share Links

Send Tweet
Published 6 months ago
Updated a month ago

As long as whatever you're using to fetch data returns a Promise, you can use it in the useQuery hook.

So when fetching data, you can use native fetch, axios, ky, or whatever else!

[00:00] Open the function which executes the HTTP request. In our case, the use query hook is using the fetch API. However, use query requires any API or any library that is capable of returning a promise which resolves once the data is being received. Let's [00:19] install an alternative. Let's type npm install, and we'll install Axios and Kai as just two example libraries, which are going to be replacements for fetch. Let's start with Kai. Replace fetch with Kai. Now we need to import [00:39] the Kai object from Kai package And let's type kai dot get just to make the HTTP method explicit. And now let's open the browser dev tools and head over to the network tab. And after refreshing the page, we will see that the same request, employees page [00:59] 1, has been requested and the data correctly displays. So there is no difference in how React Query works with whatever the API is. So let's also try Axios over here. So const response equals and now we're going to use [01:19] Axios, and we need to import Axios from the Axios package. And we're going to execute again a get request. We'll use what the URL was. And here, we're going to slightly change what is going to be the types over here. [01:39] So this works the same way as the assertion, however, the API is slightly different because we're explicitly passing what is going to be the generic type over here. So what we're going to return is the response dot data. So the response dot data [02:00] is basically the type that we have put over here. And after I move the await to the first line, this one is not needed. So after saving the file and refreshing the page, we can see that now Axius is loading the data. So whatever the API is, as [02:20] long as returns a promise including the response, this query is going to work correctly.

egghead
egghead
~ 3 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today