Jonathan Posts

Jonathan

•Created by Jonathan on 5/16/2024 in #❓-help

TRPC completely broke

I have a project I haven't touched in only about a week, it was working and now every request over TRPC is broke. I have tried everything I can think of and I get responses like the attachment Here is part of my package.json

    "@t3-oss/env-nextjs": "^0.8.0",
    "@tanstack/react-query": "^5.36.2",
    "@trpc/client": "^10.45.2",
    "@trpc/next": "^10.45.2",
    "@trpc/react-query": "^10.45.2",
    "@trpc/server": "^10.45.2",

    "@t3-oss/env-nextjs": "^0.8.0",
    "@tanstack/react-query": "^5.36.2",
    "@trpc/client": "^10.45.2",
    "@trpc/next": "^10.45.2",
    "@trpc/react-query": "^10.45.2",
    "@trpc/server": "^10.45.2",

Everything related to api requests throw an error, but if it is on the server the db is running fine and such. This was an app that was created with the T3 Stack. I am out of ideas, anywhere I might should look?

5 replies

TtRPC

•Created by Jonathan on 1/30/2024 in #❓-help

T3 Stack TRPC used in Server Actions

Is there issues using the server calls of TRPC in a nextjs server action? I am seeing weird issues when running it in production that don't happen when running it local. I am trying to narrow it down but looking for a high level of "this shouldn't be an issue", or this could be an issue. I think it may be related to my user context depending on cookies, the more I have looked everything that is not in server actions seems to work but server actions seem to be flakey in production.

2 replies

TtRPC

•Created by Jonathan on 12/30/2023 in #❓-help

TRPCClientError: JSON Parse error: Single quotes (') are not allowed in JSON

I am getting this error when deployed but not when running locally.

TRPCClientError: JSON Parse error: Single quotes (') are not allowed in JSON

TRPCClientError: JSON Parse error: Single quotes (') are not allowed in JSON

Any idea on how to narrow this down?

4 replies

TtRPC

•Created by Jonathan on 11/22/2023 in #❓-help

useQuery never returning or hitting API

I have something off in my configuration, i copied most of the files from the ❯ npm create t3-app@latest example app to add to an exisitng app. I am trying to call the simple post.hello and i tis working on the server. but when I call it on the client side like:

const postResult = api.post.hello.useQuery({text:'Hello'});

const postResult = api.post.hello.useQuery({text:'Hello'});

It never hits the api or gets out of the loading state, what am I missing?

2 replies

TtRPC

•Created by Jonathan on 11/22/2023 in #❓-help

Type 'QueryClient' is missing the following properties from type 'QueryClient': queryCache, mutation

I am trying to setup a new project and doing my first client side query and getting this error:

Type 'QueryClient' is missing the following properties from type 'QueryClient': queryCache, mutationCache, logger, defaultOptions, and 4 more.

Type 'QueryClient' is missing the following properties from type 'QueryClient': queryCache, mutationCache, logger, defaultOptions, and 4 more.

This is my react.tsx

"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { loggerLink, unstable_httpBatchStreamLink } from "@trpc/client";
import { createTRPCReact } from "@trpc/react-query";
import { useState } from "react";


import { getUrl, transformer } from "./shared";
import { type AppRouter } from "@/server/api/root";

export const api = createTRPCReact<AppRouter>();

export function TRPCReactProvider(props: {
  children: React.ReactNode;
  cookies: string;
}) {
  const [queryClient] = useState(() => new QueryClient());

  const [trpcClient] = useState(() =>
    api.createClient({
      transformer,
      links: [
        loggerLink({
          enabled: (op) =>
            process.env.NODE_ENV === "development" ||
            (op.direction === "down" && op.result instanceof Error),
        }),
        unstable_httpBatchStreamLink({
          url: getUrl(),
          headers() {
            return {
              cookie: props.cookies,
              "x-trpc-source": "react",
            };
          },
        }),
      ],
    })
  );

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

"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { loggerLink, unstable_httpBatchStreamLink } from "@trpc/client";
import { createTRPCReact } from "@trpc/react-query";
import { useState } from "react";


import { getUrl, transformer } from "./shared";
import { type AppRouter } from "@/server/api/root";

export const api = createTRPCReact<AppRouter>();

export function TRPCReactProvider(props: {
  children: React.ReactNode;
  cookies: string;
}) {
  const [queryClient] = useState(() => new QueryClient());

  const [trpcClient] = useState(() =>
    api.createClient({
      transformer,
      links: [
        loggerLink({
          enabled: (op) =>
            process.env.NODE_ENV === "development" ||
            (op.direction === "down" && op.result instanceof Error),
        }),
        unstable_httpBatchStreamLink({
          url: getUrl(),
          headers() {
            return {
              cookie: props.cookies,
              "x-trpc-source": "react",
            };
          },
        }),
      ],
    })
  );

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

it is complaining at :

      <api.Provider client={trpcClient} queryClient={queryClient}>

      <api.Provider client={trpcClient} queryClient={queryClient}>

And this is my root layout:

import "./globals.css";
import type { Metadata } from "next";
import FlowbiteContext from "@/app/context/FlowbiteContext";
import Header from "@/components/header/header";
import { GetUser } from "@/utils/GetUser";
import { Inter } from "next/font/google";
import { cookies } from "next/headers";
import { TRPCReactProvider } from "@/trpc/react";


export const metadata: Metadata = {
  title: "MyApp",
};

const inter = Inter({ subsets: ["latin"] });

export default async function DefaultLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const user = await GetUser(cookies());

  return (
    <html lang="en bg-gray-100">
      <body className={inter.className + ' bg-gray-100'}>
        <TRPCReactProvider cookies={cookies().toString()}>
          <FlowbiteContext>
            <Header user={user} />
            {children}
          </FlowbiteContext>
        </TRPCReactProvider>
      </body>
    </html>
  );
}

import "./globals.css";
import type { Metadata } from "next";
import FlowbiteContext from "@/app/context/FlowbiteContext";
import Header from "@/components/header/header";
import { GetUser } from "@/utils/GetUser";
import { Inter } from "next/font/google";
import { cookies } from "next/headers";
import { TRPCReactProvider } from "@/trpc/react";


export const metadata: Metadata = {
  title: "MyApp",
};

const inter = Inter({ subsets: ["latin"] });

export default async function DefaultLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const user = await GetUser(cookies());

  return (
    <html lang="en bg-gray-100">
      <body className={inter.className + ' bg-gray-100'}>
        <TRPCReactProvider cookies={cookies().toString()}>
          <FlowbiteContext>
            <Header user={user} />
            {children}
          </FlowbiteContext>
        </TRPCReactProvider>
      </body>
    </html>
  );
}

What am I missing? The server side piece is working when querying from next.

6 replies

TtRPC

•Created by Jonathan on 11/6/2023 in #❓-help

Specify invalid queries from the server?

I have a TRPC app that I am writing and there are times I would like to invalidate queries on the client from a mutation on the server. I am not talking web sockets or anything like that, but just a standard way to invalidate multiple queries from the server just as part of the return from a mutation Is that possible?

2 replies