Create Dynamic Next.js Shop Page to Add Products for a Shop with Apollo useMutation
Each shop will need to have products added to it by the vendor. To do this we'll need to dynamically create pages based on which shop we want to add to. Next.js has dynamically routing that we will utilize here. We'll set the shop id as the dynamic portion of the route and display a new product form.
Here we will create that product form component and use Apollo useMutation like we did before to take in the form data. You'll notice a new keyword in our mutation query connect which we can use because we have a @relation set between products and shop. This connect will associate the product to the shop through the id that we grab from the route.
Instructor: [0:00] When we select the Add Product link, our application will navigate to a new page. We're going to change the button with an anchor tag. Next, we will wrap our anchor tag with the link. The link will have an href, and we want to specify the route here.
[0:23] Let's make the route Shops and then the dynamic ID of that Shop and Products. Then, at the top here, we're going to import link from Next.js.
[0:40] Now, when we click the button, it tries to take us to the Products page, and in the URL, you can see the ID of the shop. However, we don't have this page built yet. Let's go ahead and create that.
[0:52] We're going to create a new folder called Shops under Pages directory. Inside it, I'm going to create another folder and call it Bracket ID Bracket. This folder structure will create our dynamic route. Inside this, I'm going to create another file called products.tsx.
[1:11] If you're not sure about how dynamic routes work in Next.js, please go ahead and read their documentation. A link for the documentation for dynamic routing will be provided with the lesson notes.
[1:23] Back in our code, let's go ahead and build this page.
[1:39] We're going to import useRouter hook from next router, we're going to destructure ID from router.query. This ID is coming from our URL, and this is going to be the shop ID.
[1:57] Now, let's go ahead and create a new component. This new component will be responsible for creating new products for the shop.
[2:04] Let's call this component new product, and we're going to pass in the shop ID as a prop in this new component.
[2:11] Let's create a new file called new product.tsx. Here, I'm going to paste in some pre-written code. Let's import this to our Products page.
[2:34] Now, you can see that this is a simple form component, so let's go over the component code.
[2:42] We're using the useState hook from React to manage the different form input. Then, we have handleChange function, which is just going to handle the changes in the form input.
[2:55] Finally, we have a handleSubmit function that submits the form. Now, this function doesn't really do anything, it's unimplemented.
[3:02] Here on form submit, we're going to create a new product. We're going to import useMutation from Apollo Client, and then we're also going to import gql from Apollo Client, we're also going to import HttpLink and setAuth token from gql client.
[3:21] Now, we do need to access token from Auth0, so we're going to go back to the Products page.
[3:28] Here, we're going to write the getServerSideProps function, and we're going to retrieve the Auth0 access token. Let's import get access token from Auth0, and then we will pass this access token as prop in our form component. We're all set.
[4:00] Now, let's go back to our new product component. Here, we're going to define create products mutation. In the arguments, we pass in name, description, image URL, category, price, shop ID.
[4:43] Notice, for shop, we're using the connect keyword, and we're connecting it to the shop ID argument. This is how we create relationship in Fauna, a product always belongs to a shop.
[4:54] In our schema, we already specified that we wanted to create a one-to-many relationship between shop and product models. We did this using the @relation directive in our schema.graphql file. This is why we're able to use the connect keyword to associate a product to a shop.
[5:13] Let's select ID and name as our return sub-selection.
[5:21] Next, we're going to use the useMutation hook and set this mutation up. On form submit, we're just going to execute this mutation.
[5:36] Just like in the previous mutation, we are going to set the authorization token to be the Auth0 token, and then we call the createProduct function and we plug in the variable.
[5:51] For price, we're going to convert the form data into number, and for shop ID, we're going to get the shop ID from the props.
[6:00] Finally, we'll do an alert when a new product is created.
[6:09] Let's give this a shot and try to create a new product. Looks like our product has been created.