1. 19
    Implement Delete Shop Mutation with Apollo Client in Nextjs
    3m 16s

Implement Delete Shop Mutation with Apollo Client in Nextjs

Shadid Haque
InstructorShadid Haque
Share this video with your friends

Social Share Links

Send Tweet
Published 2 years ago
Updated 2 years ago

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.

egghead
egghead
~ 19 seconds 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