Add TypeScript Type Checks to RouteData fields

> Inspired by error: Conversion of type may be a mistake because neither type sufficiently overlaps with the other.
Cover Image for Add TypeScript Type Checks to RouteData fields

All the world's a type and we are all merely types

The Problem

RouteData is an interface defined as:

export interface RouteData {
name: string;
displayName?: string;
fields?: {
[name: string]: Field;
};
databaseName?: string;
deviceId?: string;
itemLanguage?: string;
itemVersion?: number;
layoutId?: string;
templateId?: string;
templateName?: string;
placeholders: PlaceholdersData;
itemId?: string;
}

Whereby this:

const foo = useSitecoreContext().sitecoreContext.route?.fields;

Corresponds to:

(property) RouteData.fields?: {
[name: string]: Field<GenericFieldValue>;
} | undefined

In other words, RouteData.fields acts as a kind of arbitrary dictionary.

Now imagine that I have defined a custom type (the full type actually has 25+ fields):

export type Publication = {
id?: string;
url?: string;
fields: {
abstract: Field<string>;
attachment: FileField;
};
}

I'd like to be able to do this:

const foo = useSitecoreContext().sitecoreContext.route?.fields as Publication['fields'];

However, I get this IDE / build error:

Conversion of type '{ [name: string]: Field<GenericFieldValue>; } | undefined' to type '{ abstract: Field<string>; attachment: FileField; }' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
Type '{ [name: string]: Field<GenericFieldValue>; }' is missing the following properties from type '{ abstract: Field<string>; attachment: FileField; }': abstract, attachment

If I do as the error suggests, the IDE and build gods are pleased:

const bar = (useSitecoreContext().sitecoreContext.route?.fields as unknown) as Publication['fields'];

One Solution

Let's say you need a component that renders a header for a "blog" page. The header should display the title of the blog and the type of blog. Both fields are specified on the page item (and therefore the route). The blog type is a list field that is a reference to a custom type called BlogType. BlogType has a single field called Name. The header component should be able to render the title and the name of the blog type.

BlogHeader.tsx
import { Text, useSitecoreContext, Field } from '@sitecore-jss/sitecore-jss-nextjs';
import { Website } from 'lib/component-props/model';

type BlogHeaderRouteFields = Website.Project.Main.PageTypes.Blogs.Publication['fields'];

const BlogHeader = (): JSX.Element => {
const { sitecoreContext } = useSitecoreContext();

if (!sitecoreContext || !sitecoreContext?.route?.fields) {
return <></>;
}

const blogHeaderRouteFields = (sitecoreContext.route.fields as unknown) as BlogHeaderRouteFields;

return (
<div>
<h1 className="blog-header">
<Text field={blogHeaderRouteFields.title as Field<string>} />
</h1>
{blogHeaderRouteFields.blogTypes?.value && (
<div className="blog-type">
<Text
field={blogHeaderRouteFields.blogTypes.value[0]?.fields?.name as Field<string>}
editable={false}
/>
</div>
)}
</div>
);
};

export default BlogHeader;

The Better Solution

sitecoreContext has no knowledge of what RouteData it has; specifically, fields. It defaults to Record<string, string | Field | Item | Item[]>, which means we need to assert what is in it when we use it.

The better solution to this would be to have a generic type for RouteData that allows us to specify the type of fields. If generics were supported we could do this:

const { sitecoreContext } = useSitecoreContext<MyRouteFields>();

This is cleaner and more less prone to errors because assertions don't need to be added whenever route fields are referenced. I am also not the first one to notice or ask for this:

https://github.com/Sitecore/jss/issues/1016

The OP describes the ask perfectly and offers a temporary solution until someone takes the precious time to submit a PR.

-MG


More Stories

Cover Image for Script: Boost SIF Certificate Expiry Days

Script: Boost SIF Certificate Expiry Days

> One simple script that definitely won't delete your system32 folder

Cover Image for Early Returns in React Components

Early Returns in React Components

> When and how should you return early in a React component?

Cover Image for Don't Ignore the HttpRequestValidationException

