import { createFileRoute } from '@tanstack/react-router'
import * as React from 'react'
import { Link, Outlet } from '@tanstack/react-router'
import { useSuspenseQuery } from '@tanstack/react-query'
import { postsQueryOptions } from '../postsQueryOptions'
export const Route = createFileRoute('/posts')({
loader: ({ context: { queryClient } }) =>
queryClient.ensureQueryData(postsQueryOptions),
component: PostsLayoutComponent,
})
function PostsLayoutComponent() {
const postsQuery = useSuspenseQuery(postsQueryOptions)
const posts = postsQuery.data
return (
<div className="p-2 flex gap-2">
<ul className="list-disc pl-4">
{[...posts, { id: 'i-do-not-exist', title: 'Non-existent Post' }].map(
(post) => {
return (
<li key={post.id} className="whitespace-nowrap">
<Link
to="/posts/$postId"
params={{
postId: post.id,
}}
className="block py-1 text-blue-600 hover:opacity-75"
activeProps={{ className: 'font-bold underline' }}
>
<div>{post.title.substring(0, 20)}</div>
</Link>
</li>
)
},
)}
</ul>
<hr />
<Outlet />
</div>
)
}
import { createFileRoute } from '@tanstack/react-router'
import * as React from 'react'
import { Link, Outlet } from '@tanstack/react-router'
import { useSuspenseQuery } from '@tanstack/react-query'
import { postsQueryOptions } from '../postsQueryOptions'
export const Route = createFileRoute('/posts')({
loader: ({ context: { queryClient } }) =>
queryClient.ensureQueryData(postsQueryOptions),
component: PostsLayoutComponent,
})
function PostsLayoutComponent() {
const postsQuery = useSuspenseQuery(postsQueryOptions)
const posts = postsQuery.data
return (
<div className="p-2 flex gap-2">
<ul className="list-disc pl-4">
{[...posts, { id: 'i-do-not-exist', title: 'Non-existent Post' }].map(
(post) => {
return (
<li key={post.id} className="whitespace-nowrap">
<Link
to="/posts/$postId"
params={{
postId: post.id,
}}
className="block py-1 text-blue-600 hover:opacity-75"
activeProps={{ className: 'font-bold underline' }}
>
<div>{post.title.substring(0, 20)}</div>
</Link>
</li>
)
},
)}
</ul>
<hr />
<Outlet />
</div>
)
}
Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.
Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.
