Skeleton - Blog - Paged results - Prop href did not match (+tsx variables not typed)

[danabdn]

What is the location of your example repository?

Hydrogen Skeleton Template

Which package or tool is having this issue?

Hydrogen

What version of that package or tool are you using?

2024.7.7

What version of Remix are you using?

2.10.1 (oxygen 2.0.6)

Steps to Reproduce

Scope

Skeleton template - blog page listing articles i.e. the route for blogs.$blogHandle._index.tsx

Offending code segment

export default function Blog() {
  const { blog } = useLoaderData<typeof loader>();
  const { articles } = blog;

  return (
    <div className="blog">
      <h1>{blog.title}</h1>
      <div className="blog-grid">
        <PaginatedResourceSection connection={articles}>
          {({ node: article, index }) => (
            <ArticleItem
              article={article}
              key={article.id}
              loading={index < 2 ? "eager" : "lazy"}
            />
          )}
        </PaginatedResourceSection>
      </div>
    </div>
  );
}

The error can also be reproduced with just this code... i.e. it's not a problem with the href in the ArticleItem code.

export default function Blog() {
  const { blog } = useLoaderData<typeof loader>();
  const { articles } = blog;

  return (
    <div className="blog">
      <h1>{blog.title}</h1>
      <div className="blog-grid">
        <PaginatedResourceSection connection={articles}>
         <div key={article.id}></div>
        </PaginatedResourceSection>
      </div>
    </div>
  );
}

So it's to do with PaginatedResourceSection I believe.

Expected Behavior

1. I should not get type safety red squiggles and thus a development time warning - my code for this page is identical to template.
2. The HTML encoding of sever vs client should match as to not give a runtime warning to the user (view in F12 dev mode console)

Actual Behavior

Problem 1

Error on blog page that the user sees (F12 dev mode console)...

Warning: Prop href did not match. Server: "/blogs/MYBLOGNAME?direction=next&cursor=eyJsYXN0X2lkIjozODMyODc2MjM3MTYsImxhc3RfdmFsdWUiOjM4MzI4NzYyMzcxNn0=" Client: "/blogs/MYBLOGNAME?direction=next&cursor=eyJsYXN0X2lkIjozODMyODc2MjM3MTYsImxhc3RfdmFsdWUiOjM4MzI4NzYyMzcxNn0%3D"

You'll notice the only difference is the equals signs at the end - in one its an actual equals sign and the %3D in the other - the %3D of course being html encoded for = sign.

This looks like a very easy fix but doubt that's in my ball court and may be an issue with PaginatedResourceSection.

The website should not be showing an error and it appears to almost match - so just a minor tweak somehow.

Problem 2

The page is a tsx file. This implies typescript. Therefore the page should be type safe. But it is not.

Sorry if I am misunderstanding something here. It looks like a JSX file was changed to a TSX file and the file wasn't then updated to be type safe. So getting a development time code warning for type safety.

The error in code out of the box is as follows...

Type 'unknown' is not assignable to type 'ArticleItemFragment'.
  Type 'unknown' is not assignable to type 'Pick<Article, "title" | "id" | "contentHtml" | "handle" | "publishedAt">'.ts(2322)
blogs.$blogHandle._index.tsx(90, 3): The expected type comes from property 'article' which is declared here on type 'IntrinsicAttributes & { article: ArticleItemFragment; loading?: "eager" | "lazy" | undefined; }'
(property) article: ArticleItemFragment

Perhaps it could be changed to be something like the following?

  return (
    <div className="blog">
      <h1>{blog.title}</h1>
      <div className="blog-grid">
        <PaginatedResourceSection connection={articles}>
        {({
            node: article,
            index,
          }: {
            node: ArticleItemFragment;
            index: number;
          }) => (
            <ArticleItem
              article={article}
              key={article.id}
              loading={index < 2 ? "eager" : "lazy"}
            />
          )}
        </PaginatedResourceSection>
      </div>
    </div>
  );
}

I really don't understand why there a TSX file is not out of the box typesafe? Is it just something that needs to be done as part of a plan or am I not understanding something basic about the configuration of my project (which is based mostly on the skeleton template)?

Thanks,
Dan.

[danabdn]

This bug may related to another open issue - sorry just noticed it - #2342
The above information may be useful in the meantime.

So maybe just feedback on the type safety issue would be great for now.

[wizardlyhel]

thank you for the additional info