Creating a Reddit Clone Using React and GraphQL - 05
Tags: react, typescript, graphql, redditclone
Published: 2021-02-11 11:07:29

In the previous post, we set the cookie in the browser. We send the response with `Set-Cookie` header and browser(client) set the cookie. When we are sending any request to the server, the browser will attach the cookie to request. So, now we are going to prove it. Let’s create a `me` query in `UserResolver`.

After adding it we can test in GraphQL playground. Here is the `me` query.

```javascript
query{
  me{
    id
  }
}
```

If you are logged in you can check that in developed tool’s Application section you will see `qid` and this query will return `userId`.

Now we successfully set the cookie. Let’s see what is the anatomy in here.

Once we execute below code line, whatever the data that we set on session will set on the `Redis`.

```javascript
req.session.userId = user.id;
```

So, Redis will store data something like this `{userId: 3}`. Redis store this as key-value pairs.

```javascript
sess: asdasdaioodasdjmdsjkf -> {userId: 3}
```

Then this key’s encrypt and send back to the client from `Set-Cookie` header. This will do by `express-session` middleware. Whenever we make a request this cookie attached to the request and send to the server. Then express-session will decrypt this by using the secret that we specify in the session config object. The using that key, session will retrieve the data from Redis. I hope this explanation helps to understand the whole picture.

At this point, we have come a long way with adding the back-end to this app. So, now we are moving to build a front-end application for the Reddit Clone app.

We are using `Next.js` to create the front-end app. Specifically with `chakra-ui`. Please use the below command to create the front-end application.

```javascript
yarn create next-app --example with-chakra-ui reddit-web-app
```

You can give any name for `reddit-web-app` because this is the folder that I going to put this codebase.

> **VS Code Tips:** You can open this project in the same VS Code by adding folder to workspace option in `File` tab.

We don’t want this template code. So we remove it and change the extension of `index.js` and `_app.js` files `.tsx`

Then we need to install `@type` packages by using the below command.

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

But we can keep the `_app.tsx `file content. Now we can hit the `yarn dev` check that you can run the application.

Now we are creating the Register page. To do that I will add the file to `page` folder. Then we are adding the register form.

To do that first add `formik`

```javascript
yarn add formik
```

Generally, we can add below and make a specific User Register page.

```javascript
export const Register: React.FC<registerProps> = ({}) => {
  return (
    <Wrapper variant="small">
      <Formik
        onSubmit={(value) => {
          console.log(value);
        }}
        initialValues={{ username: "", password: "" }}
      >
        {(values) => (
          <Form>
            <FormControl>
              <FormLabel htmlFor="username">Username:</FormLabel>
              <Input
                value={values.username}
                id="username"
                placeholder="username"
              />
            </FormControl>
          </Form>
        )}
      </Formik>
    </Wrapper>
  );
};
```

But, we can use this input field as a generic input filed and reuse it. Let’s do that next. We are creating `InputField` component. Inside it, we are using `useFiled` hook. This is coming from `fomik` . We define the type for `InputFieldProps` as `InputHTMLAttributes<HTMLInputElement>` but once you pass the props to `useField` it will tell that name is missing. The reason is in `InputHTMLAttributes` name is optional and `useField` ‘s name is required field. To make it required, we can add an object as below code.

```javascript
type InputFieldProps = InputHTMLAttributes<HTMLInputElement> & { name: string };
```

After adding props, we will have `InputField` like this…

```javascript
export const InputField: React.FC<InputFieldProps> = ({
  label,
  size: _,
  ...props
}) => {
  const [field, { error }] = useField(props);
  return (
    <FormControl isInvalid={!!error}>
      <FormLabel htmlFor={field.name}>{label}</FormLabel>
      <Input
        {...props}
        {...field}
        id={field.name}
        placeholder={props.placeholder}
      />
      {error ? <FormErrorMessage>{error}</FormErrorMessage> : null}
    </FormControl>
  );
};
```

Then we can replace the username filed with InputField in `register.tsx` page. With this, we can any number of fields with passing the props to it.

With this, we can complete the `register` page. In the next post, we are going to make `graphql` requests to our web server.

The codebase for this article that can find in here.

[**rasikag/reddit-clone-webapp**](https://github.com/rasikag/reddit-clone-web)

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/car-on-road-2770933//)