🍝 Cooking a Deliveroo clone with Next.js (React), GraphQL, Strapi and Stripe - 🍔 Dishes list (part 3/7)
Tags: react, graphql, strapi, beginners
Published: 2019-02-04 02:45:41

---
title: 🍝 Cooking a Deliveroo clone with Next.js (React), GraphQL, Strapi and Stripe - 🍔 Dishes list (part 3/7)
published: true
description: Part 3/7, Creating Deliveroo clone with React, GraphQL, Strapi and Stripe
tags: #react #graphql #strapi #beginners
cover_image: https://thepracticaldev.s3.amazonaws.com/i/iudm6at0xp8v1o7f1f86.png
series: 🍝 Cooking a Deliveroo clone with Next.js (React), GraphQL, Strapi and Stripe - 🍔 Dishes list (part 3/7)
---

![Strapi Next.js tutorial](https://thepracticaldev.s3.amazonaws.com/i/iudm6at0xp8v1o7f1f86.png)

*This tutorial is part of the « Cooking a Deliveroo clone with Next.js (React), GraphQL, Strapi and Stripe » tutorial series.*

**Table of contents**

- 🏗️ [Setup](https://dev.to/ryanrez/-cooking-a-deliveroo-clone-with-nextjs-react-graphql-strapi-and-stripe----setup-part-17-ked) (part 1) 
- 🏠 [Restaurants](https://dev.to/ryanrez/-cooking-a-deliveroo-clone-with-nextjs-react-graphql-strapi-and-stripe----restaurants-list-part-27-10ce) (part 2)
- 🍔 [Dishes](https://dev.to/ryanrez/-cooking-a-deliveroo-clone-with-nextjs-react-graphql-strapi-and-stripe----dishes-list-part-37-5eh/) (part 3) **-current**
- 🔐 [Authentication](https://dev.to/ryanrez/-cooking-a-deliveroo-clone-with-nextjs-react-graphql-strapi-and-stripe----authentication-part-47-eho) (part 4)
- 🛒 [Shopping Cart](https://dev.to/ryanrez/-cooking-a-deliveroo-clone-with-nextjs-react-graphql-strapi-and-stripe----shopping-cart-part-57-2h1e) (part 5)
- 💵 [Order and Checkout](https://dev.to/ryanrez/-cooking-a-deliveroo-clone-with-nextjs-react-graphql-strapi-and-stripe----order-and-checkout-part-67-fph) (part 6)
- 🚀 [Bonus: Deploy](https://dev.to/ryanrez/-cooking-a-deliveroo-clone-with-nextjs-react-graphql-strapi-and-stripe----bonus-deploy---part-77-1i8e) (part 7) 

*Note: the **source code** is **available on GitHub**: https://github.com/strapi/strapi-examples/tree/master/nextjs-react-strapi-deliveroo-clone-tutorial*.

## 🍔 Dishes list

Congratulations, you successfully displayed the list of restaurants! This was the first major step.

### Define Content Type

Every restaurant sells dishes, which also must be stored in the database. So, we now need a new Content Type, obviously named `dish`. Since you already know how to create it, I am going to give only its attributes:

 - `name` with type `String`.
 - `description` with type `Text`.
 - `image` with type `Media`.
 - `price` with type `Number` (integer).
 - `restaurant` with type `Relation`: this one is a bit more specific. Our purpose here is to tell to Strapi that every dish can be related to a restaurant. To do so, create a one-to-many relation, as below.

![Strapi relation](https://thepracticaldev.s3.amazonaws.com/i/um51cjveo5xweophtze9.png)

Here is the final result:

![Dishes fields](https://thepracticaldev.s3.amazonaws.com/i/ozxel8tagpyq9xfjc0a0.png)

### Add some entries

Then, add some dishes from the Content Manager: http://localhost:1337/admin/plugins/content-manager/dish. Make sure they all have an image and are linked to a restaurant.

### Display dishes



![Dishes list](https://thepracticaldev.s3.amazonaws.com/i/u4hzy41jvhczwkmi5bte.gif)


We will use a new route for `/restaurants` that will take in the ID of restaurant and return the list of dishes for that restaurant:

```
cd ..
cd ..
cd pages
touch restaurants.js
```

Path: `/frontend/pages/restaurants.js`

 {% gist https://gist.github.com/ryanbelke/d32870974f49941a61c83904d053d94e.js %}

Now you should see your list of dishes associated with that restaurant if you navigate via the  browser.

**We will add the cart in the upcoming sections, hang tight!**


You will notice that if you navigate to the restaurant route and hit refresh, you will get a 404 page. This is because when you click the Link component the client is handling the routing, but on refresh the route is not found by the server.

![404](https://thepracticaldev.s3.amazonaws.com/i/axngddmx4qbetowge8it.png)

To handle this we can setup an express server coupled with Next to render the route properly.

```
yarn add express
```

Next create a file `server.js` inside the root of your project directory.

```
cd ..
touch server.js
```

Path: `/frontend/server.js`

 {% gist https://gist.github.com/ryanbelke/87f4f9d7fefe323fdbe19864c48aef86.js %}

To use the custom express server edit your `packages.json` file and replace the script section with:

```javascript
  "scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "NODE_ENV=production node server.js"
  }
```
**Restart the dev server,**
now with a refresh you should see the appropriate dishes as expected on a page refresh.

🔐 In the next section, you will learn how to **authenticate users in your app** (register, logout & login): https://dev.to/ryanrez/-cooking-a-deliveroo-clone-with-nextjs-react-graphql-strapi-and-stripe----authentication-part-47-eho