Typecheck fails on blog-tutorial example about examples

[kiliman]

It's always difficult to keep a tutorial updated with the latest changes (especially on a fast-paced project like Remix).

The "current" recommended approach to typing loaders is as follows:

• use LoaderArgs instead of LoaderFunction
• always wrap return value in json helper
• use useLoaderArgs<typeof loader>() instead of as LoaderData

import { json, type LoaderArgs } from '@remix-run/node'
import { db } from '~/db.server'

export const loader = async ({request, params}: LoaderArgs => {
  const { jokeId } = params
  const joke = await db.joke.findUnique({
    where: { id: jokeId },
  })
  return json({joke})
}

export default function Joke() {
  const { joke } = useLoaderData<typeof loader>()
  return <div>{ joke.name }</div>
}

NOTE: Since Remix always returns loader data as serialized JSON, values like Date will be converted to a string. So the inferred type will by string not Date. If you would like to maintain the native types, then you can use remix-typedjson which will maintain the native types across the entire request.

https://github.com/kiliman/remix-typedjson

[MichaelDeBoey]

@PythonCreator27 I'm currently working on a PR that will update these old usages to the newly recommended one

[franklinjavier]

It would be great if has a codemod to update all the examples

[MichaelDeBoey]

@franklinjavier I thought about creating a codemod for this, but since it has so many edge-cases that aren't straight-forward, it's better to do it manually yourself in each codebase

[franklinjavier]

@franklinjavier I thought about creating a codemod for this, but since it has so many edge-cases that aren't straight-forward, it's better to do it manually yourself in each codebase

agree