"Invalid Hook Call" with minimal example

I am getting react invalid hook call errors when trying to add the tRPC react query integration to a project. I am still scaffolding the project, so it isn't much more complicated than a minimal example. The only weird thing I am doing is trying to use deno.

I started with one of the vite react templates (I think it was a deno based template, but it was based on deno v1 so I had to make a few small adjustments). It has a barebones hono server hosting tRPC with an adapter. All I am trying to do right now is follow the guide for adding the trpc and react query providers to App.tsx.

import "./App.css";
import { TestModule } from "./TestModule.tsx";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { httpBatchLink } from "@trpc/client";
import { useState } from "react";
import { trpc } from "./utils/trpc.ts";

function App() {
  const [queryClient] = useState(() => new QueryClient());
  const [trpcClient] = useState(() =>
    trpc.createClient({
      links: [
        httpBatchLink({
          url: "http://localhost:3000/trpc",
        }),
      ],
    })
  );

  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>
        <TestModule />
      </QueryClientProvider>
    </trpc.Provider>
  );
}

export default App;

import "./App.css";
import { TestModule } from "./TestModule.tsx";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { httpBatchLink } from "@trpc/client";
import { useState } from "react";
import { trpc } from "./utils/trpc.ts";

function App() {
  const [queryClient] = useState(() => new QueryClient());
  const [trpcClient] = useState(() =>
    trpc.createClient({
      links: [
        httpBatchLink({
          url: "http://localhost:3000/trpc",
        }),
      ],
    })
  );

  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>
        <TestModule />
      </QueryClientProvider>
    </trpc.Provider>
  );
}

export default App;

import "./App.css";
import { TestModule } from "./TestModule.tsx";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { httpBatchLink } from "@trpc/client";
import { useState } from "react";
import { trpc } from "./utils/trpc.ts";

function App() {
  const [queryClient] = useState(() => new QueryClient());
  const [trpcClient] = useState(() =>
    trpc.createClient({
      links: [
        httpBatchLink({
          url: "http://localhost:3000/trpc",
        }),
      ],
    })
  );

  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>
        <TestModule />
      </QueryClientProvider>
    </trpc.Provider>
  );
}

export default App;

import "./App.css";
import { TestModule } from "./TestModule.tsx";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { httpBatchLink } from "@trpc/client";
import { useState } from "react";
import { trpc } from "./utils/trpc.ts";

function App() {
  const [queryClient] = useState(() => new QueryClient());
  const [trpcClient] = useState(() =>
    trpc.createClient({
      links: [
        httpBatchLink({
          url: "http://localhost:3000/trpc",
        }),
      ],
    })
  );

  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>
        <TestModule />
      </QueryClientProvider>
    </trpc.Provider>
  );
}

export default App;

"Invalid Hook Call" with minimal example

Similar Threads

"Invalid Hook Call" with minimal example

Similar Threads

Similar Threads

Similar Threads