Creating a Reddit Clone Using React and GraphQL - 03
Tags: react, typescript, redditclone
Published: 2021-02-06 03:22:23

The codebase for this article that can find in here.

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

We created `Post` entity. Now we are going to create `User` entity.

> Note:
>
> If we remove `@Field()` from the entity it will not alow to select that property.

Now, because we are going to create a lot of migration, we are going to add migration command to `package.json `file.

```javascript
"create:migration": "mikro-orm migration:create",
```

running `yarn create:migration` , create that migration.

But, if you check that migration file, there is no `up()` method. Because we didn’t add `User` entity to `mikro-orm.config` file. After adding re-run the command.

```javascript
...
// adding User entity in src/mikro-orm.config file.
entities: [Post, User],
...

```

In our `main` function we added below code line. Every time the server restart will run the migration.

```javascript
...
await orm.getMigrator().up();
...

```

When this is running it will check the migration detail table in the database and it will execute the pending migration scripts.

Now we are going to create `Resolver` for the user. Make sure that add resolver to the schema.

```javascript
// src/index.ts
...
resolvers: [HelloResolver, PostResolver, UserResolver],
...

```

For the user, the register method will take 2 arguments that `username` and `password`. We can create a class and use it as a view model. Decorate it with `@InputType` annotation.

We are not storing the password in plain text. We hash out the password. To do that we are using Argon 2. Use below `yarn` command to add it.

```javascript
yarn add argon2

```

> Pro tip from Ben: \
> Once you're in a repository if you see the file with `[filename].d.ts` you know that it already has the type support. You are good to go.

Okay, we added the code for register user and all set to test it. Here is the GraphQL query to create it. In there you need to pass an object. Please see the structure of the query. `register` method will take options object as argument.

```javascript
mutation {
  register(options: {username: "rasikag",password: "rasikag"}) {
    id
    createdAt
    updatedAt
    username
  }
}

```

One point wants to highlight in here that if you open the docs on register you will see that you will not be getting the password. Because we remove it from a field.

Another point that I want to highlight that we didn’t mention `@Arg() `type for `options` . We make it happen implicitly.

```javascript
@Arg("options") options: UsernamePasswordInput
```

If the above code not worked, we have explicitly told the type.

```javascript

@Arg("options", () => UsernamePasswordInput) options: UsernamePasswordInput,

```

Now we are adding the login function. In here we use `@ObjectType` annotation. The `@ObjectType` can use as a return type from mutations.

Now we are defining field error in here. To do that we create another `@ObjectType` as `FieldError`.

Okay, now we have the user login. Let’s try this out.

```javascript
mutation {
  login(options: {username: "rasikag", passward: "rasikag"}){
    errors {
      field
      message
    }
    user {
      id
    username
    }
}
```

Because we use that `UserResponse` object, let’s change the register method according to it. Here is the relevant `GhraphQL` query for it.

```javascript
mutation {
  register(options: {username: "rasikag", passward: "rasikag"}){
    errors {
      field
      message
    }
    user {
      id
      username
    }
  }
}

```

If we remove the error handle from below code block and try it out. There is an interesting point need to highlight.

```javascript
// UserResolver
try {
  await em.persistAndFlush(user);
} catch (err) {
  // comment out the code in here
}

return { user };
```

We will get an error from GraphQL console that telling,

```javascript

connot return null for non-nullable field User.id

```

What will happen there, is it is trying to insert a user and it fails. Then in the last line in will return a user that `null` but `user id` is not a nullable field. So the error regarding that.

I will wrap-up this note from here. Soon I will publish the 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.
References:

This article series based on the [Ben Award - Fullstack React GraphQL TypeScript Tutorial](https://www.youtube.com/watch?v=I6ypD7qv3Z8).

Main image [credit](https://www.pexels.com/photo/man-standing-on-cliff-watching-punch-bowl-waterfalls-1402850/)