TypeError Cannot destructure property 'client' of 'useContext(...)' as it is null.

Original message was deleted

Rammstein•4/1/23, 6:49 PM

HI @Vinlock
I am facing the same problem can you help me out?

Rammstein•4/3/23, 6:30 PM

{
  "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"]
}

{
  "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"]
}

Rammstein•4/3/23, 6:42 PM

utils/trpc.ts

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 { 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,
});

__app.tsx

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 '../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);

trpc/[trpc].ts

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 * 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,
});

Rammstein•4/3/23, 6:42 PM

trpc.ts

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 { 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;

this is just a test page i am using
/pages/test/trpc-test.tsx

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;

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;