TRPC waiting until the query has completed

Rrustclan

11/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 User

11/30/2022

Message Not Public

Rrustclan

11/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 User

11/30/2022

2 Messages Not Public

Rrustclan

11/30/2022

oh right okay, ill have a look into doing that as well. Thank you 🙂

UUUnknown User

11/30/2022

Message Not Public

Rrustclan

11/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 User

11/30/2022

Message Not Public

Rrustclan

11/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 User

11/30/2022

Message Not Public

Rrustclan

11/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.

TTCI

12/11/2022

Wht vscode extension are you using to get the gui lsp?

UUUnknown User

12/11/2022

2 Messages Not Public

Looking for more? Join the community!

tRPC

TRPC waiting until the query has completed

Join Server

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 s Proxy 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 one Delay IsLoading....i'm trying to delay a loading spinner from appearing if the api takes less than 200ms to get the dat Clearing 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 s TRPC 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/162cd9317c0e978 query and mutate promise on nextI've followed the guide "Usage with Next.js" and now I only have the `useQuery` and use `useMutation testing a trpc hooki'm brand new to testing and need some help with writing a test for a hook that is returning an obje CAS AuthenticationSo long story short. My University is using CAS as authentication provider. I was thinking that I co Difference 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 the clear cookie onErrorI'd like to clear a cookie (in nextjs) when a 403 error happens. I've been looking at the global err Request context from getServerSidePropsThe docs of tRPC context https://trpc.io/docs/v10/context ``` export async function createContext(o Auth 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 res AccessToken for API callsWhat would be the best approach to pass the AccessToken from NextAuth Session to the Http Client whi Request or Response Specification Definition DocumentI am developing a backend service using trpc, but I need to dispatch trpc in another programming lan