Creating a Reddit Clone Using React and GraphQL - 01
Tags: react, typescript, redditclone
Published: 2021-01-30 10:09:02

I thought that I need to learn `React`. To do that I chose Ben Awad’s Fullstack React GraphQL TypeScript Tutorial. This is a super long tutorial that he made. It is almost 14 hours long.

A HUGE shout-out for creating this tutorial. Here are this Twitter and Youtube links. I highly encourage you to go and check it out.

[**Ben Awad Twitter Profile**](https://twitter.com/benawad)

[**Ben Awad Youtube Channel**](https://www.youtube.com/channel/UC-8QAzbLcRglXeN_MY9blyw)

I am adding my notes in here. I think it will also help you and hope you feel this is meaningful somehow. I added where I stuck and solutions for those. Okay, let’s start.

First, initiate a package.json file using `npm init -y` . This `-y`stand for yes for all default configurations. 

Then we are building this application using TypeScript. Add those packages as dev dependencies. (We are using yarn as a package manager)

```javascript
yarn add -D @types/node typescript
```

Because we are using typescript we need to transpile into JavaScript. Lets and `watch` command to `project.json` file. It will watch the changes and transpile it into JavaScript. 

Also, we are adding `nodemon` in the development environment.

```javascript
...
"scripts": {
"watch": "tsc -w",
"start": "node dist/index.js",
"dev": "nodemon dist/index.js"
}
...

```

`package.json` the file structure is like above.

Run `yarn dev` to start the application. Once in every change, this will automatically run the application. 

Add Prastgresql related packages.

```javascript

yarn add @mikro-orm/cli @mikro-orm/core @mikro-orm/migrations @mikro-orm/postgresql pg

```

If you don’t have Postgresql, you can install into your local machine.

> **VS Code tip**: if you create a file like this `entities/Post.js` it will automatically create a folder.

Go to Mikro ORM documentation and grab a class base entity. 

Here is the like for it.

[**Defining Entities | MikroORM**](https://mikro-orm.io/docs/defining-entities#classes-and-decorators)

We can use `catch` function after calling `main()` because it returns a `Promise` object.

To create tables from `mikro orm` add this config to `package.json` file. Then create this file under `src` folder.

```javascript
...
"mikro-orm": {
"useTsNode": true,
"configPaths": [
"./src/mikro-orm.config.ts",
"./dist/mikro-orm.config.js"
]
}
...

```

Another point that needs to add in here.

if you export something as like this

```javascript

export default {
entities: [Post],
dbName: "rasikareddit",
type: "postgresql",
debug: !__prod__,
}
...
// import statement 
import microOrmConfig from './file-location.ts'

```

Now, TypeScript is unhappy. Because `microOrmConfig.dbName` is a `string`. 

We can overturn it by as below. See, there is `as const` end of the code lines.

```javascript
...
export default {
entities: [Post],
dbName: "rasikareddit",
type: "postgresql",
debug: !__prod__,
} as const;
...
```But, even TypeScript gives you an error. Also, in the above example, we can’t use autocompletion suggestions.

```javascript

export default {
entities: [Post],
dbName: "rasikareddit",
type: "postgresql",
debug: !__prod__,
} as Parameters<typeof MikroORM.init>[0];
// import all mising imports

```
Then add the data types in the Post Modal. Next, run the migrate command.

```javascript

npx mikro-orm migration:create

```

If you got below error, most probably it can be fixed by adding the password to `mikro-orm.config.ts` file.

```javascript

throw new ERR_INVALID_ARG_TYPE(
^


TypeError [ERR_INVALID_ARG_TYPE]: The "key" argument must be of type string or an instance of Buffer, TypedArray, DataView, or KeyObject. Received null
```

Check this link about the above error.

[db:setup TypeError [ERR_INVALID_ARG_TYPE]: The "key" argument must be of type string or an instance…*I am doing the getting started, I have all the requirements](https://github.com/Bearer/Pizzly/issues/180)

Right now you will have a working project with database connected. I will wrap up this post from here. Let’s meet from 2nd post from this series.

Up to here, you can find my code from here.

[**rasikag/reddit-clone**](https://github.com/rasikag/reddit-clone/tree/setup_database)

I will wrap-up this note from here. Soon I will publish next part of this note.

If you have anything to ask regarding this please leave a comment here. Also, I wrote this according to my understanding. So if any point is wrong, don’t hesitate to correct me. I really appreciate you.

That’s for today friends. See you soon. Thank you

Main image [credit](https://www.pexels.com/photo/forest-during-day-2440061/)