Get data before ANYTHING load
I am fetching data this way
export const Route = createFileRoute("/snippets/$snippetId")({
loader: ({ context: { queryClient }, params: { snippetId } }) => {
return queryClient.ensureQueryData(snippetQueryOption(snippetId));
},
component: SnippetDetailComponent,
});
and using this way:
const { data } = useSuspenseQuery(snippetQueryOption(snippetId));
my data has a property hasPassword, with this condition i need to display that detail content otherwise need to show a password field. Password protected content. my API don't give any data if I don't provide password, if that data has hasPassword true. how to fetch data get that field and display content conditionally.
currently i am doing this directly with react query without loader/suspense
6 Replies
rare-sapphire•4mo ago
First of all: is this a "meaningful" , personal password? Because this is a highly insecure approach
And I would definitely not stick that in a query key nor pass that in a GET request
rare-sapphire•4mo ago
Secondly, authentication/auth guard you'd generally want to do in a pathless wrapper route, see i.e. the authentication example: https://tanstack.com/router/latest/docs/framework/react/examples/authenticated-routes?path=examples%2Freact%2Fauthenticated-routes%2Fsrc%2Froutes%2F_auth.tsx
React TanStack Router Authenticated Routes Example | TanStack Route...
An example showing how to implement Authenticated Routes in React using TanStack Router.
rare-sapphire•4mo ago
In the wrapper route you could
redirect() the user to a login page but what you'd generally never do is keep the actual password around and pass it down
what you instead want is a session/auth cookie
Regardless, the password has no impact on the data (I assume) so it shouldn't be in the query key anyway because it'd lead to invalidation of the data when the password changes. You can leave it out and just pass it directly from the state in the fetch functionexotic-emeraldOP•4mo ago
not meaningless, you didn't understand the problem. authentication is different thing, and i know how to do that. this is not related to auth.
rare-sapphire•4mo ago
Context is important, especially if it looks like something else at first glance 😉
But in that case I don't necessarily see what's wrong with your current approach, you could split it up further into separate child components but the presence of that password is a state so that's hard to manage with a route
The bottom line I think is that you don't want to stick the password in a query string or a route param so you can't manage that state through there
exotic-emeraldOP•4mo ago
no authenticate in this site. user can create content. some content while create user can set password. so when they go to detail page i need check if that content has set password or not. if content has set password i need to show password input otherwise direct show content.
It works, what i want. but i am asking if there is any better TANSTACK way, something like inside beforeLoad or anything.