import { trpc } from "@/util/_trpc";

export default function Home() {
    const healthyQuery = trpc.healthy.useQuery();
    trpc.users.user.permissions.onGive.useSubscription(undefined, {
        onStarted() {
            console.log("Started");
        },
        onData(data) {
            console.log(data);
        }
    });
    
    return (
        <div>
            <h1>Home</h1>
            <p>Server is {healthyQuery.data === "OK" ? "Healthy" : "Dead"}</p>
            <p>This is the home page.</p>
        </div>
    );
}

import { trpc } from "@/util/_trpc";

export default function Home() {
    const healthyQuery = trpc.healthy.useQuery();
    trpc.users.user.permissions.onGive.useSubscription(undefined, {
        onStarted() {
            console.log("Started");
        },
        onData(data) {
            console.log(data);
        }
    });
    
    return (
        <div>
            <h1>Home</h1>
            <p>Server is {healthyQuery.data === "OK" ? "Healthy" : "Dead"}</p>
            <p>This is the home page.</p>
        </div>
    );
}

import routes from "./pages/_routes";
import { RouterProvider } from "react-router-dom"

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { createWSClient, httpBatchLink, wsLink, splitLink } from '@trpc/client';
import { useState } from 'react';
import { trpc } from '@/util/_trpc';
import Cookies from "js-cookie";

function App() {
    const headers: any = {};
    if (Cookies.get("token")) {
        headers["authorization"] = `Bearer ${Cookies.get("token")}`;
    }

    const ws = createWSClient({
        url: import.meta.env.VITE_WS_TRPC ?? "",
    })
    const [queryClient] = useState(() => new QueryClient());
    const [trpcClient] = useState(() =>
        trpc.createClient({
            links: [
                splitLink({
                    condition(op) {
                        return op.type === "subscription";
                    },
                    true: wsLink({
                        client: ws
                    }),
                    false: httpBatchLink({
                        url: import.meta.env.VITE_API_TRPC ?? "",
                        // You can pass any HTTP headers you wish here
                        async headers() {
                            return {
                                ...headers
                            };
                        },
                    }),
                }),
            ],
        }),
    );

    return (
        <trpc.Provider client={trpcClient} queryClient={queryClient}>
              <QueryClientProvider client={queryClient}>
                <RouterProvider router={routes} fallbackElement={<h1>Loading...</h1>} />
            </QueryClientProvider>
        </trpc.Provider>
    );
}

export default App;

import routes from "./pages/_routes";
import { RouterProvider } from "react-router-dom"

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { createWSClient, httpBatchLink, wsLink, splitLink } from '@trpc/client';
import { useState } from 'react';
import { trpc } from '@/util/_trpc';
import Cookies from "js-cookie";

function App() {
    const headers: any = {};
    if (Cookies.get("token")) {
        headers["authorization"] = `Bearer ${Cookies.get("token")}`;
    }

    const ws = createWSClient({
        url: import.meta.env.VITE_WS_TRPC ?? "",
    })
    const [queryClient] = useState(() => new QueryClient());
    const [trpcClient] = useState(() =>
        trpc.createClient({
            links: [
                splitLink({
                    condition(op) {
                        return op.type === "subscription";
                    },
                    true: wsLink({
                        client: ws
                    }),
                    false: httpBatchLink({
                        url: import.meta.env.VITE_API_TRPC ?? "",
                        // You can pass any HTTP headers you wish here
                        async headers() {
                            return {
                                ...headers
                            };
                        },
                    }),
                }),
            ],
        }),
    );

    return (
        <trpc.Provider client={trpcClient} queryClient={queryClient}>
              <QueryClientProvider client={queryClient}>
                <RouterProvider router={routes} fallbackElement={<h1>Loading...</h1>} />
            </QueryClientProvider>
        </trpc.Provider>
    );
}

export default App;

uncaught TypeError: Cannot read properties of undefined (reading 'onStarted')
    at Object.onStarted (createHooksInternal-f1d4019d.mjs:443:41)
    at Object.next (index.mjs:72:21)
    at Object.next (index.mjs:15:25)
    at Object.next (observable-ade1bad8.mjs:48:21)
    at Object.next (observable-ade1bad8.mjs:48:21)
    at Object.next (observable-ade1bad8.mjs:48:21)
    at Object.next (observable-ade1bad8.mjs:48:21)
    at Object.next (wsLink.mjs:259:34)
    at handleIncomingResponse (wsLink.mjs:119:13)
    at WebSocket.<anonymous> (wsLink.mjs:135:17)

