Creating a Reddit Clone Using React and GraphQL - 07
Tags: react, typescript, graphql, redditclone
Published: 2021-02-21 00:39:27

At this point, we manage to register a user. Now once a user successfully registers, the user needs to redirect to the home page. 

We start with adding `useRouter` from `next/router` . Then add the redirection to the home page.

```javascript

router.push("/")

```

> In the original video that I follow up to now, got an error here. But maybe because of an update of the `ORM` tool I didn’t get that. But at this point, it shows how to generate query manually. So let’s do it now.

First, we import the `EntityManager` from `@mikro-orm/postgresql` . Then we cast the `em` to `EntityManager` . The create the query and insert it. The complete query builder code something like this.

```javascript

const result = await (em as EntityManager).createQueryBuilder(User)
                  .getKnexQuery().insert({
                    username: options.username,
                    password: hashedPassword,
                    created_at: new Date(),
                    updated_at: new Date(),
                  }).returning("*");

```

I need to highlight a few things here that once we use the `getKnexQuery` , it allows us to use all query operations. Another point is in our `User` entity has the property `createdAt` and `mikroORM` will add the underscore because of the CamelCase. But here we need to add it manually. Also, we are returning all the field from `returning` method.

So, we are all good at `Register` form and next, we move to complete the `Login` page. First, we need to add `login.tsx` file and `login.graphql` file. We can copy the code from `register.tsx `file and paste in there and make some modifications. Also, copy the login mutation from `GraphQL Playground` and modify it to have variables.

Then run the `yarn gen` command. It will generate the relevant functions in `graphql.tsx` file.

Important points that I need to highlight that it needs to pass the object that contains `username` and `password`. Because once we hover over `login` method, it is expecting a `UsernamePasswordInput` object.

```javascript
...
const response = await login({ options: values });
...

```

Now, we have a perfectly working Login page. Our next goal adding a `NavBar` to project. We can create a component and add it in there. Let’s do it now.

```javascript

import { Box, Button, Flex, Link } from "@chakra-ui/react";
import React from "react";
import NextLink from "next/link";
import { useMeQuery } from "../generated/graphql";

interface NavBarProps {}

export const NavBar: React.FC<NavBarProps> = ({}) => {
  const [{ data, fetching }] = useMeQuery();

  let body = null;

  if (fetching) {
  } else if (!data?.me) {
    body = (
      <>
        <NextLink href="/login">
          <Link mr={2}>login</Link>
        </NextLink>
        <NextLink href="/register">
          <Link mr={2}>register</Link>
        </NextLink>
      </>
    );
  } else {
    // because one line no need ()
    body = (
      <Flex>
        <Box mr={2}>{data.me.username}</Box>
        <Button variant="link">logout</Button>
      </Flex>
    );
  }
  return (
    <Flex bg="tomato" p={4}>
      <Box ml={"auto"}>{body}</Box>
    </Flex>
  );
};

```

In here `<NextLink />` is `next.js` implementation that supports client-side routing. Now we need to show that login and register links according to user login status. Also, we show the Username if the user logged in. Make sure to add this component to the `Index` component.

```javascript
const Index = () => (
  <>
    <NavBar />
    <div>Hello world!!!</div>
  </>
);

```

We get the data from `me` query. First, add a `me` query and use `yarn gen` to generate the functions.

```javascript
// we need to give a name to query
query Me {
  me {
    id
    username
  }
}

```

Then fetch the data from `NavBar`.

```javascript
const [{ data, fetching }] = useMeQuery();
```

Recall with register check the difference here that we are using the first parameter that using data property and fetching status. Once we adding all the necessary things and try to logout by removing the cookie and again login and come to the main page. Maybe use will see your name will not update in there. It is because of the caching of `urql` . We will see what is the issue and fix that issue from my next blog post.

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). This is amazing tutorial and I highly recommend you to check that out.

Main image [credit](https://www.pexels.com/photo/snowy-mountain-peak-against-clear-sky-4555537/)