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.