DEV Community: Rasika Gayan Gunarathna

Creating a Reddit Clone Using React and GraphQL - 19

Rasika Gayan Gunarathna — Sat, 29 May 2021 10:51:22 +0000

This blog post originally posted on my blog site and you can find it here.

From last post, we stopped with a bug that introduce to the system. If we check the console in API we can see there is an error.

error: bind message supplies 2 parameters, but prepared statement "" requires 1

The thing is, in the post resolver, we are providing 2 parameters in the replacement array. But in the query, we only have $1. Because if the user just scroll the home page without login to the system, there will not be an UserId . So we need to change the parameters dynamically according to the query.

So first change the replacement array.

const replacement: any[] = [realLimitPlusOne];

Then set the cursor index dynamically.

if (req.session.userId) {
  replacement.push(req.session.userId);
}
let cursorIdx = 3;
if (cursor) {
  replacement.push(new Date(parseInt(cursor)));
  cursorIdx = replacement.length;
}

Then we can change the query like this.

SELECT p.*,
json_build_object(
'id', u.id,
'username', u.username,
'email', u.email
) creator,
${
req.session.userId
? '(select value from upvote where "userId" = $2 and "postId" = p.id) "voteStatus"'
: 'null as "voteStatus"'
}
FROM post p
INNER JOIN public.user u on u.id = p."creatorId"
// changeing the cursorIdx dynamically
${cursor ? ` WHERE  p."createdAt" < $${cursorIdx}` : ""}
ORDER BY p."createdAt" DESC
LIMIT $1

Now we are going to address on next issue in this application. Once you log in and refresh the page, you will not see any upvotes or downvotes that you did.

The reason for it, Once the browser sending a direct request to graphql server, it will attach the cookie. But when we are doing server-side rendering browser first send a request to node.jsback-end then it will send to graphql. While this transition the cookie is dropping from that request.

So, let’s set the cookie in createUrqlClient .

