niko Comments - Answer Overflow

niko

Explore posts from servers

TtRPC TTCTheo's Typesafe Cult DTDrizzle Team

Posts Comments

TTCTheo's Typesafe Cult

•Created by niko on 11/15/2024 in #questions

Struggling to Choose a Type-Safe Backend for a Podcast Streaming Service Without a Monorepo

its standard

20 replies

TTCTheo's Typesafe Cult

•Created by niko on 11/15/2024 in #questions

Struggling to Choose a Type-Safe Backend for a Podcast Streaming Service Without a Monorepo

so in my use case graphql is the best option i guess right?

20 replies

TTCTheo's Typesafe Cult

•Created by niko on 11/15/2024 in #questions

Struggling to Choose a Type-Safe Backend for a Podcast Streaming Service Without a Monorepo

okay that looks fine

20 replies

TTCTheo's Typesafe Cult

•Created by niko on 11/15/2024 in #questions

Struggling to Choose a Type-Safe Backend for a Podcast Streaming Service Without a Monorepo

is there tool for type generation such as graphql-cli? i'm building rn for trpc, made it as well to use that for my use case but i was getting CORS errors in another project when i was making request

20 replies

TTCTheo's Typesafe Cult

•Created by niko on 11/15/2024 in #questions

Struggling to Choose a Type-Safe Backend for a Podcast Streaming Service Without a Monorepo

wow I didnt know about that

20 replies

TTCTheo's Typesafe Cult

•Created by niko on 11/15/2024 in #questions

Struggling to Choose a Type-Safe Backend for a Podcast Streaming Service Without a Monorepo

also I want to pick good architecture from beginning because when it'll scale I dont want to try changing some stuff in backend

20 replies

TtRPC

•Created by niko on 11/15/2024 in #❓-help

Building CLI tool for trpc for type generation

8 replies

TtRPC

•Created by niko on 11/15/2024 in #❓-help

Building CLI tool for trpc for type generation

if i make axios.get request i get response with 200 status without any problems but if i use trpc useQuery it goes on CORS error

8 replies

TtRPC

•Created by niko on 11/15/2024 in #❓-help

Building CLI tool for trpc for type generation

btw i use t3-app for both projects

8 replies

TtRPC

•Created by niko on 11/15/2024 in #❓-help

Building CLI tool for trpc for type generation

when im sending request from localhost:3001, this is what is loggin in locahost:3000 terminal

❌ tRPC failed on <no-path>: Missing content-type header
 OPTIONS /api/trpc/getUsers?batch=1&input=%7B%220%22%3A%7B%22json%22%3Anull%2C%22meta%22%3A%7B%22values%22%3A%5B%22undefined%22%5D%7D%7D%7D 415 in

❌ tRPC failed on <no-path>: Missing content-type header
 OPTIONS /api/trpc/getUsers?batch=1&input=%7B%220%22%3A%7B%22json%22%3Anull%2C%22meta%22%3A%7B%22values%22%3A%5B%22undefined%22%5D%7D%7D%7D 415 in

but i already put that header literally everywhere

8 replies

TtRPC

•Created by niko on 11/15/2024 in #❓-help

Building CLI tool for trpc for type generation

and i tried to resolve by doing this, i though it would fix it but no

export { handler as GET, handler as POST, handler as OPTIONS };

export { handler as GET, handler as POST, handler as OPTIONS };

8 replies

TtRPC

•Created by niko on 11/15/2024 in #❓-help

Building CLI tool for trpc for type generation

so for first time i had that issue it was sending OPTIONS request on trpc and i was getting cors errors for that

8 replies

TtRPC

•Created by niko on 11/15/2024 in #❓-help

Building CLI tool for trpc for type generation

this is what second project react.tsx look like for making requests

"use client";

import { QueryClientProvider, type QueryClient } from "@tanstack/react-query";
import { loggerLink, unstable_httpBatchStreamLink } from "@trpc/client";
import { createTRPCReact } from "@trpc/react-query";
import { type inferRouterInputs, type inferRouterOutputs } from "@trpc/server";
import { useState } from "react";
import SuperJSON from "superjson";

import { type AppRouter } from "@/schema/trpc-types"; // generated types
import { createQueryClient } from "./query-client";

let clientQueryClientSingleton: QueryClient | undefined = undefined;
const getQueryClient = () => {
  if (typeof window === "undefined") {
    return createQueryClient();
  }
  return (clientQueryClientSingleton ??= createQueryClient());
};

export const api = createTRPCReact<AppRouter>();
export type RouterInputs = inferRouterInputs<AppRouter>;
export type RouterOutputs = inferRouterOutputs<AppRouter>;

export function TRPCReactProvider(props: { children: React.ReactNode }) {
  const queryClient = getQueryClient();

  const [trpcClient] = useState(() =>
    api.createClient({
      links: [
        loggerLink({
          enabled: (op) =>
            process.env.NODE_ENV === "development" ||
            (op.direction === "down" && op.result instanceof Error),
        }),
        unstable_httpBatchStreamLink({
          transformer: SuperJSON,
          url: "http://localhost:3000/api/trpc", // main project api endpoint
          headers: () => {
            const headers = new Headers();
            headers.set("x-trpc-source", "nextjs-react");
            headers.set("Content-Type", "application/json");
            return headers;
          },
          fetch(url, options) {
            return fetch(url, {
              ...options,
              credentials: "include",
            });
          },
        }),
      ],
    }),
  );

  return (
    <QueryClientProvider client={queryClient}>
      <api.Provider client={trpcClient} queryClient={queryClient}>
        {props.children}
      </api.Provider>
    </QueryClientProvider>
  );
}

"use client";

import { QueryClientProvider, type QueryClient } from "@tanstack/react-query";
import { loggerLink, unstable_httpBatchStreamLink } from "@trpc/client";
import { createTRPCReact } from "@trpc/react-query";
import { type inferRouterInputs, type inferRouterOutputs } from "@trpc/server";
import { useState } from "react";
import SuperJSON from "superjson";

import { type AppRouter } from "@/schema/trpc-types"; // generated types
import { createQueryClient } from "./query-client";

let clientQueryClientSingleton: QueryClient | undefined = undefined;
const getQueryClient = () => {
  if (typeof window === "undefined") {
    return createQueryClient();
  }
  return (clientQueryClientSingleton ??= createQueryClient());
};

export const api = createTRPCReact<AppRouter>();
export type RouterInputs = inferRouterInputs<AppRouter>;
export type RouterOutputs = inferRouterOutputs<AppRouter>;

export function TRPCReactProvider(props: { children: React.ReactNode }) {
  const queryClient = getQueryClient();

  const [trpcClient] = useState(() =>
    api.createClient({
      links: [
        loggerLink({
          enabled: (op) =>
            process.env.NODE_ENV === "development" ||
            (op.direction === "down" && op.result instanceof Error),
        }),
        unstable_httpBatchStreamLink({
          transformer: SuperJSON,
          url: "http://localhost:3000/api/trpc", // main project api endpoint
          headers: () => {
            const headers = new Headers();
            headers.set("x-trpc-source", "nextjs-react");
            headers.set("Content-Type", "application/json");
            return headers;
          },
          fetch(url, options) {
            return fetch(url, {
              ...options,
              credentials: "include",
            });
          },
        }),
      ],
    }),
  );

  return (
    <QueryClientProvider client={queryClient}>
      <api.Provider client={trpcClient} queryClient={queryClient}>
        {props.children}
      </api.Provider>
    </QueryClientProvider>
  );
}