FrogeF
tRPC3y ago
48 replies
Froge

'useInfiniteQuery' hook disappeared after moving to Turborepo

I am using Turborepo with Next.js with the following layout, originally a T3 app
-
/apps/app

-
/packages/api


The
useInfiniteQuery
hook seems to have dissapeared after migrating, and I can't get it back.
I am using
@trpc/next
on the clientside,
@trpc/react-query
is installed, and everything seems fine?

I'd love some guidance, I'm a little stuck...

/apps/app/src/utils/api.ts

import { httpBatchLink, loggerLink } from "@trpc/client";
import { createTRPCNext } from "@trpc/next";
import superjson from "superjson";

import { type AppRouter } from "@myapp/api";

const getBaseUrl = () => {
    if (typeof window !== "undefined") return ""; // browser should use relative url
    if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`; // SSR should use vercel url
    return `http://localhost:${process.env.PORT ?? 3000}`; // dev SSR should use localhost
};

    config() {
        return {
            transformer: superjson,
            links: [
                loggerLink({
                    enabled: (opts) =>
                        process.env.NODE_ENV === "development" ||
                        (opts.direction === "down" &&
                            opts.result instanceof Error),
                }),
                httpBatchLink({
                    url: `${getBaseUrl()}/api/trpc`,
                }),
            ],
        };
    },
    ssr: false,
});


/packages/api/src/routers/job.ts

    findMany: publicProcedure
        .input(
            z.object({
                where: JobPostWhereInputSchema.optional(),
                take: z.number().min(1).max(100).optional(),
                cursor: z.string().nullish(),
                order: JobPostOrderByWithRelationInputSchema.optional(),
            })
        )
        .query(...)

`/packages/api/src/root.ts

import { createTRPCProxyClient, httpBatchLink } from "@trpc/client";
import superjson from "superjson";
import { job } from "./routers/job";
import { profile } from "./routers/profile";
import { createTRPCRouter } from "./trpc";

export const appRouter = createTRPCRouter({
    profile,
    job,
});

export type AppRouter = typeof appRouter;

export const client = createTRPCProxyClient<AppRouter>({
    transformer: superjson,
    links: [
        httpBatchLink({
            url: "http://localhost:3000/api/trpc",
        }),
    ],
});
Was this page helpful?