In this task, you are going to create a form to add a new pet to the pet's website.
- install Axios using
npm i axios
- Create a folder called
api
in thesrc
directory - inside this folder create a file called
index.js
- inside
index.js
importaxios
- use the bellow table to figure out what the
baseURL
- Then create an instance using this
axios.create({baseURL: baseURL})
. refer to the docs for axios - export as default your
instance
Hint:
import axios from "axios";
const instance = axios.create({
baseURL: "https://pets-react-query-backen.herokuapp.com",
});
export default instance;
-
create another file in API called
pets.js
-
inside
pets.js
import the instance you just created -
create a function for each endpoint
- one for getting all the pets
- one for getting one pet by ID
- one for adding a new pet
- one for updating a pet by ID
- one for deleting a pet by ID
-
In
PetList.js
call the API when the button is clicked and remove the petsDataIt's no longer needed our data is now coming from the backend.
-
In
PetDetail.js
call the get by id function to get the pet and remove thepetsData
array -
In
PetDetail.js
make the delete button work
Title | Method | Endpoint | Data required |
---|---|---|---|
Fetch all pets | GET |
https://pets-react-query-backend.eapi.joincoded.com/pets |
|
Fetch one pet | GET |
https://pets-react-query-backend.eapi.joincoded.com/pets/${id} |
|
Create a pet | POST |
https://pets-react-query-backend.eapi.joincoded.com/pets |
name , image , type , adopted |
Delete a pet | DELETE |
https://pets-react-query-backend.eapi.joincoded.com/pets/${id} |