🍝 Cooking a Deliveroo clone with Next.js (React), GraphQL, Strapi and Stripe - 🏠 Restaurants list (part 2/7)
Tags: react, graphql, strapi, beginners
Published: 2019-02-04 02:44:56

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

![Strapi Next.js tutorial](https://thepracticaldev.s3.amazonaws.com/i/0294g6s34sm0586ozarz.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) **-current**
- 🍔 [Dishes](https://dev.to/ryanrez/-cooking-a-deliveroo-clone-with-nextjs-react-graphql-strapi-and-stripe----dishes-list-part-37-5eh/) (part 3)
- 🔐 [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*.

## 🏠 Restaurants list

First of all, we need to display the list of restaurants in our web app. Of course, this list is going to be managed through our API. So, we are going to start configuring it.

### Define Content Type

A Content Type, also called a `model`, is a type of data. A Strapi API includes, by default, the `user` Content Type. Right now, we need restaurants, so our new Content Type is going to be, as you already guessed, `restaurant` (Content Types are always singular).

Here are the required steps:

 - Navigate to the Content Type Builder (http://localhost:1337/admin/plugins/content-type-builder).
 - Click on `Add Content Type`.
 - Set `restaurant` as name.
 - Click on `Add New Field` and create the followings fields:
   - `name` with type String.
   - `description` with type Text with Rich Text Editor (in the Advanced Settings section of the modal, select `Display as a WYSIWYG`).
   - `image` with type `Media`.
 - Click on Save.

![Content Type Builder](https://thepracticaldev.s3.amazonaws.com/i/3fpbccr35t7l79ow2jm5.gif)

At this point, your server should have automatically restarted and a new link `Restaurant` appears in the left menu.

### Add some entries

Well done! You created your first Content Type. The next step is to add some restaurants in your database. To do so, click on "Restaurant" in the left menu (http://localhost:1337/admin/plugins/content-manager/restaurant). 

You are now in the Content Manager plugin: an auto-generated user interface which let you see and edit entries.

Let's create a restaurant:

 - Click on `Add New Restaurant`.
 - Give it a name, a description and drop an image.
 - Save it.

Create as many restaurants as you would like to see in your apps.

![Content Manager](https://thepracticaldev.s3.amazonaws.com/i/1q8r1wo25xhgc5h9z7xx.gif)

### Allow access

Having the items in database is great. Being able to request them from an API is even better. As you already know, Strapi's mission is to create API (I have got a super secret anecdote for you: its name is coming from Boot**strap** your **API** 😮).

When you were creating your `restaurant` Content Type, Strapi created, behind the scene, a few set of files located in `api/restaurant`. These files include the logic to expose a fully customisable CRUD API. The `find` route is available at http://localhost:1337/restaurants. Try to visit this URL and you will be surprised to be blocked by a 403 forbidden error. This is actually totally normal: Strapi APIs are secured by design.

Don't worry, making this route accessible is actually super intuitive:

 - Navigate to the `Roles & Permissions` section of the admin plugin (http://localhost:1337/admin/plugins/users-permissions).
 - Click on the `Public` role.
 - Tick the `find` and `findone` checkboxes of the `Restaurant` section.
 - Save.

*Important*: do the same thing for the `authenticated` role.

Now go back to http://localhost:1337/restaurants: at this point, you should be able to see your list of restaurants.

![Users Permissions](https://thepracticaldev.s3.amazonaws.com/i/khqfzezl5gxqk8op1qf0.gif)

### Enabling GraphQL

By default, API generated with Strapi are best on REST conventions. What if I would tell you that you could transform them into GraphQL within 10 seconds?

Well, let me prove you that.

A GraphQL plugin, which will make all the work for you, is available for Strapi. Install it with the Strapi CLI:

**navigate to your backend folder where strapi is installed and install graphql using the strapi install command:**

```
cd backend
strapi install graphql
```

Or click "Marketplace" on your admin dashboard and select GraphQL

And that's it, you are done installing GraphQL.

**Make sure to restart your strapi server if it does not auto restart**

#Important: 
####Downgrage graphql-js dependency

With the current implementation you will receive a GraphQL error when trying to query a MongoDB _id field:

This is currently being fixed by the graphql-js maintainers but as of time of writing has not been fixed (github issue linked below).

**message: "ID cannot represent value: { _bsontype: "ObjectID", id: <Buffer 5b c1 5b 8b a1 a2 92 54 65 51 88 23> }"**

![picture](https://thepracticaldev.s3.amazonaws.com/i/ty52s68zx1t3tvuhcdv5.png)

This is caused by a breaking change in the graphql-js update on how the ID's from a MongoDB are serialized: https://github.com/graphql/graphql-js/issues/1518.

Based on the comments it looks like the maintainers are working on a fix but as of the time of writing (10/12/2018) the fix is to downgrade your graphql package to: GraphQL 0.13.2.

The dependency package is in the **/backend** folder under the GraphQL plugin folder listed at: `/backend/plugins/graphql/`.

```
cd plugins/graphql
npm install graphql@0.13.2 --save
```

Inside of your packages.json file your graphql dependency should be listed as `"graphql": "0.13.2"`

**Until the issue is fixed if you upgrade your packages inside the server you will break the implementation.**


-----------------
![GraphQL installation](https://thepracticaldev.s3.amazonaws.com/i/0363m11lbi58h2kzsdsf.png)

Restart your server, go to http://localhost:1337/graphql and try this query:

```javascript
{
  restaurants {
    _id
    name
  }
}
```

![Strapi GraphQL](https://thepracticaldev.s3.amazonaws.com/i/wu5i7udgq5zhad13e356.gif)
------------------

### Display restaurants

It looks you are going to the right direction. What if we would display these restaurants in our Next app?

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

Install Apollo in the **frontend of our application**, navigate to the `/frontend` folder:

```
cd ..
cd ..
cd ..
cd frontend
yarn add react-apollo next-apollo graphql gql recompose

```
To connect our application with GraphQL we will use Apollo and the next-apollo implementation to wrap our components in a withData HOC to give them access to make apollo data queries.

There are a couple differnt approaches to implementing GraphQL into a Nextjs app, the approach we will take is extracting the Apollo logic into lib file and wrapping our components with a Higher Order Component called withData to handle the GQL queries inside each respective components.

Example repo detailing the Apollo Next.js implementation:
https://github.com/adamsoffer/next-apollo-example.

Create a lib directory in the root of the project:
```
mkdir lib
cd lib
touch apollo.js
```
------------------------

Path: `/frontend/lib/apollo.js`

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

We will generate the list of Restaurants inside a RestaurantList file as:

```
cd ..
cd components

mkdir RestaurantList
cd RestaurantList
touch index.js
```

Path: `/frontend/components/RestaurantList/index.js`

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

Now update your `/pages/index.js` home route to display the Restaurant list:

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

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

We will need to update our `_app.js` file to wrap our application with the Apollo Provider that will enable GraphQL to make queries:

Path: `/frontend/pages/_app.js`
 {% gist https://gist.github.com/ryanbelke/da63a9efedd0290ec21b2085d67384fc.js %}


**Now you should see the list of restaurants on the page.**

Well done!

🍔 In the next section, you will learn how to display the **list of dishes**: https://dev.to/ryanrez/-cooking-a-deliveroo-clone-with-nextjs-react-graphql-strapi-and-stripe----dishes-list-part-37-5eh/