uncaught TypeError: Cannot read properties of undefined (reading 'onStarted')
    at Object.onStarted (createHooksInternal-f1d4019d.mjs:443:41)
    at Object.next (index.mjs:72:21)
    at Object.next (index.mjs:15:25)
    at Object.next (observable-ade1bad8.mjs:48:21)
    at Object.next (observable-ade1bad8.mjs:48:21)
    at Object.next (observable-ade1bad8.mjs:48:21)
    at Object.next (observable-ade1bad8.mjs:48:21)
    at Object.next (wsLink.mjs:259:34)
    at handleIncomingResponse (wsLink.mjs:119:13)
    at WebSocket.<anonymous> (wsLink.mjs:135:17)

import routes from "./pages/_routes";
import { RouterProvider } from "react-router-dom"

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { createWSClient, httpBatchLink, wsLink } from '@trpc/client';
import { useState } from 'react';
import { trpc } from '@/util/_trpc';
import Cookies from "js-cookie";

function App() {
    const headers: any = {};
    if (Cookies.get("token")) {
        headers["authorization"] = `Bearer ${Cookies.get("token")}`;
    }

    const ws = createWSClient({
        url: import.meta.env.VITE_WS_TRPC ?? "",
    })
    const [queryClient] = useState(() => new QueryClient());
    const [trpcClient] = useState(() =>
        trpc.createClient({
            links: [
                httpBatchLink({
                    url: import.meta.env.VITE_API_TRPC ?? "",
                    // You can pass any HTTP headers you wish here
                    async headers() {
                        return {
                            ...headers
                        };
                    },
                }),
                wsLink({
                    client: ws
                })
            ],
        }),
    );

    return (
        <trpc.Provider client={trpcClient} queryClient={queryClient}>
              <QueryClientProvider client={queryClient}>
                <RouterProvider router={routes} fallbackElement={<h1>Loading...</h1>} />
            </QueryClientProvider>
        </trpc.Provider>
    );
}

export default App;

import routes from "./pages/_routes";
import { RouterProvider } from "react-router-dom"

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { createWSClient, httpBatchLink, wsLink } from '@trpc/client';
import { useState } from 'react';
import { trpc } from '@/util/_trpc';
import Cookies from "js-cookie";

function App() {
    const headers: any = {};
    if (Cookies.get("token")) {
        headers["authorization"] = `Bearer ${Cookies.get("token")}`;
    }

    const ws = createWSClient({
        url: import.meta.env.VITE_WS_TRPC ?? "",
    })
    const [queryClient] = useState(() => new QueryClient());
    const [trpcClient] = useState(() =>
        trpc.createClient({
            links: [
                httpBatchLink({
                    url: import.meta.env.VITE_API_TRPC ?? "",
                    // You can pass any HTTP headers you wish here
                    async headers() {
                        return {
                            ...headers
                        };
                    },
                }),
                wsLink({
                    client: ws
                })
            ],
        }),
    );

    return (
        <trpc.Provider client={trpcClient} queryClient={queryClient}>
              <QueryClientProvider client={queryClient}>
                <RouterProvider router={routes} fallbackElement={<h1>Loading...</h1>} />
            </QueryClientProvider>
        </trpc.Provider>
    );
}

export default App;

import { trpc } from "@/util/_trpc";

export default function Home() {
    const healthyQuery = trpc.healthy.useQuery();
    const onPermission = trpc.users.user.permissions.onGive.useSubscription();
    
    return (
        <div>
            <h1>Home</h1>
            <p>Server is {healthyQuery.data === "OK" ? "Healthy" : "Dead"}</p>
            <p>This is the home page.</p>
        </div>
    );
}

import { trpc } from "@/util/_trpc";

export default function Home() {
    const healthyQuery = trpc.healthy.useQuery();
    const onPermission = trpc.users.user.permissions.onGive.useSubscription();
    
    return (
        <div>
            <h1>Home</h1>
            <p>Server is {healthyQuery.data === "OK" ? "Healthy" : "Dead"}</p>
            <p>This is the home page.</p>
        </div>
    );
}