export const createUrqlClient = (ssrExchange: any, ctx: any) => {

// add context as parameter above
// then set the cookie value
let cookie = "";
if (isServer()) {
cookie = ctx?.req?.headers?.cookie;
}
// then set headers in fetchOptions
fetchOptions: {
credentials: "include" as const,
headers: cookie ? { cookie } : undefined,
},

Now we want to show the full post. First, we are going to add the back-end code for return a single post by its id with the creator’s details.

@Query(() => Post, { nullable: true })
post(@Arg("id", () => Int) id: number): Promise<Post | undefined> {
// this should be match with post entity relation's property name
return Post.findOne(id, { relations: ["creator"] });
}

Then we are adding graphql query in front-end.

query Post($id: Int!) {
post(id: $id) {
id
createdAt
updatedAt
title
text
points
voteStatus
creator {
id
username
}
}
}

Now use yarn-gen command to generate the TypeScript mapping methods. After that, we can change the index.tsx page to convert the title to a link.

<NextLink href="/post/[id]" as={`/post/${p.id}`}>
  <Link>
    <Heading fontSize="xl">{p.title}</Heading>
  </Link>
</NextLink>

This will navigate to post page. Now we need to add the Post page. So we create a new folder called pages and add a file [id].tsx page. If you check that above navigation code to post’s details page we are setting the post’s id as url parameter. Because of that, we need to set the page’s name according to that.

We are using 2 utilities here. We can abstract functionality to get the post id from query as below.

export const useGetIntId = () => {
  const router = useRouter();
  const intId =
    typeof router.query.id === "string" ? parseInt(router.query.id) : -1;
  return intId;
};

When the post page loading we need to call for the graphql API to get the full post. To do the we can use below utility.

export const useGetPostFromUrl = () => {
  const intId = useGetIntId();
  return usePostQuery({
    pause: intId === -1,
    variables: {
      id: intId,
    },
  });
};

Now all set for the post page. Let’s add it.

const Post = ({}) => {
  const [{ data, error, fetching }] = useGetPostFromUrl();

  if (fetching) {
    return (
      <Layout>
        <div>loading...</div>
      </Layout>
    );
  }
  if (error) {
    return <div>{error.message}</div>;
  }
  if (!data?.post) {
    return (
      <Layout>
        <Box>could not find post</Box>
      </Layout>
    );
  }
  return (
    <Layout>
      <Heading mb={4}>{data.post.title}</Heading>
      {data.post.text}
    </Layout>
  );
};
export default withUrqlClient(createUrqlClient, { ssr: true })(Post);

Also for the clean structure of the application, we can move the main application link and create post link to navigation bar.

// in NavBar.tsx
body = (
<Flex align="center">
<NextLink href="/create-post">
<Button as={Link} mr={4}>
create post
</Button>
</NextLink>
<Box mr={2}>{data.me.username}</Box>
// ... remaining code goes here
// in return()
return (
<Flex zIndex={1} position="sticky" top={0} bg="tomato" p={4} align="center">
<Flex flex={1} m="auto" align="center" maxW={800}>
<NextLink href="/">
<Link>
<Heading>Reddit Clone</Heading>
</Link>
</NextLink>
<Box ml={"auto"}>{body}</Box>
</Flex>
</Flex>
);

Now we can add delete post functionality. First, we change the functionality that only the post’s owner can delete the post.

@Mutation(() => Boolean)
async deletePost(
@Arg("id", () => Int) id: number,
@Ctx() { req }: RedditDbContext
): Promise<boolean> {
// const post = await Post.findOne(id);
// if (!post) {
//   return false
// }
// if (post.creatorId !== req.session.userId) {
//   throw new Error("not authorize")
// }
// await Upvote.delete({postId: id});
await Post.delete({ id, creatorId: req.session.userId });
return true;
}
}

Also, change the Upvote.ts file to set the cascade delete of upvotes.

// in the Upvote.ts file, add onDelete property
@ManyToOne(() => Post, (post) => post.upvotes, {
onDelete: "CASCADE",
})
post: Post;

In the front-end app let’s add graphql mutation to delete post.

mutation DeletePost($id: Int!) {
deletePost(id: $id)
}

Then we can add the button to delete a post and delete logic into index.tsx file.

const [, deletePost] = useDeletePostMutation();
// below text snippet section
// the full code will be at Github link at the end.
// please check that for more clarity
<IconButton
  icon={<DeleteIcon />}
  aria-label="Delete Post"
  onClick={() => {
    deletePost({ id: p.id });
  }}
/>;

Once we delete a post we need to update the cache. So we are adding this mutation to createUrqlClient .

deletePost: (_result, args, cache, info) => {
cache.invalidate({
__typename: "Post",
id: (args as DeletePostMutationVariables).id,
});
},

Now we are moving to create edit post functionality.

First, we are going to change the back-end code. Here is the updatePost method.

@Mutation(() => Post)
async updatePost(
  @Arg("id", () => Int) id: number,
  @Arg("title", () => String, { nullable: true }) title: string,
  @Arg("text") text: string,
  @Ctx() { req }: RedditDbContext
): Promise<Post | null> {
  const result = await getConnection()
  .createQueryBuilder()
  .update(Post)
  .set({ title, text })
  .where('id = :id and "creatorId" = :creatorId', {
  id,
  creatorId: req.session.userId,
  })
  .returning("*")
  .execute();
  return result.raw[0];
}

Now, in the front-end, we need to have UpdatePost mutation.

mutation UpdatePost($id: Int!, $title: String!, $text: String!) {
  updatePost(id: $id, title: $title, text: $text) {
    id
    title
    text
    textSnippet
  }
}

Then in the index.tsx file we add the link to navigate to edit post page.

<NextLink href="/post/edit/[id]" as={`/post/edit/${p.id}`}>
  <IconButton mr={4} icon={<EditIcon />} aria-label="Edit Post" />
</NextLink>

Now we create a new folder inside the post folder. Then we create [id].tsx file. We can get the post id from url parameter and get the post to edit.

const EditPost = ({}) => {
  const router = useRouter();
  const intId = useGetIntId();
  const [{ data, fetching }] = usePostQuery({
    pause: intId === -1,
    variables: {
      id: intId,
    },
  });
  const [, updatePost] = useUpdatePostMutation();
  if (fetching) {
    return (
      <Layout>
        <div>loading...</div>
      </Layout>
    );
  }

  if (!data?.post) {
    return (
      <Layout>
        <Box>could not find post</Box>
      </Layout>
    );
  }
  return (
    <Layout variant="small">
      <Formik
        initialValues={{ title: data.post.title, text: data.post.text }}
        onSubmit={async (values) => {
          await updatePost({ id: intId, ...values });
          router.push("/");
        }}
      >
        {({ isSubmitting }) => (
          <Form>
            <InputField name="title" placeholder="title" label="Title" />
            <Box mt={4}>
              <InputField
                textarea
                name="text"
                placeholder="text..."
                label="Body"
              />
            </Box>
            <Button
              isLoading={isSubmitting}
              mt={4}
              type="submit"
              colorScheme="teal"
            >
              Update post
            </Button>
          </Form>
        )}
      </Formik>
    </Layout>
  );
};

export default withUrqlClient(createUrqlClient)(EditPost);

Finally, for this post, we only want to add edit and delete buttons for post list, if post owned by log in user. Let’s add that validation to index.tsx file.

// get the current log in user.
const [{ data: meData }] = useMeQuery();
{meData?.me?.id !== p.creator.id ? null : (
// wrap 2 buttons in here.
)
}

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

Main image credit

GitHub Links:

Web App
Web Server

Creating a Reddit Clone Using React and GraphQL - 18

Rasika Gayan Gunarathna — Mon, 03 May 2021 17:12:22 +0000

This blog post originally posted on my blog site and you can find it here.

From the last post, we added the back-end code. So now we need to add front-end code. Let’s add a separate component to UpvoteSection.tsx . In this component, we want to show up and down arrow buttons and current points that the post has. Also want to show that the status of our response here from different colours. If we upvoted it need to show green colour and downvoted need to show in the red colour.

Before adding that change, we are changing both vote and post methods to match with this. In thevote method we first check that we are upvoting or downvoting multiple times. If so nothing happens. If we are changing the vote we are updating the values accordingly. Replace the code in the vote from the below code form checking on userId .

const { userId } = req.session;

const upvote = await Upvote.findOne({ where: { postId, userId } });

if (upvote && upvote.value !== realValue) {
  await getConnection().transaction(async (tm) => {
    await tm.query(
      ` update upvote
set value = $1
where "postId" = $2 and "userId" = $3`,
      [realValue, postId, userId]
    );

    await tm.query(
      ` update post
set points = points + $1
where id = $2`,
      [2 * realValue, postId]
    );
  });
} else if (!upvote) {
  // has never voted before
  await getConnection().transaction(async (tm) => {
    await tm.query(
      ` insert into upvote ("userId", "postId", value)
values ($1, $2, $3)`,
      [userId, postId, realValue]
    );

    await tm.query(
      ` update post
set points = points + $1
where id = $2`,
      [realValue, postId]
    );
  });
}

Then add the new field to Post entity. This is not a column. This will only use for keep the voteStatus for each post for current logged user.

@Field(() => Int, { nullable: true })
voteStatus: number | null;

Also, need to change the posts query to get the data with voteStatus of the current user. To do that, replace the code with the below code.


// In the posts method add context as parameter
@Ctx() { req }: RedditDbContext
// add the values to replacement array by conditionaly
if (req.session.userId) {
  replacement.push(req.session.userId);
}
let cursorIdx = 3;
if (cursor) {
  replacement.push(new Date(parseInt(cursor)));

  cursorIdx = replacement.length;
}
// change the query to below query
SELECT p.*,
json_build_object(
'id', u.id,
'username', u.username,
'email', u.email
) creator,
${
req.session.userId
? '(SELECT value FROM upvote WHERE "userId" = $2 AND "postId" = p.id) "voteStatus"'
: 'null AS "voteStatus"'
}
FROM post p
INNER JOIN public.user u ON u.id = p."creatorId"
${cursor ? ` WHERE  p."createdAt" < $${cursorIdx}` : ""}
ORDER BY p."createdAt" DESC
LIMIT $1

We can get post related data to this component. Because in future there can need some other details from the post that we need to show in here or some other data to make desitions.

So we are moving post related data to a new fragment.

fragment PostSnippet on Post {
  id
  createdAt
  updatedAt
  title
  textSnippet
  points
  voteStatus
  creator {
    id
    username
  }
}

To match with this change, make a change to Posts query in the front-end.

query Posts($limit: Int!, $cursor: String) {
  posts(cursor: $cursor, limit: $limit) {
    hasMore
    posts{
      ...PostSnippet
    }
  }
}

Now is time to add the UpvoteSection . Here is the code for related that section.

interface UpvoteSectionProps {
  post: PostSnippetFragment;
}

export const UpvoteSection: React.FC<UpvoteSectionProps> = ({ post }) => {
  const [loadingState, setLoadingState] =
    (useState < "upvote-loading") |
    "downvote-loading" |
    ("not-loading" > "not-loading");
  const [, vote] = useVoteMutation();
  return (
    <Flex direction="column" justifyContent="center" alignItems="center" mr={4}>
      <IconButton
        onClick={async () => {
          setLoadingState("upvote-loading");
          await vote({
            postId: post.id,
            value: 1,
          });
          setLoadingState("not-loading");
        }}
        isLoading={loadingState === "upvote-loading"}
        aria-label="upvote post"
        colorScheme={post.voteStatus === 1 ? "green" : undefined}
        icon={<ChevronUpIcon />}
      />
      {post.points}
      <IconButton
        onClick={async () => {
          setLoadingState("downvote-loading");
          await vote({
            postId: post.id,
            value: -1,
          });
          setLoadingState("not-loading");
        }}
        isLoading={loadingState === "downvote-loading"}
        colorScheme={post.voteStatus === -1 ? "red" : undefined}
        aria-label="downvote post"
        icon={<ChevronDownIcon />}
      />
    </Flex>
  );
};

We can add this component to index.tsx file.

<Flex key={p.id} p={5} shadow="md" borderWidth="1px">
  <UpvoteSection post={p} />
  <Box>
    // add this before post title.
    <Heading fontSize="xl">{p.title}</Heading>
    <Text>posted by {p.creator.username}</Text>
    <Text mt={4}>{p.textSnippet}</Text>
  </Box>
</Flex>

Now the most important part. Once we are voted we are updating the current vote count. To do that we are using readFragment and writeFragment . What happened here, once we voted, we will request the new data from the graphql server by, passing postId . Once we receive the new values we are updating them. The main benefit is we are not requesting a full data set, but part of it. Here is the relevant vote mutation in createUrqlClient method. Also to do these we need to add grapgql-tag.


import gql from "graphql-tag";

vote: (_result, args, cache, info) => {
  const { postId, value } = args as VoteMutationVariables;
  const data = cache.readFragment(
    gql`
    fragment _ on Post {
      id
      points
      voteStatus
    }
    `,
    {
      id: postId,
    } as any
  );

  if (data) {

    if (data.voteStatus === value) {
      return;
    }
    const newPoints =
    (data.points as number) + (!data.voteStatus ? 1 : 2) * value;
    cache.writeFragment(
      gql`
      fragment __ on Post {
      points
      voteStatus
      }
      `,
      { id: postId, points: newPoints, voteStatus: value } as any
    );
  }
},

References:

This article series based on the Ben Award - Fullstack React GraphQL TypeScript Tutorial. This is amazing tutorial and I highly recommend you to check that out.

Main image credit

Creating a Reddit Clone Using React and GraphQL - 17

Rasika Gayan Gunarathna — Sat, 17 Apr 2021 17:09:50 +0000

This blog post originally posted on my blog site and you can find it here.

From the last post, we are able to get posts successfully. It is better to show who wrote this post in the UI. So, let's change the post resolver. To do that we need to write a join query with Post and User entities.

Add the below code to posts resolver method to get the user data.

// query parameters array
const replacement: any[] = [realLimitPlusOne];
if (cursor) {
  replacement.push(new Date(parseInt(cursor)));
}
// create a join query
const posts = await getConnection().query(
  // make attention on json_build_object method
  // this will form this result as expected return type
  `
    SELECT p.*,
    json_build_object(
    'id', u.id,
    'username', u.username,
    'email', u.email
    ) creator
    FROM post p
    INNER JOIN public.user u on u.id = p."creatorId"
    ${cursor ? ` WHERE  p."createdAt" < $2` : ""}
    ORDER BY p."createdAt" DESC
    LIMIT $1
  `,
  replacement
);

In the above code, any user can see any email address. So let's add a mask to the email field on user resolver. Only logged user can see own email address.


@Resolver(User) // add the resolver type
export class UserResolver {
// add the field resolver
@FieldResolver(() => String)
email(@Root() user: User, @Ctx() { req }: RedditDbContext) {
// only logged user can see his/her email address.
if (req.session.userId === user.id) {
  return user.email;
}
return "";
}

Now, we are going to add the Upvote and Downvote functionality. Here we need to have Many-to-Many relationship with User and Post entities.

User can upvote or downvote many posts.
Post can have many votes from many users.

First, we are adding the Upvote entity.

@ObjectType()
@Entity()
export class Upvote extends BaseEntity {
  @Column({ type: "int" })
  value: number;

  @PrimaryColumn()
  userId: number;

  @ManyToOne(() => User, (user) => user.upvotes)
  user: User;

  @PrimaryColumn()
  postId: number;

  @ManyToOne(() => Post, (post) => post.upvotes)
  post: Post;
}

Within this entity, you will that it has a relationship mappers to User and Post entities. So, now we need to add those mappers back to those entities.


// inside the Post entity add below code
@OneToMany(() => Upvote, (upvote) => upvote.post)
upvotes: Upvote[];
// inside the User entity add below code
@OneToMany(() => Upvote, (upvote) => upvote.user)
upvotes: Upvote[];

Now, most importantly we need to update the entities in index.tsfile.


const conn = await createConnection({
  // ... removed for clarity
  entities: [Post, User, Upvote],
  // ... here we added Upvote entity
} as any);

Now we need to add the mutation to post resolver. Here we need to add a SQL transaction for this functionality. Because in here we need to update 2 tables. One is and a new record for upvote table. After that, we need to update the new count of upvotes in post table.

Here is vote mutation code.

@Mutation(() => Boolean)
@UseMiddleware(isAuth)
async vote(
@Arg("postId", () => Int) postId: number,
@Arg("value", () => Int) value: number,
@Ctx() { req }: RedditDbContext
) {
  const isUpvote = value !== -1;
  const realValue = isUpvote ? 1 : -1;
  const { userId } = req.session;

  await Upvote.insert({
    userId,
    postId,
    value: realValue,
  });

  await getConnection().query(

    `
    START TRANSACTION;

    INSERT INTO upvote ("userId", "postId", value)

    VALUES (${userId}, ${postId}, ${realValue});

    UPDATE post p

    SET p.points = p.points + ${realValue}
    where p.id = ${postId};

    COMMIT;

    `
  );

  return true;

}

Now our backend code is complete for those two functionalities. Let’s change the front-end code.

First, we can change the posts graphql query to get the user name.


// change the Posts query by adding this code lines
// inside the posts
creator {
  id
  username
}

Now run yarn gencommand to generate the new changes for the graphql.tsx file.

Now add the below line to show the user name in the UI.

<Box key={p.id} p={5} shadow="md" borderWidth="1px">
  <Heading fontSize="xl">{p.title}</Heading>
  // we can show the user name by adding below line.
  <Text>posted by {p.creator.username}</Text>
  <Text mt={4}>{p.textSnippet} </Text>
</Box>

And the last for this post we are making some changes to invalidate the cache when the user adds a new post. It will make sure that user will see new posts when the user redirects to the home page.

Let’s add this mutation to createUrqlClient method in the web app.


Mutation: {
  // new mutation for create post
  createPost: (_result, args, cache, info) => {
    cache.invalidate("Query", "posts", {
    limit: 15,
  });
  },
// ... rest of the code

References:

This article series based on the Ben Award - Fullstack React GraphQL TypeScript Tutorial. This is amazing tutorial and I highly recommend you to check that out.

Main image credit

Creating a Reddit Clone Using React and GraphQL - 16

Rasika Gayan Gunarathna — Tue, 06 Apr 2021 17:07:44 +0000

This blog post originally posted on my blog site and you can find it here.

At this point, we have working pagination. But we need to add some improvement in there. We need to add functionality to show and hide the load more button when there are no more stories to load.

To do that let’s change the backend code first.

First I am adding a @ObjectType to get the Posts and the status of the remaining post as boolean.

@ObjectType()
class PaginatedPosts {
  @Field(() => [Post]) // typeorm type
  posts: Post[]; // typescript type
  @Field()
  hasMore: boolean;
}

The logic:

The count of posts that we request from the database will be always by adding one to the max post count that we define. If we get that number of the post means there are more post to come from next request. Here is the relevant code for it. Also, I added some comment in the below code to explain it.


@Query(() => PaginatedPosts) // change the return type
async posts(
@Arg("limit", () => Int) limit: number,
@Arg("cursor", () => String, { nullable: true }) cursor: string | null
): Promise<PaginatedPosts> { // change the return type
  // return await Post.find();
  // using query builder
  const realLimit = Math.min(50, limit);
  const realLimitPlusOne = realLimit + 1; // get max + 1 posts
  const qb = getConnection()
  .getRepository(Post)
  .createQueryBuilder("p")
  .orderBy('"createdAt"', "DESC")
  .take(realLimitPlusOne);

  if (cursor) {
    qb.where('"createdAt" < :cursor', {
      cursor: new Date(parseInt(cursor)),
    });
  }

  const posts = await qb.getMany();

  return {
    posts: posts.slice(0, realLimit), // slice the post array to return actual limit
    hasMore: posts.length === realLimitPlusOne, // set the boolean to indicate for there are more post or not
  };
}

Once we added the above code, we completed the back-end code for the application. Let’s move to the front-end app and start to add the code.

First’ change the graphql query to match with the new return type from the back end.


query Posts($limit: Int!, $cursor: String) {
  posts(cursor: $cursor, limit: $limit) {
    hasMore // new return type value
    posts{ // new return type posts
      id
      createdAt
      updatedAt
      title
      textSnippet
    }
  }
}

Now run generate command to generate the TypeScript types for this new mapping type.


yarn gen

Now we need to change cursorPagination resolver. Also, I added some comments in there for more explanation


const cursorPagination = (): Resolver => {
  // ... rest of the code
  // find the posts array from the cache 
  const isItInTheCache = cache.resolve(
    cache.resolve(entityKey, fieldKey) as string, find the keys
    "posts" 
  );
  // ...rest of the code 
  let hasMore = true; // add new variable to keep the hasMore
  fieldInfos.forEach((fi) => {
    const key = cache.resolve(entityKey, fi.fieldKey) as string;
    // console.log(data)
    const data = cache.resolve(key, "posts") as string[];
    const _hasMore = cache.resolve(key, "hasMore");
    if (!_hasMore) {
    hasMore = _hasMore as boolean;
  }
  results.push(...data);
  // console.log(data, hasMore);
  });
  // return results;
  // we need to shape our return object as below 
  // also we need to add the __typename property with the value as ObjectType name
  return {
    __typename: "PaginatedPosts", 
    posts: results,
    hasMore: true,
  };

}

You will have to face this error also.


Invalid key: The GraphQL query at the field at `Query.posts({"limit":10})` has a selection set, but no key could be generated for the data at this field.
You have to request `id` or `_id` fields for all selection sets or create a custom `keys` config for `PaginatedPosts`.
Entities without keys will be embedded directly on the parent entity. If this is intentional, create a `keys` config for `PaginatedPosts` that always returns null.
(Caused At: "Posts" query)

To avoid that we need to define the key property in cacheExchanger . Add the below code to createUrqlClient .


cacheExchange({
  keys: {
    PaginatedPosts: () => null,
  },

Now only remaining to change the “load more” button logic to show and hide it.


{ data && data.posts.hasMore ? ( // because data's shape ObjectType shape
  <Flex>
  <Button
  onClick={() => {

  setVariables({
  limit: variables.limit,
  cursor: data.posts.posts[data.posts.posts.length - 1].createdAt,
  });
  }}
  m="auto"
  my={8}
  isLoading={fetching}
  >
  load more
  </Button>
  </Flex>
) : null
}

That’s it. Now we added all the logic for the pagination.

References:

This article series based on the Ben Award - Fullstack React GraphQL TypeScript Tutorial. This is amazing tutorial and I highly recommend you to check that out.

Main image credit

Creating a Reddit Clone Using React and GraphQL - 15

Rasika Gayan Gunarathna — Sat, 27 Mar 2021 18:11:21 +0000

This blog post originally posted on my blog site and you can find it here.

From this blog post, we are going to set up the pagination. So we need to seed a lot of data into the database. We can create mock data using mockaroo site and export those data as the SQL query.

Then run the create migration command to generate the migration file in the server application.


npx typeorm migration:create -n FakePost

Inside that migration file, you will see 2 methods called up and down . Add this code line to up method.

await queryRunner.query(`
... mockaroo queries goes here `);

Then change the server index file to run this migration file. You can move that file into migration folder. Add the migration property to createConnection method.


migrations: [path.join(__dirname, "./migrations/*")],

Then below that method add this line of code to run the migration.

await conn.runMigrations();

At this point, we are not returning the text of the post. But we don’t want to show the full text on the home page, on the home page we can only show a limited number of characters.

We can Resolver annotation to @Resolver(Post) and we are adding FiledResolver.


@FieldResolver(() => String)
textSnippet(@Root() root: Post) {
  return root.text.slice(0, 50);
}

Also, we are using cursorPagination method that taking last post timestamp and return the older posts. We can change the posts method to user query builder and return result as the number of limit. Here we are taking 2 parameters as limit and cursor.


async posts(
@Arg("limit", () => Int) limit: number,
@Arg("cursor", () => String, { nullable: true }) cursor: string | null
): Promise<Post[]> {
  // previously we took all the posts

  // return await Post.find();
  // using query builder
  const realLimit = Math.min(50, limit);
  const qb = getConnection()
  .getRepository(Post)
  .createQueryBuilder("p")
  .orderBy('"createdAt"', "DESC")
  .take(realLimit);

  if (cursor) {
  // take the old post using cursor
  qb.where('"createdAt" < :cursor', {
  cursor: new Date(parseInt(cursor)),
  });
  }
  return qb.getMany();

}

Now our back-end code is completed. Now we need to change front-end graphql query to match with these 2 parameters.


query Posts($limit: Int!, $cursor: String) {
  posts(cursor: $cursor, limit: $limit) {
    id
    createdAt
    updatedAt
    title
    textSnippet
  }
}

After changing this graphql query, execute the yarn gencommand. It will update the generated methods to retrieve the posts.

Now we can change the outlook of the post by adding some chakra-ui components.

We can add a header and re-arrange the Create Post link.

<Flex align="center">
  <Heading>Reddit Clone</Heading>
  <NextLink href="/create-post">
    <Link ml="auto">Create Post</Link>
  </NextLink>
</Flex>

There are a few scenarios that we need to handle. One is if there is no data and still fetching, we need to show the below message.

if (!fetching && !data) {
  return <div>there is some error in graphql query</div>;
}

To use fetching we need to assign it from graphql query.


const [{ data, fetching }] = usePostsQuery({
  // ... rest of the code

We can update the post UI as below to show post with its post snippet.


<Stack spacing={8}>
{data!.posts.map((p) => {
return (
  <Box key={p.id} p={5} shadow="md" borderWidth="1px">
    <Heading fontSize="xl">{p.title}</Heading>
    <Text mt={4}>{p.textSnippet} </Text>
  </Box>
);
})}
</Stack>

Then if there is data we can show a button to load more post. Above ending </Layout> tag add below code.


{data ? (
<Flex>
  <Button onClick={() => { }); } m="auto" my={8} isLoading={fetching} >
    load more
  </Button>
</Flex>
) : null}

Now we are adding the pagination resolver from cache to createUrqlClient . This is the function that append the post in the cache to the new posts.


const cursorPagination = (): Resolver => {
  return (_parent, fieldArgs, cache, info) => {
    const { parentKey: entityKey, fieldName } = info;
    const allFields = cache.inspectFields(entityKey);
    console.log("allFields: ", allFields);
    const fieldInfos = allFields.filter((info) => info.fieldName === fieldName);
    const size = fieldInfos.length;
    if (size === 0) {
      return undefined;
    }

    const fieldKey = `${fieldName}(${stringifyVariables(fieldArgs)})`;

    const isItInTheCache = cache.resolve(entityKey, fieldKey);
    info.partial = !isItInTheCache;
    const results: string[] = [];
    fieldInfos.forEach((fi) => {
      const data = cache.resolve(entityKey, fi.fieldKey) as string[];
      console.log(data)
      results.push(...data);
    });

    return results;

  };
};

We need to set this in to exchange as cacheExchange .


resolvers: {
  Query: {
    posts: cursorPagination(),
  },
},

Now we can add the onClick functionality. We can use the state to set the cursor. First, create the initial statue for the cursor.


const [variables, setVariables] = useState({
  limit: 10,
  cursor: null as null | string,
});

Then once we click the button change the cursor to last post’s timestamp. This way we can load the new posts.


<Button
  onClick={() => {

  setVariables({
  limit: variables.limit,
  cursor: data.posts[data.posts.length - 1].createdAt,
  });
  }}
  m="auto"
  my={8}
  isLoading={fetching}
>
// ...rest of the code

Now we can see it will update the new posts in the view.

References:

This article series based on the Ben Award - Fullstack React GraphQL TypeScript Tutorial. This is amazing tutorial and I highly recommend you to check that out.

Main image credit

Creating a Reddit Clone Using React and GraphQL - 14

Rasika Gayan Gunarathna — Mon, 22 Mar 2021 18:05:36 +0000

This blog post originally posted on my blog site and you can find it here.

Let’s create a folder called middleware and add the isAuth.ts file and blow code to it.

import { RedditDbContext } from "../types";
import { MiddlewareFn } from "type-graphql";

export const isAuth: MiddlewareFn<RedditDbContext> = ({ context }, next) => {
  if (!context.req.session.userId) {
    throw new Error("not authenticated");
  }
  return next();
};

Then we can use this middleware in our post resolver. This @UseMiddleware is coming from type-graphql


@Mutation(() => Post)
@UseMiddleware(isAuth)
async createPost(
// ... remaining code

Now we are moving to the front-end app and going to add Post form. Let’s create create-post.tsx file in pages folder.

Let’s add this code to it.

const CreatePost: React.FC<{}> = ({}) => {
  return (
    <Wrapper variant="small">
      <Formik
        initialValues={{ title: "", text: "" }}
        onSubmit={async (values) => {}}
      >
        {({ isSubmitting }) => (
          <Form>
            <InputField name="title" placeholder="title" label="Title" />
            <Box mt={4}>
              <InputField name="text" placeholder="text..." label="Body" />
            </Box>
            <Button
              isLoading={isSubmitting}
              mt={4}
              type="submit"
              colorScheme="teal"
            >
              Create Post
            </Button>
          </Form>
        )}
      </Formik>
    </Wrapper>
  );
};

export default CreatePost;

It is better to have a textarea for body field. We can change the InputField component. We can accept a prop called as textarea and define it as boolean.

... // InputFieldProps
textarea?: boolean

Then check it in the InputField component.


let InputOrTextarea = Input
if (textarea) {
  InputOrTextarea = Textarea
}
...
<InputOrTextarea
{...props}
{...field}
id={field.name}
placeholder={props.placeholder}
/>

Now we need to add the mutation. Create a file called createPost.graphql and add the below code. Then run yarn gen


mutation CreatePost($input: PostInput!) {
  createPost(input: $input){
    title
    id
    createdAt
    creatorId
    updatedAt
    text
    points
  }
}

Then we can use useCreatePostMutation and process the request to create a post. Also, in this create post page, we need to add the NavBar to this page. Let’s create a common component for it. Create a component called Layout.tsx and add this code block.

import { NavBar } from "./NavBar";
import { Wrapper, WrapperVariant } from "./Wrapper";

interface LayoutProps {
  // added WrapperVariant type
  variant?: WrapperVariant;
}

export const Layout: React.FC<LayoutProps> = ({ children, variant }) => {
  return (
    <>
      <NavBar />
      <Wrapper variant={variant}>{children}</Wrapper>
    </>
  );
};

Because we used Wrapper inside here. So we need to set the variant in the Layout. Without duplicating code we can create a type in there.

// Wrapper.tsx
export type WrapperVariant = "small" | "regular";
// change inside the Wrapper.tsx
interface WrapperProps {
  variant?: WrapperVariant;
}

Then replace it all over the places that we used variant. Then we can replace the Wrapper with Layout in the create-post.tsx page.

<Layout variant="small">...</Layout>

Now we can make this navbar sticky. Add the below code to make it sticky.

// NavBar.tsx
<Flex zIndex={1} position="sticky" top={0} bg="tomato" p={4}>
...

Now at this point, once a user creates a post without login into the system, this will throw an unauthenticated error. We can simply manage it on onSubmit function.


// create-post.tsx
onSubmit={async (values) => {
  const { error } = await creatPost({ input: values });

  if (error?.message.includes("not authenticated")) {

   router.push("/login")
  } else {
   router.push("/");
  }
}}

The issue in this approach we need to check in every graphql query that, the user is authenticated or not. We can create a global error handler for this. Add below code to createUrqlClient.ts and add this exchanges.

import { pipe, tap } from "wonka";
const errorExchange: Exchange = ({ forward }) => (ops$) => {
  return pipe(
    forward(ops$),
    tap(({ error }) => {
      if (error?.message.includes("not authenticated")) {
        Router.replace("/login");
      }
    })
  );
};
// ...
// below in this file
exchanges: [
  // ...
  errorExchange,
  ssrExchange,
  fetchExchange,
];

Once a user tries to do something without login, this will navigate to the login page.

We can make this better by checking the user is logged in by checking me query. To do that we can create a hook. Inside the utils folder add a file called useIsAuth.ts and add the below code.

import { useRouter } from "next/router";
import { useEffect } from "react";
import { useMeQuery } from "../generated/graphql";

export const useIsAuth = () => {
  const [{ data, fetching }] = useMeQuery();
  const router = useRouter();
  useEffect(() => {
    if (!fetching && !data?.me) {
      router.replace("/login?next=" + router.pathname);
    }
  }, [fetching, data, router]);
};

In here we are adding router.pathname as query parameter. This will route back to the previous page that the user, where were before. Let’s user this in create-post.tsx page.

const CreatePost: React.FC<{}> = ({}) => {
const router = useRouter();
useIsAuth();
// ...

Then in the login page when there is a success login with next query parameter navigate to that page.

// ...
// inside the onSubmit method
else if (response.data?.login.user) {
  if (typeof router.query.next === "string") {
    router.push(router.query.next);
  } else {
    router.push("/");
  }
}

If there is no error, navigate to the home page.

// inside the onSubmit method
const { error } = await creatPost({ input: values });
if (!error) {
  router.push("/");
}

Also, we can modify the token-passing mechanism in the [token].tsx page, because the token also can access as a query value. So, let’s change that code also.


const ChangePassword: NextPage<{ token: string }> = () => {
...
// previously we took token as initial prop.
// const ChangePassword: NextPage<{ token: string }> = ({ token })
// ...
// get the token from the query parameter
const response = await changePassword({
newPassword: values.newPassword,
token:
typeof router.query.token === "string" ? router.query.token : "",
});
// then remove getInitialProps
// delete below code from the file
ChangePassword.getInitialProps = ({ query }) => {
return {
token: query.token as string,
};
};

Because we removed the getInitialProps , Next.JS is optimize this page to render it as a static page.

References:

This article series based on the Ben Award - Fullstack React GraphQL TypeScript Tutorial. This is an amazing tutorial and I highly recommend you to check that out.

Main image credit

Creating a Reddit Clone Using React and GraphQL - 13

Rasika Gayan Gunarathna — Sat, 20 Mar 2021 13:16:56 +0000

This blog post originally posted on my blog site and you can find it here.

Now we want to add the relationship with POST and USER. This is a one-to-many relationship. In the MikrORM documentation, the many-to-one relationship can create by adding @ManyToOne in the entity. In example,


// mikro orm documentation example
@Entity()
export class Book {

@ManyToOne()
author!: Author;

}

But when we set the value of author to Book entity, we need to manually get the author and set it. If we searched more, we can set the author like this,

// mikro orm documentation exaple
book.auther = orm.em.getReference < Author > (Author, "...id...");

So, because of that, we are moving to TypeORM. Yeah, kinda huge change.

To add TypeORM to the server project, use this yarn command.


yarn add typeorm

Then we need to change the index.ts file in the server project. First we need to add the config object to TypeORM. I created a new database for typeorm.

const conn = await createConnection({
  type: "postgresql",
  database: "redditdev03",
  username: "postgresql",
  password: mySecretKeys.myDbPassword,
  logging: true,
  synchronize: true,
  entities: [],
});

In the above code, I need to add entities. Before that, we need to change our current entities to match with typeorm.

I change the User and Post Files. We need to change Property to Column and there are other annotations related to type-orm and replace with mikro-orm annotation. I will mention new annotations here and you can check the full changed file in GitHub.

PrimaryGeneratedColumn, CreateDateColumn, UpdateDateColumn, Column;

Now we can fill entities array from type-ormconfig object. We can remove mikro-orm related things from index.ts file. Also we don’t need to pass anything to context object. Now our ApolloServer context object like this.


context: ({ req, res }: RedditDbContext) => ({
  res,
  redis,
}

We can extend BaseEntity in User and Post entity classes. Because of that, we can use pre-defined methods for data manipulation. In the RedditDbContext object form types.ts file, we don’t need mikro-orm object. We can remove it. We used that mikro-orm object to access context in our resolvers. Let’s go and fix those. Because we extended the BaseEntity type from User and Post entities, we can use those methods in resolvers like Post.find().

For reference here is the insert query.

return Post.create({ title }).save();

So, now we just change the post resolver and user resolver. (There are so many small changes to match with type-orm each method. So please refer to the Github files.)

If we try to find something without a primary key we need to use where property in findOne method.

await User.findOne({ where: { email } });

While moving to type-orm we can use its query builder. Here is the code for that.

const result = await getConnection()
  .createQueryBuilder()
  .insert()
  .into(User)
  .values({
    username: options.username,
    email: options.email,
    password: hashedPassword,
  })
  .returning("*")
  .execute();

Now we all set the type-orm. Let’s add the relationship to Post entity.


@Field()
@Column()
creatorId: number;
// posts need to match with User's property name
@ManyToOne(() => User, user => user.posts)
creator: User;

So we need to add the posts property in the User entity.


@OneToMany(() => Post, (post) => post.creator)
posts: Post[];

Also, we are adding new fields to Post entity. Because these are not null fields, we need to clear Post table and start it again.


@Field()
@Column()
text!: string;

@Field()
@Column({type: "int", default: 0})
points!: number;

Then we are creating a InputType for the post. This will easier to work with the front-end.

@InputType()
class PostInput {
  @Field()
  title: string;
  @Field()
  text: string;
}

Then we need to change the createPost method in post resolver.


@Mutation(() => Post)
async createPost(
  @Arg("input") input: PostInput,
  @Ctx() { req }: RedditDbContext
): Promise<Post> {
  return Post.create({ ...input, creatorId: req.session.userId }).save();
}

Now we have a slight error that event anyone can create a post without login to the system. We can avoid it by checking user id in the session, but any place that we need to check user logging status we need to add a if statement. To avoid that we can use middleware. Let’s see how can we use middleware from the next post.

References:

This article series based on the Ben Award - Fullstack React GraphQL TypeScript Tutorial. This is an amazing tutorial and I highly recommend you to check that out.

Main image credit

Creating a Reddit Clone Using React and GraphQL - 12

Rasika Gayan Gunarathna — Tue, 16 Mar 2021 17:48:07 +0000

This blog post originally posted on my blog site and you can find it here.

As I said in an earlier post we have to manage 2 scenarios here.

Refresh the cache for forgot password
Error handle for token errors.

Add below code lines to handle the token errors. We are using states here.

const [tokenError, setTokenError] = useState("");

Then we are adding the below code to check that token error exist. If so we are. adding it to state.

// take out toErrorMap first
const errorMap = toErrorMap(response.data.changePassword.errors);
if ("token" in errorMap) {
  // this is because we defined filed as token in user.ts in backend
  setTokenError(errorMap.token);
}

Let’s display this error.

{
  tokenError ? <Box color="red">{tokenError}</Box> : null;
}

Add this moment if you try, you will get 404 error. The issue in here, that we didn't wrap this with withUrqlClient. Let’s cover the component with it.

export default withUrqlClient(createUrqlClient)(ChangePassword);

Now, we need to delete the token from the back-end once we use this token. Let’s do that next.

// in resolvers/user.ts file
// first get the key out
const key = FORGET_PASSWORD_PREFIX + token;
const userId = await redis.get(key);
// then delete the key
await redis.del(key);
req.session.userId = user.id;

Now if you try to use the token 2nd time to change the password, you will get the token expired error. Cool. All working fine now.

Okay, now we only left here, if the token expired your need to get a new token. Let’s add that. First, we are adding a link to get a new token page.

// update code to below code block in [token].tsx file.
{
  tokenError ? (
    <Box>
      <Box color="red">{tokenError}</Box>
      <NextLink href="/forgot-password">
        <Link>Click here to get a new token.</Link>
      </NextLink>
    </Box>
  ) : null;
}

Once you click on the link it will bring you to forgot-password page. Let’s quickly add that page.

import React from "react";
const ForgotPassword: React.FC<{}> = ({}) => {
  return <div>Forgot Password</div>;
};
export default ForgotPassword;

This also needs to add to Login page.

// under to inputfield add this code
<Flex mt={2}>
  <NextLink href="/forgot-password">
    <Link ml="auto">forgot password?</Link>
  </NextLink>
</Flex>

As the last for this forgot-passward page, we need the user to insert an email address. Let’s copy from from Login page and add it here. Also, we need to create a mutation for forgot-password.This will only return a boolean value.

mutation ForgotPassword($email: String!) {
  forgotPassword(email: $email)
}

In forgot-password.tsx page, we use state to set a success message.

const [complete, setComplete] = userState(false);

Here is the full code for forgot-password.tsx file.

const [complete, setComplete] = userState(false);
const [, forgotPassword] = useForgotPasswordMutation();
return (
  <Wrapper variant="small">
    <Formik
      initialValues={{ email: "" }}
      onSubmit={async (values) => {
        await forgotPassword(values);
        setComplete(true);
      }}
    >
      {({ isSubmitting }) =>
        complete ? (
          <Box>we sent a password reset link to your email. Please check.</Box>
        ) : (
          <Form>
            <InputField
              name="email"
              placeholder="email"
              label="Email"
              type="email"
            />

            <Button
              isLoading={isSubmitting}
              mt={4}
              type="submit"
              colorScheme="teal"
            >
              Forgot Password
            </Button>
          </Form>
        )
      }
    </Formik>
  </Wrapper>
);

At this point, we have done almost everything with user management and authentication tasks of this application. From the next blog post, let’s work on adding posts to the Reddit clone.

References:

This article series based on the Ben Award - Fullstack React GraphQL TypeScript Tutorial. This is an amazing tutorial and I highly recommend you to check that out.

Main image credit

Creating a Reddit Clone Using React and GraphQL - 11

Rasika Gayan Gunarathna — Thu, 11 Mar 2021 17:50:53 +0000

This blog post originally posted on my blog site and you can find it here.

From the last post, we stop at finishing forgotPassword mutation. Now we come to GraphQL playground and execute the forget-password mutation.


mutation {
  forgotPassword(email:"rasika@rasikag.com")
}

Then in the console you will see the forget password URL and click it. It will show the test email. Click on the link and it will navigate to our web app. At this point, we don’t have forgot password page. Let’s go and create it. But in the link, you will see the token that we created.

Create a folder called change-password as the top level and the file will be [token].tsx . This is the Next.js convention that we can access a variable in the URL.

Here is our page initial code block.

import { NextPage } from "next";
import React from "react";

const ChangePassword: NextPage<{ token: string }> = ({ token }) => {
  return <div></div>;
};

We are using Next.js ‘s NextPage type that leverage the functionalities that get the query parameters. To do that we are adding getInitialProps method. Add below code block after the ChangePassword . This method will catch the query parameter and pass it as token


ChangePassword.getInitialProps = ({query}) => {
  return {
    token: query.token as string
  }
}

Now let’s create the forget password form. We can grab that from the login page.

return (
  <Wrapper variant="small">
    <Formik
      initialValues={{ newPassword: "" }}
      onSubmit={async (values, { setErrors }) => {}}
    >
      {({ isSubmitting }) => (
        <Form>
          <Box mt={4}>
            <InputField
              name="newPassword"
              placeholder="new password"
              label="New Password"
              type="password"
            />
          </Box>
          <Button
            isLoading={isSubmitting}
            mt={4}
            type="submit"
            colorScheme="teal"
          >
            Change Password
          </Button>
        </Form>
      )}
    </Formik>
  </Wrapper>
);

You will see that our onSubmit function doesn’t have any code. Before that in here, we are receiving the token and we need to send the new password to the server to reset it. Let’s add that mutation UserResolver.


@Mutation(() => UserResponse)
  async changePassword(
    @Arg("token") token: string,
    @Arg("newPassword") newPassword: string,
    @Ctx() { em, redis, req }: RedditDbContext
  ): Promise<UserResponse> {
    // first validate the password
    if (newPassword.length <= 2) {
      return {
        errors: [
          {
            field: "newPassword",
            message: "length must be greater than 2",
          },
        ],
      };
    }
    // check user id exist
    const userId = await redis.get(FORGET_PASSWORD_PREFIX + token);
    if (!userId) {
      return {
        errors: [
          {
            field: "token",
            message: "token expired",
          },
        ],
      };
    }

    const user = await em.findOne(User, { id: parseInt(userId) });
    if (!user) {
      return {
        errors: [
          {
            field: "token",
            message: "user no longer exist",
          },
        ],
      };
    }

    user.password = await argon2.hash(newPassword);
    await em.persistAndFlush(user);
    req.session.userId = user.id;
    return { user };
  }

We are validating the password first. Then validate the userid by checking the token. If all validation pass, then update the user. We need to hash this password first. Then update the user. Also here we are setting the session for that user.

We complete the back-end. Let’s go and add the front-end code for this change. We are starting by adding new graphql mutation. Create a file changePassword.graphql and add the below code.


mutation ChangePassword($token: String!, $newPassword: String!) {
  changePassword(token: $token, newPassword: $newPassword) {
    errors {
      ...RegularError
    }
    user {
      ...RegularUser
    }
  }
}

To manage errors we can create we created RegularError fragment and we can replace all the errors with RegularError fragment.


fragment RegularError on FieldError {
  id
  username
}

At this point, if we check our login, register and changePassword mutations we can see that body is the same. So let’s make another fragment and replace it. Create a fragment called RegularUserResponse and replace others with it.


fragment RegularUserResponse on UserResponse {
  errors {
    ...RegularError
  }
  user {
    ...RegularUser
  }
}

Main thing need to observe that fragments are base on back-end ObjectType . If you check that UserResponse is match with back-end UserResponse ObjectType and those names should be match.

Now let’s replace those graphql queries with this fragment.

Make sure to run yarn gen from web app after doing all the things to generate the types.

Now we are going to file the onSublit method in ChangePassword component.


// add below code lines above from return method
const router = useRouter();
const [, changePassword] = useChangePasswordMutation();
// ...
onSubmit={async (values, { setErrors }) => {
  const response = await changePassword({
    newPassword: values.newPassword,
    token,
  });
  if (response.data?.changePassword.errors) {
    // the graphql errors like this
    // [{filed: "username", message: "value empty"}]
    setErrors(toErrorMap(response.data.changePassword.errors));
  } else if (response.data?.changePassword.user) {
    // TODO: try to move this else if block
    // user log in successfully
    router.push("/");
  }
}}

But there are few things that need to handle. One thing is we can get the response that saying the error field is token and in the form we don't have any field called the token. From the next post, we are going to handle that.

References:

This article series based on the Ben Award - Fullstack React GraphQL TypeScript Tutorial. This is amazing tutorial and I highly recommend you to check that out.

Main image credit

Let's create a Singly Linked List

Rasika Gayan Gunarathna — Wed, 10 Mar 2021 08:16:38 +0000

This post originally posted in my bog site that you can find here

Today I am focusing on how to create a minimalistic Singly Linked List. A linked list is a data structure that contains a sequence of data linked with each other. Each element in the link can contain a value and reference to the next element in the link. The elements we called as Nodes.

We can present the Linked List as below picture. You can see, apart from the last node, all are pointing to its’ next node.

The starting node is called as Head Node and the last node is Tail Node. As I explain earlier every node can keep data and the next item’s reference.If we want to go to the 3rd node we need to start from the 1st node keep going until we reach the 3rd node.

Okay, let’s start coding a Linked List(I am using C# here).

First, we create a Node class that keeps data and the next element. I will start will int datatype and later I will change this to keep generic data type.

public class Node
{
    public Node(int value)
    {
        Value = value;
    }

    public int Value { get; set; }
    public Node Next { get; set; }

}

Here we are keeping data in Value property and next Node object will keep in Next property.

Now we can start to create a LinkedList class.

public class LinkedList: ICollection<int> {
}

We are using ICollection interface. With that, we can leverage the inbuild enumeration functionality.

Next, we are adding public Head and Tail properties. Using those we can return Head and Tail of the Linked List any time and these are public variables. Also, we have 2 private variables as head and tail to keep Nodes internally.

public class LinkedList: ICollection<int>
{
    private Node head
    {
        get;
        set;
    }
    private Node tail
    {
        get;
        set;
    }
    public int Head { get {return head.Value;}}
    public int Tail { get { return tail.Value;}}
    public int Count
    {
        get;
        private set;
    }
}

This Count property from ICollection implementation.

There are 2 ways to add value to the linked list. We can add a value to the head or add a value to the tail. Let’s start with adding a value to the tail.

Add to Tail

Here is the code to add value to the tail.

public void AddTail(int value)
{
    var node = new Node(value);

    if (Count == 0) // A
    {
        head = node;
    }
    else
    {
        tail.Next = node; // B
    }
    tail = node; // C
    Count++;
}

Let me explain this code. To demonstrate let’s assume the below code.

LinkedList linkedList = new LinkedList();
for (int i = 0; i < 5; i++)
{
    linkedList.AddTail(i);
}

When i = 0

head and tail are null. Also Count is 0 . So, it will go inside // A block and set head to that node. Also, it will set tail to that node.

When i = 1

Now we create the second Node variable. Because Count is 1 it will go to // B and set the tail’s Next property to this node. It implies that head ‘s Next property also.

Then tail variable referencing the same node also. Let’s put in to picture.

When i = 1 tail also referring the head. Once we set the tail.Next to new node that means head’s Next also be the new node. I added colors with comment reference to each block that what happen in each block.

This is possible because every time we assign a variable to a object, we are passing the reference of that object.

Until for loop break, this will happen. Let me put it into a picture.

The important point that need to mentioned here that always the tail node’s Next property will be null .

Any time, Head and Tail variables will give the head and tail values. Once we are adding values to the tail, most reason value always is in the tail.

Add to Head

This is the reverse methodology of add to tail. Once we adding values to head, that means most reason value will be in the head. The least reason value will be in the tail.

Here is the code block to add value to the head method.

public void AddHead(int value)
{
    Node temp = head; // A
    head = new Node(value); // B
    head.Next = temp; // C
    Count++;
    if (Count == 1)
    {
        tail = head; // D
    }
}

To simulate this code block let’s use our usual for loop example.

LinkedList linkedList = new LinkedList();
for (int i = 0; i < 5; i++)
{
    linkedList.AddHead(i);
}

When i=0

Our head and tail is equal to null at this moment. In the //A code block we assign our current head to temp variable and at this moment it is null. Then we create a new node that assigning that value and assign it to head. So once we execute //B means always our latest value will be in the head. Then our previous node will assign to head’s Next .

In this moment //D block will be executed and the initial value will assign to tail.

Keep note that this will be only executed when i=0

Let’s show this in a picture.

When i = 1

Now is the fun part happen. First, we assign the current head to a temp variable. In the head variable, it only contains one node. Then we create a new node and assign it to head. Then current head ‘s Next will assign the temp variable. Because of that head will always have the latest variable.

Let’s get that into a picture.

When i = 2

The same thing is going on when i = 2. For more clarity, I will add a picture of it.

This will be repeated until for loop end.

At this point, we added the main functionality for the LinkedList class. Only we have to implement the ICollection interface.

Here are the methods to remove the first item and the last item from Linked List.

public void RemoveFirst()
{
    if (Count != 0)
    {
        head = head.Next;
        Count--;
        if (Count == 0)
        {
            tail = null;
        }
    }
}
public void RemoveLast()
{
    if (Count != 0)
    {
        if (Count == 1)
        {
            head = null;
            tail = null;
        }
        else
        {
            Node current = head;
            while (current.Next != tail)
            {
                current = current.Next;
            }
            current.Next = null;
            tail = current;
        }
        Count--;
    }
}

I hope this covers all the topics that need to cover on a singly linked list. Hope you guys learned something from this.

I will wrap up this post from here. 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.

Creating a Reddit Clone Using React and GraphQL - 10

Rasika Gayan Gunarathna — Thu, 04 Mar 2021 16:55:39 +0000

This post originally posted on my blog site.

Now we are adding email functions to the server. For this, we use NodeMailer. Use the below command to add it.


yarn add nodemailer
yarn add -D @types/nodemailer // this is for TS support

We can grab the code from there example and paste it into a file. Now we are creating forgotPassword mutation. Before that, we need to add the email field to User entity.


@Field()
@Property({ type: "text", unique: true })
email!: string;

Then we need to run the migration command to update the database. Then once we run the application we will get this error.


alter table "user" add column "email" text not null;

This is because we are trying to add a not null column, but we have some users without an email address. For now, let’s delete all users.

Now we need to update user registration mutation because now email is a mandatory field. Add it to query builder also.

Now we are changing login mutation to match with this new change.

First, change in fineOne method that checks does the user passed username or email.

const user = await em.findOne(
  User,
  usernameOrEmail.includes("@")
    ? { email: usernameOrEmail }
    : { username: usernameOrEmail }
);

Now there is a scenario that user can have @ in there username. Let’s handle that. With that validation, we create a separate util file called validateRegister . Then use that util function in register mutation.

...
const errors = validateRegister(options);
if (errors) {
  return {errors};
}
...

Here you will see that we are returning the error array as an object. The returned object is matching with the return type.

Let’s change the front-end code to match with this back-end code.

We change the Login graphql query to get the usernameOrEmail first.


mutation Login($usernameOrEmail: String!, $password: String!) {
  login(usernameOrEmail: $usernameOrEmail, password: $password) {
... // rest of code is same

Then change the Register graphql query.


mutation Register($options: UsernamePasswordInput!) {
register(options: $options){
... //rest of code is same

Then add the email input field in to Register.tsx page.

After all these changes we are coming back to send emails for users that forgot password.

In the user.ts file inside the resolvers folder, we are adding forgotPassword mutation.


@Mutation(() => Boolean)
async forgotPassword(
  @Arg("email") email: string,
  @Ctx() { em }: RedditDbContext
) {
  const user = await em.findOne(User, {email});
  if (!user) {
    return true;
  }
  const token = "asdasdsadassadsadsadsadsad";
  await sendEmail(email,
    '<a href="http://localhost:3001/reset-password/${token}">click here to reset password</a>');

  return true;

}

Within there, we first check that user email exists, if so we create a token and attached it to the reset-password link. We use uuid package for creating a unique user token to attach to the URL.


yarn add uuid ioredis

Also, install the type support to it.


yarn add -D @types/uuid @types/ioredis

Now we use ioredis and let’s make relevant changes in the index.ts file.

Also, we are passing redis in to context that later we can use it in the resolver. So now we need to add that to RedditDbContext type.

Then create a Redis object and use it in the RedisStore .


// inside the index.ts file
const redis = new Redis();
// use this redis object inside the RedisStore
...
store: new RedisStore({ client: redis, disableTouch: true }),
...

Then inside the forgotPassword mutation use this redis object. There are a few things happening here.

First, we create a toke using uuid. Then we store this in Redis. After that, we set this token in the URL.

const token = v4();
await redis.set(
  FORGET_PASSWORD_PREFIX + token,
  user.id,
  "ex",
  1000 * 60 * 60 * 24 * 3
);

References:

This article series based on the Ben Award - Fullstack React GraphQL TypeScript Tutorial. This is an amazing tutorial and I highly recommend you to check that out.

Main image credit

EF Core 5.0 - Many to Many Relationship

Rasika Gayan Gunarathna — Mon, 01 Mar 2021 10:08:17 +0000

There is a new feature in EF 5.0 that change the way to create the Many-to-Many Relationship. It is really convenient way to create a relationship with Entities. Before dive into that let’s check that, how we create a many-to-many relationship in previous versions.

Before EF Core 5.0

Let’s take our common scenario with Post and Tag example. A blog post can have multiple tags and one tag can be tagged with many posts.

This is our Post entity.


public class Post
{
  public int Id { get; set; }
  public string Name { get; set; }
}

This is out Tag entity.


public class Tag
{
  public int Id { get; set; }
  public string Text { get; set; }
}

So these 2 entities have a many-to-many relationship. Let’s create the joining entity that contains all the mapping details with both entities.

public class PostTag
{
  public int PostId { get; set; }
  public Post Post { get; set; }

  public int TagId { get; set; }
  public Tag Tag { get; set; }
}

This PostId and TagId works as composite primary key

Now we need to add this mapping to our Post and Tag entities.


// inside the Tag.cs file
public ICollection<PostTag> PostTags { get; set; }
// inside the Post.cs file
public ICollection<PostTag> PostTags { get; set; }

Now we are at the last step. We use the Fluent APIto define the primary keys of the PostTag .


// inside the context class
// define composite primary key
protected override void OnModelCreating(ModelBuilder modelBuilder)
{
  modelBuilder.Entity<PostTag>().HasKey(pt => new { pt.PostId, pt.TagId });
}

That’s it. Once we enable the migration this will create a table called PostTag and it has a composite primary key and has a relation with Post and Tag tables.

If you defined the keys in PostTag class differently you need to mention it in OnModelCreating by using Fluent API.


// in PostTag class
public int PId { get; set; }
public Post Post { get; set; }
// inside the OnModelCreating method in context class
modelBuilder.Entity<PostTag>()
      .HasOne<Post>(pt => pt.Post)
      .WithMany(p => p.PostTags)
      .HasForeignKey(pt => pt.PostId);

Hola, that is lots of code. Now let’s see how what are an improvement with EF Core 5.0

EF Core 5.0

Create the Post entity with navigation property.


public class Post
{
  public int Id { get; set; }
  public string Name { get; set; }
  public ICollection<PostTag> PostTags { get; set; }
}

Create the Tag entity with navigation property.


public class Tag
{
  public int Id { get; set; }
  public string Text { get; set; }
  public ICollection<PostTag> PostTags { get; set; }
}

That’s it. Now EF Core will identify this as a many-to-many relationship and it will create a table PostTag . The PostTag table data can be query and update without explicitly referring to that table. If we need more modification we can use Fluent API aswell.

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

References:

What's New in EF Core 5.0

Main image credit