Implement Delete Shop Mutation with Apollo Client in Nextjs
We will implement the delete shop in our Nextjs application. When the user selects the delete button for a shop in the shop's list, it will execute the DeleteShopAndProducts mutation and delete the shop and all associated products.
Shadid Haque: [0:00] In our application, we are going to execute deleteShopAndProducts mutation when the Delete button is clicked. We are going to go back to our shopList component.
[0:10] Here, we are going to import useMutation from Apollo Client. Next, we are going to import gql from Apollo Client as well. Next, we're going to import httpLink and setAuth from gqlClient.
[0:46] We're going to define our deleteShopAndProducts mutation. Next, we are going to hook up the useMutation hook inside our component. We're going to name our executor function, deleteShop, and we're going to destructure client and data. We're going to provide the deleteShop mutation inside our useMutation hook.
[1:24] On button click, we're going to execute the deleteShop mutation. We're going to pass in the shopId as variables. Once the shop is deleted, we're going to reload the window. This ID here is actually going to be shopId. If you recall from the previous lesson, only authenticated users have the permission to run the deleteShopAndProducts mutation.
[2:03] In our Apollo Client, we have to pass in the accessToken from auth0. Otherwise, we're going to get a permission error. We can go back to manage-shops and pass the accessToken to our shopList component. Then, before executing the deleteShop function, we just set the auth token just like we did before.
[2:34] All right. Let's give this a shot now. Looks like we have an error. It's complaining about the wrong ID name. We just have to change the ID to shopID. Now, if we try to delete a shop, we will be able to delete a shop and all the products associated to it.