useEffect and useMutation error about conditional rendering of hooks

I am using t3 stack with tRPC, and I am trying to mark all emails as seen when the page loads by using useEffect, but this seems to give me an error about conditional rendering of hooks. Are there any other ways I can accomplish this?

  const { mutate: markAsSeen } = api.paMail.markAsSeen.useMutation({
    onError: () => {
      ToastComponent({ message: "Database error", type: "error" });
    },
  });

  useEffect(() => {
    markAsSeen({ sentTo: paPlayer!.id });
  }, [markAsSeen]);

  const { mutate: markAsSeen } = api.paMail.markAsSeen.useMutation({
    onError: () => {
      ToastComponent({ message: "Database error", type: "error" });
    },
  });

  useEffect(() => {
    markAsSeen({ sentTo: paPlayer!.id });
  }, [markAsSeen]);

Alex / KATT 🐱•344d ago

You probably have an if statement before usage of some hook

𝛈𝞂𝗿𝞈𝒆𝒈𝖏𝝰𝛈 𝐜0𝟃3𝗿•344d ago

No, it reports the error at this code: markAsSeen({ sentTo: paPlayer!.id }); I believe it is because I am calling a hook inside another hook @alex / KATT

Alex / KATT 🐱•344d ago

try upgrading to 10.27.2

Maj•343d ago

For me calling the useQuery hook in useEffect is not possible i get an error instantly

Alex / KATT 🐱•343d ago

can any of you make a reproduction? hard to help when i'm guessing the context

𝛈𝞂𝗿𝞈𝒆𝒈𝖏𝝰𝛈 𝐜0𝟃3𝗿•343d ago

I gave up and ended up using a button instead, it solved my issue Seems like calling a hook inside another hook is what causes it

tRPC Join

4.8KMembers

View on Discord

Guide to create an adapterIs there a guide on the docs that explains the basics to create an adapter?Does tRPC websocket client supports wss protocol?After changing the websocket client url from ws to wss, it fails to connect. Tested out the connecti Get the type of context after middlewareHow can I get the type of the context of `adminProcedure` from `export const adminProcedure = public [How To] Properly use trpc UseQuery based on currently selected itemI have a component with a video element and a flatlist. I want to utilize a trpc query to get the vi Data from useQuery is inferred as data: {} | undefinedMy server query returns data from database via ElectroDB. TypeScript can statically infer all proper Cannot access 't' before initializationHi, I'm migrating my app to a mono repo but I just can't get past this error for some reason `Cannot tRPC Middleware consuming memory limit on VercelHi all, I'm running into a weird error where my tRPC middleware to enforce that a user is authed, is Using react-query parameters in tRPC for useQueryHello, the useQuery from react-query can take parameters such cacheTime, staleTime, refetchOnWindowF tRPC type error on turborepo```Types of property 'query' are incompatible. Type 'inferHandlerFn<{}>' is not assignable to ty Stack for expo?Can someone recommend a stack for an expo project? I'm considering trpc + fastify + fly.io, but hav Implementing a "Prisma model converter middleware"Bit of a fancy name, but if you've ever worked with Symfonys param converters (especially the Doctri Senior Full Stack Developer is Ready.✍️ Skill Set HTML/CSS/JS, TS React/Next.js, Angular/RxJs, Tailwind CSS Wo Suggested way to invalidate queries on a component that is used on multiple pages.Please suggest me a way I can handle the following situation in the best possinle manner. Coinsider Setting up trpc behind AWS API gateway and authorizing using a lambdaCurrent setup: - trpc api, containing both public an private procedures. Let's call them `posts.list setMutationDefaults for optimistic updatesI have a `preferences` router, with a `get` query and a `set` mutation. I had optimistic updates set Using tRPC in React SPA with Django backendis that possible? Do I need to create an AppRouter and put that inside my django backend files? How Typing a shared TRPC provider for testingContext: - We have a monorepo with several micro-frontends which use Next. - We're moving to using t Response promise resolves before endpoint finished processingI want to interact with OpenAI's API in my Next.js + tRPC app. It seems that the my frontend is not tRPC onErrorI am using tRPC with Fastify and would like to be able to report issues when we get an error. https Code structure for a large monorepo using nx + tRPCWe have a large monorepo with a single tRPC API that will be used by several web clients and other c