Parent Data
Loading "Optimizing Metadata for User Info"
Run locally for transcripts
π¨βπΌ 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
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...
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.
- π
metaexport - π
useMatcheshook - How you get thatmatchesin components. We don't need it in this exercise but it may be interesting to you for further exploration.
