Creating a Reddit Clone Using React and GraphQL - 01

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

Ben Awad Youtube Channel

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 -ystand 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)

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.

...
"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.

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

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.

...
"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

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.

...
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.

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.

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.

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.

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

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