Creating custom API Hooks

We can also create Hooks for the various API calls. Putting these Hooks in a single file allows us to adjust the API calls easily later on. We are going to prefix our custom API Hooks with useAPI so it is easy to tell which functions are API Hooks.

Extracting custom API Hooks

Let’s create custom Hooks for our API now by following these steps:

1. Copy the Chapter12_2 folder to a new Chapter12_3 folder by executing the following command:

   $ cp -R Chapter12_2 Chapter12_3
   

2. Open the new Chapter12_3 folder in VS Code.
3. Create a new src/hooks/api.js file.
4. Edit src/hooks/api.js and import the following functions:

   import { useSuspenseQuery, useMutation } from '@tanstack/react-query'
   import {
     fetchPosts,
     fetchPost,
     searchPosts,
     createPost,
     queryClient,
   } from '@/api.js'
   

5. Define a function to fetch posts, copied over from the code we had in src/components/post/PostFeed...