TypeError Cannot destructure property 'client' of 'useContext(...)' as it is null.
Original message was deleted
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"useUnknownInCatchVariables": false,
"jsx": "preserve",
"incremental": true,
"types": ["@types/styled-components"],
"paths": {
"*": [
"./node_modules/*",
]
},
"isolatedModules": true
},
"include": [
"next-env.d.ts",
"styled-components.d.ts",
"**/*.ts",
"**/*.tsx",
"./src/**/*.ts"
],
"exclude": ["node_modules"]
}import { httpBatchLink, loggerLink } from '@trpc/client';
import { createTRPCNext } from '@trpc/next';
import superjson from 'superjson';
import type { AppRouter } from "../server/routers/_app";
import SuperJSON from "superjson";
function getBaseUrl() {
if (typeof window !== 'undefined') {
return '';
}
if (process.env.VERCEL_URL) {
return `https://${process.env.VERCEL_URL}`;
}
if (process.env.RENDER_INTERNAL_HOSTNAME) {
return `http://${process.env.RENDER_INTERNAL_HOSTNAME}:${process.env.PORT}`;
}
return `http://127.0.0.1:${process.env.PORT ?? 3000}`;
}
export const trpc = createTRPCNext<AppRouter>({
config({ ctx }) {
return {
transformer: superjson,
links: [
httpBatchLink({
url: getBaseUrl() + '/api/trpc',
}),
],
};
},
ssr: false,
});import '../styles/globals.css';
import type {AppProps, AppType} from 'next/app';
import Theme from '../styles/Theme';
import { trpc } from '../utils/trpc';
const MyApp:AppType=({ Component, pageProps }: AppProps)=> {
return (
<Theme>
<Component {...pageProps} />
</Theme>
);
}
export default trpc.withTRPC(MyApp);import * as trpcNext from '@trpc/server/adapters/next';
import { createContext } from '../../../server/context';
import { appRouter } from '../../../server/routers/_app';
export default trpcNext.createNextApiHandler({
router: appRouter,
createContext,
});import { Context } from "./context";
import {initTRPC, TRPCError} from '@trpc/server';
import superjson from 'superjson';
import { OpenApiMeta } from 'trpc-openapi';
const t = initTRPC.context<Context>().meta<OpenApiMeta>().create({
transformer: superjson,
errorFormatter({ shape }) {
return shape;
},
});
export const router = t.router;
export const publicProcedure = t.procedure;
const isAuthed = t.middleware(({ next, ctx }) => {
if (!ctx.user) {
throw new TRPCError({message:"UNAUTHORIZED",code: 'UNAUTHORIZED' });
}
return next({
ctx: {
user: ctx.user,
},
});
});
export const hasCloudmate = t.middleware(({next,ctx})=>{
if (!ctx.cloudmateUserObject || !ctx.cloudmateAsanaObject) {
throw new TRPCError({message:"CLOUDMATE NOT COMPLETELY SETUP",code: "PRECONDITION_FAILED" });
}
if(!ctx.ownerUserObject || !ctx.ownerAsanaObject){
throw new TRPCError({message:"CREATOR USER NOT COMPLETELY SETUP",code: "PRECONDITION_FAILED" });
}
return next();
});
// you can reuse this for any procedure
export const protectedProcedure = t.procedure.use(isAuthed);
export const middleware = t.middleware;
export const mergeRouters = t.mergeRouters;import { trpc } from "../../utils/trpc";
import { useEffect, useState } from "react";
const TestPage = () => {
const [userData, setUserData] = useState<any>();
const [orgData, setOrgData] = useState<any>();
const { data: users } = trpc.user.listUsers.useQuery();
const { data: organizations } = trpc.workspace.getWorkspaces.useQuery({});
console.log("Orgs: ", organizations);
useEffect(() => {
setUserData(users);
setOrgData(organizations);
console.log("user state", userData);
}, [users, userData, organizations, orgData]);
if (!users) return;
return (
<div>
</div>
);
};
export default TestPage;