Create New Shop with Apollo Client useMutation
We are ready to create new shops for our vendors. To do this we'll define a CreateShop mutation that will take in all the data that our form provides. Then useMutation will accept that mutation and give us a function to pass our data into as well as give us the new created shop data. We'll pass in user information that we get from Auth0.
This lesson finishes up with an error because Fauna doesn't know if the request came from an authenticated user or not. We'll solve this with dynamic headers in the next lesson.
Shadid Haque: [0:00] Let's go ahead and implement the handleSubmit. First, we will import gql from apollo/client. Next, we will define our mutation. Let's name this const CREATE_SHOP, and then gql
[0:22] For arguments, I'm going to pass in name, description, coverImg, ownerID. They're all a string type. We type createShop again, this is the name of the mutation in GraphQL. Then, we pass in all our arguments.
[0:42] For products, I'm just going to keep it as an empty array for now. Then, we define our return sub-selection. In this case, I'm just going to select _id and the name of the shop.
[0:54] Next, we're going to import useMutation hook from apollo/client, and we're going to run our createShop mutation using this hook. We'll create a new destructured array inside our component.
[1:08] The first argument will be the executor function for our apollo/client. In the second argument, we're going to destructure data, and this is going to be the newly-created shop data. We call the useMutation hook and we plug in the CREATE_SHOP as an argument.
[1:27] Now, back in handleSubmit function, we can destructure name, description, and coverImg from our formData, and then we're going to call our createNewShop function.
[1:39] In the variable, I'm going to pass in name, description, and coverImg. For ownerID, however, we're going to get this from our auth0. Let's go ahead and do that.
[1:53] We will import the useUser hook, and then we will destructure user from useUser. Then for ownerID, I'm just going to use user?.sub. The sub-property is a unique identifier for every auth0 user. Then once a new shop is created, we want to show an alert. I'm going to create a catch clause in case of any error.
[2:27] Now, let's try to create a shop. We get an error and looks like we forgot to make our arguments required. Let's go ahead and fix that. Let's try to create the shop again, and you'll notice that we actually get an error. You'll notice that we get a permission denied error. This is because Fauna does not know whether this request came from an authenticated user or not.
[3:09] Now, if we open up our Network tab and inspect this GraphQL request, we'll notice that for our authorization token we're not passing in any accessToken from auth0. Instead, we're here passing in the old Fauna public key.
[3:25] Here, we have to pass in the accessToken from auth0. That's the only way Fauna is going to know that this is coming from an authenticated user.
[3:36] In the next lesson, we're going to take a look at how you can pass in dynamic headers and make these protected requests.