Theo's Typesafe Cult•2y ago

avoid rendering more hooks: running trpc query based on supabase session's user

i have a router workspace with query getWorkspace that takes the current supabase session's user's UUID id and returns details of the workspace they're a member of

export const workspaceRouter = createTRPCRouter({
  getWorkspace: publicProcedure
    .input(
      z.object({
        user_id: z.string(),
      }),
    )
    .query(async ({ input, ctx }) => {
      const prisma = new PrismaClient()
      try {
        await prisma.$connect()
        const { user_id } = input

        const workspace = await ctx.prisma.company.findFirst({
          where: {
            members: {
              has: user_id,
            },
          },
        })

        return workspace
      } finally {
        await prisma.$disconnect()
      }
    }),
})

export const workspaceRouter = createTRPCRouter({
  getWorkspace: publicProcedure
    .input(
      z.object({
        user_id: z.string(),
      }),
    )
    .query(async ({ input, ctx }) => {
      const prisma = new PrismaClient()
      try {
        await prisma.$connect()
        const { user_id } = input

        const workspace = await ctx.prisma.company.findFirst({
          where: {
            members: {
              has: user_id,
            },
          },
        })

        return workspace
      } finally {
        await prisma.$disconnect()
      }
    }),
})

but on my /pages/today.tsx where i need that workspace info, it's throwing Unhandled Runtime Error Error: Rendered more hooks than during the previous render

import { type NextPage } from 'next'
import { api } from '~/utils/api'
import { DateTime } from 'luxon'
import { useEffect, useState } from 'react'
const Today: NextPage = () => {
const [user, setUser] = useState<User>()
useEffect(() => {
    const getUser = async () => {
      const {
        data: { session },
      } = await supabase.auth.getSession()

      if (!session) {
        console.log('no session')
      } else if (!session.user) {
        console.log('no user')
      } else {
        console.log('session.user: ', session.user)
        setUser(session.user)
      }
    }
    void getUser()
  }, [])

  if (typeof user !== 'undefined') {
    const temp_workspace = api.workspace.getWorkspace.useQuery({
      user_id: user.id,
    })
    console.log('temp: ', temp_workspace)
  }
}

export default Today

import { type NextPage } from 'next'
import { api } from '~/utils/api'
import { DateTime } from 'luxon'
import { useEffect, useState } from 'react'
const Today: NextPage = () => {
const [user, setUser] = useState<User>()
useEffect(() => {
    const getUser = async () => {
      const {
        data: { session },
      } = await supabase.auth.getSession()

      if (!session) {
        console.log('no session')
      } else if (!session.user) {
        console.log('no user')
      } else {
        console.log('session.user: ', session.user)
        setUser(session.user)
      }
    }
    void getUser()
  }, [])

  if (typeof user !== 'undefined') {
    const temp_workspace = api.workspace.getWorkspace.useQuery({
      user_id: user.id,
    })
    console.log('temp: ', temp_workspace)
  }
}

export default Today

22 Replies

barry•2y ago

Instead, set disabled to true or false Don't do hooks optionally, never.

Domcario•2y ago

sorry, what should i be disabling?

barry•2y ago

useQuery hook takes options, one of those are called disabled, takes in true or false Oh wait no it's called enabled lol

Domcario•2y ago

aight, i modified it to this but since supabase's type im importing for User can also be undefined, it's giving me that message. which is why i had the condition before. is there a better way to handle this?

  // if (typeof user !== 'undefined') {
  const temp_workspace = api.workspace.getWorkspace.useQuery(
    {
      user_id: user.id,
    },
    { enabled: false },
  )
  console.log('temp: ', temp_workspace)
  // }

  // if (typeof user !== 'undefined') {
  const temp_workspace = api.workspace.getWorkspace.useQuery(
    {
      user_id: user.id,
    },
    { enabled: false },
  )
  console.log('temp: ', temp_workspace)
  // }

barry•2y ago

  const temp_workspace = api.workspace.getWorkspace.useQuery(
    {
      user_id: user.id,
    },
    { enabled: user.id !== undefined },
  )

  const temp_workspace = api.workspace.getWorkspace.useQuery(
    {
      user_id: user.id,
    },
    { enabled: user.id !== undefined },
  )

Idk how Supabase's promises work but I'm assuming this would work Or asserting that typeof user.id === string should work too

Domcario•2y ago

hmm that won't get around the typeerror, since the user state is undefined until the getUser runs in useEffect

barry•2y ago

NOT equal undefined The not is important

Domcario•2y ago

whoops i forgot to change it back

barry•2y ago

What if you did this enabled: user && "id" in user

Domcario•2y ago

same issue, does order matter for useQuery's args or something? nvm def not order

barry•2y ago

I guess you can just do optional chaining

Domcario•2y ago

how would i go back to that and avoid the error we started with 😦 Unhandled Runtime Error Error: Rendered more hooks than during the previous render.

barry•2y ago

Just do user?.id ?

Domcario•2y ago

oh i misunderstood, let me try that that means i'll have to allow user_id: z.union([z.string(), z.undefined()]), in the trpc router's input right

barry•2y ago

Don't think so

Gaming

Programming

avoid rendering more hooks: running trpc query based on supabase session's user