T
tRPC

TRPC waiting until the query has completed

TRPC waiting until the query has completed

Rrustclan11/30/2022
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")
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.
UUUnknown User11/30/2022
Message Not Public
Sign In & Join Server To View
Rrustclan11/30/2022
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?
UUUnknown User11/30/2022
2 Messages Not Public
Sign In & Join Server To View
Rrustclan11/30/2022
oh right okay, ill have a look into doing that as well. Thank you 🙂
UUUnknown User11/30/2022
Message Not Public
Sign In & Join Server To View
Rrustclan11/30/2022
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!
UUUnknown User11/30/2022
Message Not Public
Sign In & Join Server To View
Rrustclan11/30/2022
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.
UUUnknown User11/30/2022
Message Not Public
Sign In & Join Server To View
Rrustclan11/30/2022
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.
TTCI12/11/2022
Wht vscode extension are you using to get the gui lsp?
UUUnknown User12/11/2022
2 Messages Not Public
Sign In & Join Server To View

Looking for more? Join the community!

T
tRPC

TRPC waiting until the query has completed

Join Server
Recommended Posts
trpc with headless cmsHello, Is there any example with trpc and headless CMS or is there anypoint to use trpc for project Is it possible to call a query from another query defined in the same router?Say I have some code like the following: ``` t.router({ compute_all: t.procedure .query(Testing with React Testing LibraryHi! I am trying to test my ```DestinationForm``` component using react testing library. My test is sProxy TRPC server to another clientI've two TRPC servers, one essentially acts like a proxy, it validates auth and based on a specific Unexpected tokenhi, kindly help me on this oneDelay IsLoading....i'm trying to delay a loading spinner from appearing if the api takes less than 200ms to get the datClearing CacheHow do I clear the queryCache for a particular query using the trpc context? If that's not possible,context at times emptyam new to trpc. i am usin iron-session with nextjs and its awesome. am forwarding the context. but sTRPC Testing Wrapper - Unit Testing components that contain a query (Not testing the query it self)This is my wrapper reference from trpc: https://github.com/WeirdoGit/NewGitRepo/blob/162cd9317c0e978query and mutate promise on nextI've followed the guide "Usage with Next.js" and now I only have the `useQuery` and use `useMutationtesting a trpc hooki'm brand new to testing and need some help with writing a test for a hook that is returning an objeCAS AuthenticationSo long story short. My University is using CAS as authentication provider. I was thinking that I coDifference in type inference for vanilla client?Hello, querying an endpoint with the vanilla tRPC client but at runtime the actual result isn't the Zod Error MiddlewareHey lovely people. At Cal.com we make heavy use of `zod` for data validation. I was wondering if theclear cookie onErrorI'd like to clear a cookie (in nextjs) when a 403 error happens. I've been looking at the global errRequest context from getServerSidePropsThe docs of tRPC context https://trpc.io/docs/v10/context ``` export async function createContext(oAuth with passport.jsEvening all, Has anyone successfully setup trpc with passport.js for auth?Object keeps getting overwrittenI feel like i'm missing something fundamental here. when I add a new entry into object ``b`` it resAccessToken for API callsWhat would be the best approach to pass the AccessToken from NextAuth Session to the Http Client whiRequest or Response Specification Definition DocumentI am developing a backend service using trpc, but I need to dispatch trpc in another programming lan