Don't Ignore the HttpRequestValidationException

> Doing so could be... potentially dangerous

Cover Image for Year in Review: 2022

Year in Review: 2022

> Full steam ahead

Cover Image for Super Fast Project Builds with Visual Studio Publish

Super Fast Project Builds with Visual Studio Publish

> For when solution builds take too long

Cover Image for Content Editor Search Bar Not Working

Content Editor Search Bar Not Working

> Sometimes it works, sometimes not

Cover Image for NextJS: Access has been blocked by CORS policy

NextJS: Access has been blocked by CORS policy

> CORS is almost as much of a nuisance as GDPR popups

Cover Image for On Sitecore Development

On Sitecore Development

> Broadly speaking

Cover Image for NextJS/JSS Edit Frames Before JSS v21.1.0

NextJS/JSS Edit Frames Before JSS v21.1.0

> It is possible. We have the technology.

Cover Image for NextJS: Unable to Verify the First Certificate

NextJS: Unable to Verify the First Certificate

> UNABLE_TO_VERIFY_LEAF_SIGNATURE

Cover Image for Symposium 2022 Reflections

Symposium 2022 Reflections

> Sitecore is making big changes

Cover Image for On Mentorship and Community Contributions

On Mentorship and Community Contributions

> Reflections and what I learned as an MVP mentor

Cover Image for Tips for Forms Implementations

Tips for Forms Implementations

> And other pro tips

Cover Image for Security Series: App Service IP Restrictions

Security Series: App Service IP Restrictions

> How to manage IP rules "at scale" using the Azure CLI

Cover Image for SPE Script Performance & Troubleshooting

SPE Script Performance & Troubleshooting

> Script never ends or runs too slow? Get in here.

Cover Image for On Sitecore Stack Exchange (SSE)

On Sitecore Stack Exchange (SSE)

> What I've learned, what I see, what I want to see

Cover Image for Considerations for Hosting Mail Signature Images on Vercel

Considerations for Hosting Mail Signature Images on Vercel

> Outlook is a Cache-Control disrepectoor and that's a problem

Cover Image for Ideas For Docker up.ps1 Scripts

Ideas For Docker up.ps1 Scripts

> Because Docker can be brittle

Cover Image for How to Run Old Versions of Solr in a Docker Container

How to Run Old Versions of Solr in a Docker Container

> Please don't make me install another version of Solr on my local...

Cover Image for JSS: Reducing Bloat in Multilist Field Serialization

JSS: Reducing Bloat in Multilist Field Serialization

> Because: performance, security, and error-avoidance

Cover Image for NextJS: Short URL for Viewing Layout Service Response

NextJS: Short URL for Viewing Layout Service Response

> Because the default URL is 2long4me

Cover Image for Tips for Applying Cumulative Sitecore XM/XP Patches and Hotfixes

Tips for Applying Cumulative Sitecore XM/XP Patches and Hotfixes

> It's probably time to overhaul your processes

Cover Image for Azure PaaS Cache Optimization

Azure PaaS Cache Optimization

> App Services benefit greatly from proper configuration

Cover Image for Critical Security Bulletin SC2024-001-619349 Announced

Critical Security Bulletin SC2024-001-619349 Announced

> And other scintillating commentary

Cover Image for JSS + TypeScript Sitecore Project Tips

JSS + TypeScript Sitecore Project Tips

> New tech, new challenges

Cover Image for Troubleshooting 502 Responses in Azure App Services

Troubleshooting 502 Responses in Azure App Services

> App Services don't support all libraries

Cover Image for Sitecore Symposium 2022

Sitecore Symposium 2022

> What I'm Watching 👀

Cover Image for Hello World

Hello World

> Welcome to the show

Cover Image for How to Run Sitecore 10.3.x in Docker on Windows 10

How to Run Sitecore 10.3.x in Docker on Windows 10

> Configs for loading useful asset images

Cover Image for Tips for New Sitecore Developers

Tips for New Sitecore Developers

> If I had more time, I would have written a shorter letter