Lois Posts - tRPC

Lois

•Created by Lois on 10/24/2023 in #❓-help

nextjs app router, "fs", "os", "zlib-sync" and trpc experimental edge Router

Environement: Turborepo + pnpm What's wrong: when I tried to build nextjs, the error is like this warp block https://app.warp.dev/block/h9b0V2covbaCMv8boeSpvc What I have: a package with discord.js and includes "fs" module, and imported via trpc/[trpc/route.ts in nextjs. I tried some fixes to configure webpack in next.config liks so, but it didn't work:

const config = {
    webpack: (config, {isServer}) => {
        if (!isServer) {
            config.resolve = {
                ...config.resolve,
                fallback: {
                    "zlib-sync": false,
                    "os": false,
                    "net": false,
                    "dns": false,
                    "tls": false,
                    "fs": false,
                    "request": false,
                },
            };
        }
        return config;
    },
    reactStrictMode: true,

const config = {
    webpack: (config, {isServer}) => {
        if (!isServer) {
            config.resolve = {
                ...config.resolve,
                fallback: {
                    "zlib-sync": false,
                    "os": false,
                    "net": false,
                    "dns": false,
                    "tls": false,
                    "fs": false,
                    "request": false,
                },
            };
        }
        return config;
    },
    reactStrictMode: true,

I have also disabled edge runtime in trpc edge router, relevant code be:

"use client";

import type { edgeRouter } from "@comcord/api";
// import { loggerLink } from "@trpc/client";
import { experimental_createTRPCNextAppDirClient } from "@trpc/next/app-dir/client";
import { experimental_nextHttpLink } from "@trpc/next/app-dir/links/nextHttp";
import superjson from "superjson";

import { getEdgeUrl } from "./shared";

export const edgeApiForClient = experimental_createTRPCNextAppDirClient<
  typeof edgeRouter
>({
  config() {
    return {
      transformer: superjson,
      links: [
        // loggerLink({
        //   enabled: (op) => true,
        // }),
        experimental_nextHttpLink({
          batch: true,
          url: getEdgeUrl() + "/api/trpc",
          headers() {
            return {
              "x-trpc-source": "client",
            };
          },
        }),
      ],
    };
  },
});

"use client";

import type { edgeRouter } from "@comcord/api";
// import { loggerLink } from "@trpc/client";
import { experimental_createTRPCNextAppDirClient } from "@trpc/next/app-dir/client";
import { experimental_nextHttpLink } from "@trpc/next/app-dir/links/nextHttp";
import superjson from "superjson";

import { getEdgeUrl } from "./shared";

export const edgeApiForClient = experimental_createTRPCNextAppDirClient<
  typeof edgeRouter
>({
  config() {
    return {
      transformer: superjson,
      links: [
        // loggerLink({
        //   enabled: (op) => true,
        // }),
        experimental_nextHttpLink({
          batch: true,
          url: getEdgeUrl() + "/api/trpc",
          headers() {
            return {
              "x-trpc-source": "client",
            };
          },
        }),
      ],
    };
  },
});

and

import type { NextRequest } from "next/server";
import { edgeCreateContext, edgeRouter } from "@packages/api";
import { fetchRequestHandler } from "@trpc/server/adapters/fetch";

//export const runtime = "edge";

const handler = (req: NextRequest) =>
  fetchRequestHandler({
    endpoint: "/api/trpc",
    router: edgeRouter,
    req: req,
    createContext: () => edgeCreateContext({ req }),
    onError: ({ error, path }) => {
      console.log("Error in tRPC handler (edge) on path", path);
      console.error(error);
    },
  });

export { handler as GET, handler as POST };

import type { NextRequest } from "next/server";
import { edgeCreateContext, edgeRouter } from "@packages/api";
import { fetchRequestHandler } from "@trpc/server/adapters/fetch";

//export const runtime = "edge";

const handler = (req: NextRequest) =>
  fetchRequestHandler({
    endpoint: "/api/trpc",
    router: edgeRouter,
    req: req,
    createContext: () => edgeCreateContext({ req }),
    onError: ({ error, path }) => {
      console.log("Error in tRPC handler (edge) on path", path);
      console.error(error);
    },
  });

export { handler as GET, handler as POST };

Not sure if more information is needed for help?

2 replies

TtRPC

•Created by Lois on 3/6/2023 in #❓-help

Data Visualisation/Charts

is anyone using tRPC on data visualisation (say bar chart/line chart) in a scenario close to a banking app or Yahoo finance? would love to see some examples

2 replies

TtRPC

•Created by Lois on 1/12/2023 in #❓-help

Hardware IoT API

Maybe it's a wrong place to ask but out of curious: Does anyone have experience building API for hardware/IoT device to control and monitor them from frontend? How's the process? How long did it take? How's the investment come back?

4 replies

TtRPC

•Created by Lois on 1/9/2023 in #❓-help

A lot of WHY

9 replies

TtRPC

•Created by Lois on 12/29/2022 in #❓-help

transformers, tensor.js, PyTorch and tRPC

dumb question: does anyone has experience with tensorflow.js? is there any major obstacle to use tensorflow.js rather than PyTorch and tensor? Just wondering if there could be any future difficulty using t3 stack while having transformers and embedding models to generate output at the backend

1 replies