Create Shop Details View that uses GraphQL to Query Fauna by Shop Id

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.