Create Shop Details View that uses GraphQL to Query Fauna by Shop Id
When a vendor manages their shops, they might want to click into the shop and mange the products associated with that shop. Let's create a page for that.
I'll create a details route that will host this information. On this page we will write a GetShop query that will take in the shop id that is pulled from the route. Similar to the shops page, we will iterate over the products on the shop and add buttons to manage individual products.
Shadid Haque: [0:00] In our application, we have a shops list. Now, it would be nice to have a detailed view for each of these shops. In the shop details page, we can show more information about the shop, as well as all the products that belong to that shop.
[0:15] Let's go to the shopList component. Let's turn the shop title into a clickable link. We'll replace h2 with anchor links. We'll apply some padding, and let's make the text underlined.
[0:37] Let's format the code so we can see it better. We will wrap this with the link and have a href that is shops, ID of the shop, and then details. Now, when we click on this, it's just going to show us 404 Not Found.
[0:58] Let's go ahead and build this page. Under shops/ID, we'll create a new file called details.tsx. We'll create a simple page component. Let's import useRouter from Next.js. We can get the shopId using the router.
[1:30] Next, we're going to import gql and useQuery from apollo/client. Next, we're going to create a query to get a shop by its ID. We'll specify the products sub-selection. This way we'll get all the products that belongs to this shop. Next, we're going to make the query using the useQuery hook.
[2:34] We'll return a text when it's loading. Let's render the name and the description of the shop. Next, we will render the list of products this shop has. We'll simply render the product.name and Edit and a Delete button.
[3:16] Finally, let's add some styling to this buttons. A right margin and an underlined text would do the trick. Now, we have a details page for our shop.