Parent Data

πŸ‘¨β€πŸ’Ό Let's go deeper. When the user shares their notes page (like /kody/notes), it should show something like this:
  • Title: Kody's Notes | Epic Notes
  • Description: Checkout Kody's 11 notes on Epic Notes
For this, we'll need to add a meta export to the route.
And then let's say we've got a note like this:
{
	"title": "Not bears",
	"content": "Although you may have heard people call them koala 'bears', these awesome animals aren’t bears at all – they are in fact marsupials. A group of mammals, most marsupials have pouches where their newborns develop."
}
When we're on that note's page, it should have:
  • Title: Not bears | Kody's Notes | Epic Notes
  • Description: Although you may have heard people call them koala "bears", these awesome animals aren’t bears at...
For this, we'll need to add a meta export to the route.
The challenge here is those routes don't load enough data for that. The index route doesn't load any data at all and the note route only loads the note, not the owner information.
We could definitely add more data in the loader, but even better would be to access the data that's already there. Here's how you do that:
// borrowed and modified from the remix docs
import { type loader as projectDetailsLoader } from './$pid'

export async function loader({ params }: LoaderArgs) {
	return json({ task: await getTask(params.tid) })
}

export const meta: MetaFunction<
	typeof loader,
	{ 'routes/project/$pid': typeof projectDetailsLoader }
> = ({ data, matches }) => {
	const project = matches.find(
		match => match.id === 'routes/project/$pid',
	).project
	const task = data.task
	return [{ title: `${project.name}: ${task.name}` }]
}
It may be helpful to you to add a console.log(matches) in the meta before changing much else so you get an idea of what that object looks like. It's especially helpful to find the ID of the route you're looking for.
Let's add some great meta exports for these routes and access our parent's data to do it.

Access Denied

You must login or register for the workshop to view the diff.

Check out this video to see how the diff tab works.