rustclan•2y 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•2y 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•2y ago

Message Not Public

rustclan•2y 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•2y ago

Message Not Public

rustclan•2y ago

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

Unknown User•2y ago

Message Not Public

rustclan•2y 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•2y ago

Message Not Public

rustclan•2y 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•2y ago

Message Not Public

rustclan•2y 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.

Son•2y ago

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

Unknown User•2y ago

Message Not Public