Khaled Maher
TypeError: Cannot read property 'useState' of null
I followed the documentation to use
the
used in
and tried to use the hooks in the homepage
Error ->>
What I am missing?
here is the complete repo
https://github.com/maxios/chatclub-monorepo
@trpc/client in react. I am using Expo React Native and Expo App Router
here is the provider
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { trpc } from "../trpc";
import { useState } from "react";
import { httpBatchLink } from "@trpc/react-query";
export function TRPCOwnProvider({ children }: { children: React.ReactNode }) {
const [queryClient] = useState(() => new QueryClient());
const [trpcClient] = useState(() =>
trpc.createClient({
links: [
httpBatchLink({
url: "http://localhost:3000/trpc",
// You can pass any HTTP headers you wish here
async headers() {
return {
// authorization: getAuthCookie(),
};
},
}),
],
})
);
return (
<trpc.Provider client={trpcClient} queryClient={queryClient}>
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
</trpc.Provider>
);
}
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { trpc } from "../trpc";
import { useState } from "react";
import { httpBatchLink } from "@trpc/react-query";
export function TRPCOwnProvider({ children }: { children: React.ReactNode }) {
const [queryClient] = useState(() => new QueryClient());
const [trpcClient] = useState(() =>
trpc.createClient({
links: [
httpBatchLink({
url: "http://localhost:3000/trpc",
// You can pass any HTTP headers you wish here
async headers() {
return {
// authorization: getAuthCookie(),
};
},
}),
],
})
);
return (
<trpc.Provider client={trpcClient} queryClient={queryClient}>
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
</trpc.Provider>
);
}
trpc.ts
import { createTRPCReact } from '@trpc/react-query';
import type { AppRouter } from '@chatclub/backend';
export const trpc = createTRPCReact<AppRouter>();
import { createTRPCReact } from '@trpc/react-query';
import type { AppRouter } from '@chatclub/backend';
export const trpc = createTRPCReact<AppRouter>();
app/_layout.tsx
// Import your global CSS file
import React, { useState } from "react";
import "../global.css";
import { Stack } from "expo-router/stack";
import { TRPCOwnProvider } from "$/components/TRPCOwnProvider";
const AppLayout = () => {
return (
<TRPCOwnProvider>
<Stack/>
</TRPCOwnProvider>
)
};
export default AppLayout;
// Import your global CSS file
import React, { useState } from "react";
import "../global.css";
import { Stack } from "expo-router/stack";
import { TRPCOwnProvider } from "$/components/TRPCOwnProvider";
const AppLayout = () => {
return (
<TRPCOwnProvider>
<Stack/>
</TRPCOwnProvider>
)
};
export default AppLayout;
app/index.tsx
import * as React from "react";
import { View, ScrollView, StyleSheet, TextInput } from "react-native";
import { Appbar, Text, Button } from "react-native-paper";
import { trpc } from '../trpc';
const ChatRoomScreen = () => {
console.log('chatroomScreen')
const hello = trpc.hello.useQuery('Chatclub');
const sendMessageMutation = trpc.sendMessage.useMutation();
...
import * as React from "react";
import { View, ScrollView, StyleSheet, TextInput } from "react-native";
import { Appbar, Text, Button } from "react-native-paper";
import { trpc } from '../trpc';
const ChatRoomScreen = () => {
console.log('chatroomScreen')
const hello = trpc.hello.useQuery('Chatclub');
const sendMessageMutation = trpc.sendMessage.useMutation();
...
package.json
{
"name": "@chatclub/frontend",
"version": "1.0.0",
"main": "expo-router/entry",
"trustedDependencies": [],
"dependencies": {
"@tanstack/react-query": "^5.51.1",
"@trpc/client": "^11.0.0-rc.461",
"@trpc/react-query": "^11.0.0-rc.461",
"ajv": "^8.13.0",
"expo": "~51.0.8",
"expo-build-properties": "^0.12.1",
"expo-constants": "~16.0.1",
"expo-dev-client": "~4.0.14",
"expo-doctor": "^1.6.1",
"expo-linking": "~6.3.1",
"expo-router": "~3.5.14",
"tailwindcss": "^3.4.3"
},
"private": true
}
{
"name": "@chatclub/frontend",
"version": "1.0.0",
"main": "expo-router/entry",
"trustedDependencies": [],
"dependencies": {
"@tanstack/react-query": "^5.51.1",
"@trpc/client": "^11.0.0-rc.461",
"@trpc/react-query": "^11.0.0-rc.461",
"ajv": "^8.13.0",
"expo": "~51.0.8",
"expo-build-properties": "^0.12.1",
"expo-constants": "~16.0.1",
"expo-dev-client": "~4.0.14",
"expo-doctor": "^1.6.1",
"expo-linking": "~6.3.1",
"expo-router": "~3.5.14",
"tailwindcss": "^3.4.3"
},
"private": true
}
TypeError: Cannot read property 'useState' of null
This error is located at:
in TRPCProvider (created by TRPCOwnProvider)
in TRPCOwnProvider (created by AppLayout)
in AppLayout
in Unknown (created by Route())
in Suspense (created by Route())
in Route (created by Route())
in Route() (created by ContextNavigator)
in RNCSafeAreaProvider (created by SafeAreaProvider)
in SafeAreaProvider (created by wrapper)
in wrapper (created by ContextNavigator)
in EnsureSingleNavigator
in BaseNavigationContainer
in ThemeProvider
in NavigationContainerInner (created by ContextNavigator)
in ContextNavigator (created by ExpoRoot)
in ExpoRoot (created by App)
in App (created by ErrorOverlay)
in ErrorToastContainer (created by ErrorOverlay)
in ErrorOverlay (created by withDevTools(ErrorOverlay))
in withDevTools(ErrorOverlay)
in RCTView (created by CssInterop.View)
in CssInterop.View (created by AppContainer)
in RCTView (created by CssInterop.View)
in CssInterop.View (created by AppContainer)
in AppContainer
in main(RootComponent)
TypeError: Cannot read property 'useState' of null
This error is located at:
in TRPCProvider (created by TRPCOwnProvider)
in TRPCOwnProvider (created by AppLayout)
in AppLayout
in Unknown (created by Route())
in Suspense (created by Route())
in Route (created by Route())
in Route() (created by ContextNavigator)
in RNCSafeAreaProvider (created by SafeAreaProvider)
in SafeAreaProvider (created by wrapper)
in wrapper (created by ContextNavigator)
in EnsureSingleNavigator
in BaseNavigationContainer
in ThemeProvider
in NavigationContainerInner (created by ContextNavigator)
in ContextNavigator (created by ExpoRoot)
in ExpoRoot (created by App)
in App (created by ErrorOverlay)
in ErrorToastContainer (created by ErrorOverlay)
in ErrorOverlay (created by withDevTools(ErrorOverlay))
in withDevTools(ErrorOverlay)
in RCTView (created by CssInterop.View)
in CssInterop.View (created by AppContainer)
in RCTView (created by CssInterop.View)
in CssInterop.View (created by AppContainer)
in AppContainer
in main(RootComponent)
5 replies