PaginatedPosts resolver cursor

[mcawte]

lireddit/server/src/resolvers/post.ts

Line 138 in 5d857b8

replacements.push(new Date(parseInt(cursor)));

Should this line be replacements.push(cursor) ?

I don't think ParseInt and Date are helping here. Using those functions turns the string into a date close to the beginning of time according to Unix. No extra posts will be retrieved when createdAt is set to this date.

[benawad]

I tried replacements.push(cursor) first, but that didn't work

Using those functions turns the string into a date close to the beginning of time according to Unix

it converts the date ok for me

[mcawte]

Okay, I am not sure what is happening here. For me in the web index.tsx page, I have

{data && data.posts.hasMore ? (
    <Flex>  
        <Button 
           onClick={() => {  
            console.log("the cursor is:",data.posts.posts[data.posts.posts.length - 1].createdAt )
              fetchMore({
                variables: {
                  limit: variables?.limit,
                  cursor:
                    data.posts.posts[data.posts.posts.length - 1].createdAt,
                },
 });

Looking at the web console when requesting more posts, I get

the cursor is: 2020-07-13T19:39:44.000Z

In the server code I have

  async posts(
    @Arg("limit", () => Int) limit: number,
    @Arg("cursor", () => String, { nullable: true }) cursor: string | null
  ): Promise<PaginatedPosts> {
    const realLimit = Math.min(50, limit);
    const reaLimitPlusOne = realLimit + 1;

    const replacements: any[] = [reaLimitPlusOne];


    if (cursor) {
      replacements.push(cursor);
    }


    const posts = await getConnection().query(
      `
    select p.*
    from posts p
    ${cursor ? `where p."createdAt" < $2` : ""}
    order by p."createdAt" DESC
    limit $1
    `,
      replacements
    );

    // Debug logging
    console.log("The query is:")
    console.log( `
    select p.*
    from posts p
    ${cursor ? `where p."createdAt" < $2` : ""}
    order by p."createdAt" DESC
    limit $1
    `)
    console.log("the cursor is: ", cursor)
    console.log("replacements is:",replacements)

      if (cursor) {
    console.log("The int parsed cursor is:", parseInt(cursor))
    console.log("The new date and int parsed cursor is:", new Date(parseInt(cursor)))
      }

    return {
      posts: posts.slice(0, realLimit),
      hasMore: posts.length === reaLimitPlusOne,
    };
  }

When initially loading the site this produces

The query is:

select p.*
from posts p

order by p."createdAt" DESC
limit $1

the cursor is:  null
replacements is: [ 16 ]

which is as expected. When requesting more posts I get

The query is:

select p.*
from posts p
where p."createdAt" < $2
order by p."createdAt" DESC
limit $1

the cursor is: 2020-07-13T19:39:44.000Z
replacements is: [ 16, '2020-07-13T19:39:44.000Z' ]
The int parsed cursor is: 2020
The new date and int parsed cursor is: 1970-01-01T00:00:02.020Z

I don't understand how parseInt is working for you. But that's okay, it works for me without doing that. Posting this just in case it helps anyone else.

Thanks for the awesome tutorials! There are little details you add to your videos that make a huge difference, such as making the decision to say what keyboard shortcuts you are using. Much appreciated.

[benawad]

Oh the difference is, I am passing the date as a timestamp e.g. 1598667436