Showing pending inside the request?

Aacronie

9/20/2023

I am using trpc with nextjs but when I am using hooks they're just not returning anything? Like it makes the request but it goes as pending and just blocks everything

Aacronie

9/20/2023

Aacronie

9/20/2023

  const { data: news } = api.news.getAllNews.useQuery();

I noticed this seems to be happening with the hooks only Because I am using server side calls in some places by creating a caller

Aacronie

9/20/2023

query logs

Aacronie

9/20/2023

    "@trpc/client": "^10.38.3",
    "@trpc/next": "^10.38.3",
    "@trpc/react-query": "^10.38.3",

    "@trpc/client": "^10.38.3",
    "@trpc/next": "^10.38.3",
    "@trpc/react-query": "^10.38.3",

    "next": "13.4.12",

and next version

- wait compiling /api/trpc/[trpc] (client and server)...
- event compiled successfully in 605 ms (142 modules)

- wait compiling /api/trpc/[trpc] (client and server)...
- event compiled successfully in 605 ms (142 modules)

the trpc server seems to be compiling

import { createNextApiHandler } from "@trpc/server/adapters/next";
import { withIronSessionApiRoute } from "iron-session/next";
import { env } from "@/env.mjs";
import { appRouter } from "@/server/api/root";
import { createTRPCContext } from "@/server/api/trpc";
import { NextApiRequest, NextApiResponse } from "next";
import { sessionOptions } from "@/utils/session";

const handler = (req: NextApiRequest, res: NextApiResponse) => {
  return createNextApiHandler({
    router: appRouter,
    createContext: createTRPCContext,
    onError:
      env.NODE_ENV === "development"
        ? ({ path, error }) => {
            console.error(
              `❌ tRPC failed on ${path ?? "<no-path>"}: ${error.message}`,
            );
          }
        : undefined,
  })(req, res);
};
export default withIronSessionApiRoute(handler, sessionOptions);

import { createNextApiHandler } from "@trpc/server/adapters/next";
import { withIronSessionApiRoute } from "iron-session/next";
import { env } from "@/env.mjs";
import { appRouter } from "@/server/api/root";
import { createTRPCContext } from "@/server/api/trpc";
import { NextApiRequest, NextApiResponse } from "next";
import { sessionOptions } from "@/utils/session";

const handler = (req: NextApiRequest, res: NextApiResponse) => {
  return createNextApiHandler({
    router: appRouter,
    createContext: createTRPCContext,
    onError:
      env.NODE_ENV === "development"
        ? ({ path, error }) => {
            console.error(
              `❌ tRPC failed on ${path ?? "<no-path>"}: ${error.message}`,
            );
          }
        : undefined,
  })(req, res);
};
export default withIronSessionApiRoute(handler, sessionOptions);

this is how the handler looks like anyone got any idea why this could be happening? happens with both mutations and queries a normal request works to the api

const createInnerTRPCContext = (opts: CreateContextOptions) => {
  console.log("DB FROM INNER CONTEXT", opts.db);
  return {
    db: opts.db,
    request: opts.request,
  };
};

const createInnerTRPCContext = (opts: CreateContextOptions) => {
  console.log("DB FROM INNER CONTEXT", opts.db);
  return {
    db: opts.db,
    request: opts.request,
  };
};

even this doesn't log.. I don't know whats wrong at this point

FForkMeDaddy

9/26/2023

Having the same problem

AKAlex / KATT 🐱

9/27/2023