rustclan
rustclan2y ago

TRPC waiting until the query has completed

Hey. I've just found out about TRPC and I love it. However, I was wondering if there is a way to make it so the code below my query doesn't run until the query has completed, without having to make an external function or make use of a useeffect hook in order to use await? Is there a property of some sort which I can use to stop the page from rendering? The code below causes an infinite signIn loop due to the data not being there on the initial page render. But, I can't check if !guilds.data, because sometimes it wont return anything, due to an invalid token. Which means there is no good way to identify when to force a signIn for the user.
const accessToken = trpc.auth.getAccessToken.useQuery();
const guilds = trpc.api.getGuilds.useQuery({ accessToken: accessToken.data });

if (!accessToken.data || !guilds.data) signIn("discord")
const accessToken = trpc.auth.getAccessToken.useQuery();
const guilds = trpc.api.getGuilds.useQuery({ accessToken: accessToken.data });

if (!accessToken.data || !guilds.data) signIn("discord")
13 Replies
rustclan
rustclan2y ago
edit:
const accessToken = trpc.auth.getAccessToken.useQuery();
const guilds = trpc.api.getGuilds.useQuery({ accessToken: accessToken.data });

if (!accessToken.isFetched || !guilds.isFetched) return <div>Loading...</div>;
if (!accessToken.data || !guilds.data) signIn("discord");
const accessToken = trpc.auth.getAccessToken.useQuery();
const guilds = trpc.api.getGuilds.useQuery({ accessToken: accessToken.data });

if (!accessToken.isFetched || !guilds.isFetched) return <div>Loading...</div>;
if (!accessToken.data || !guilds.data) signIn("discord");
this is what I went with.
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
rustclan
rustclan2y ago
hmm interesting. Thanks. I'll have a look into that 🙂 This will be useful I suppose since getGuilds relies on accessToken i should use getGuilds in the onSuccess event?
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
rustclan
rustclan2y ago
oh right okay, ill have a look into doing that as well. Thank you 🙂
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
rustclan
rustclan2y ago
If I understand correctly, this is the way to do this is: When creating the context for the user, I find their access token and return it to them.
export const createContextInner = async (opts: CreateContextOptions) => {
const user = await prisma.account.findFirst({
where: {
userId: opts.session?.user?.id,
},
});
if (opts.session?.user) {
opts.session.user.accessToken = user?.access_token;
}

return {
session: opts.session,
prisma,
accessToken: user?.access_token,
};
};
export const createContextInner = async (opts: CreateContextOptions) => {
const user = await prisma.account.findFirst({
where: {
userId: opts.session?.user?.id,
},
});
if (opts.session?.user) {
opts.session.user.accessToken = user?.access_token;
}

return {
session: opts.session,
prisma,
accessToken: user?.access_token,
};
};
And then, I can use ctx.session to return the accessToken, and userInformation to the user:
export const authRouter = router({
getSession: publicProcedure.query(({ ctx }) => {
return ctx.session;
}),
export const authRouter = router({
getSession: publicProcedure.query(({ ctx }) => {
return ctx.session;
}),
My component/page
const Overview = () => {
const session = trpc.auth.getSession.useQuery();
if (session.isFetched && !session.data.user.accessToken) return <>Unauthed...</>; // or the `onSuccess` event, once I look into using that!
const Overview = () => {
const session = trpc.auth.getSession.useQuery();
if (session.isFetched && !session.data.user.accessToken) return <>Unauthed...</>; // or the `onSuccess` event, once I look into using that!
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
rustclan
rustclan2y ago
Yep it works 🙂 Thank you very much for the help. My usecase for getSession is to check if that specific user has access to the page (if they don't, then it will force them to login again and redirect them to a different page). This also would be used to protect my endpoints so people cant update/delete content which they don't have access for.
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
rustclan
rustclan2y ago
Yep. That makes sense. Thanks a bunch! I love TRPC, I am currently migrating to using it from using react/python backend, and it was such a pain to make each endpoint. Took alot of different files/code to do it, this makes it much simpler.
A Dan
A Dan2y ago
Wht vscode extension are you using to get the gui lsp?
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View