can't access property Symbol.for("trpc_untypedClient"), client is undefined
hey guys, just tried to get into tRPC and use it with react query: after setting up the provider and using it like this, I'll get the error above:
in my provider, I'll got the following:
what is wrong here? anyone does have a idea?
const onClick = async () => {
try {
console.log("clicked");
const response = await increaseStreakQuery.mutateAsync();
console.log(response);
} catch (error) {
console.error("Error increasing streak:", error);
}
}; const onClick = async () => {
try {
console.log("clicked");
const response = await increaseStreakQuery.mutateAsync();
console.log(response);
} catch (error) {
console.error("Error increasing streak:", error);
}
};in my provider, I'll got the following:
function makeQueryClient() {
return new QueryClient({
queryCache: new QueryCache({
onError: (error) => {
const requestId = extractRequestId(error);
if (requestId) {
Sentry.setContext("request", { id: requestId });
}
Sentry.captureException(error);
},
}),
mutationCache: new MutationCache({
onError: (error, _, __, mutation) => {
console.log("Mutation Cache Error");
const requestId = extractRequestId(error);
if (requestId) {
Sentry.setContext("request", { id: requestId });
}
Sentry.captureException(error);
},
}),
});
}
let browserQueryClient: QueryClient | undefined = undefined;
function getQueryClient() {
if (typeof window === "undefined") {
// Server: always make a new query client
return makeQueryClient();
} else {
// Browser: make a new query client if we don't already have one
// This is very important, so we don't re-make a new client if React
// suspends during the initial render. This may not be needed if we
// have a suspense boundary BELOW the creation of the query client
if (!browserQueryClient) browserQueryClient = makeQueryClient();
return browserQueryClient;
}
}
export function Providers({ children }: { children: ReactNode }) {
const queryClient = getQueryClient();
const [trpcClient] = useState(trpc);
const analytics = useAnalytics();
return (
<QueryClientProvider client={queryClient}>
<TRPCProvider trpcClient={trpcClient} queryClient={queryClient}>
....
</TRPCProvider>
</QueryClientProvider>
);function makeQueryClient() {
return new QueryClient({
queryCache: new QueryCache({
onError: (error) => {
const requestId = extractRequestId(error);
if (requestId) {
Sentry.setContext("request", { id: requestId });
}
Sentry.captureException(error);
},
}),
mutationCache: new MutationCache({
onError: (error, _, __, mutation) => {
console.log("Mutation Cache Error");
const requestId = extractRequestId(error);
if (requestId) {
Sentry.setContext("request", { id: requestId });
}
Sentry.captureException(error);
},
}),
});
}
let browserQueryClient: QueryClient | undefined = undefined;
function getQueryClient() {
if (typeof window === "undefined") {
// Server: always make a new query client
return makeQueryClient();
} else {
// Browser: make a new query client if we don't already have one
// This is very important, so we don't re-make a new client if React
// suspends during the initial render. This may not be needed if we
// have a suspense boundary BELOW the creation of the query client
if (!browserQueryClient) browserQueryClient = makeQueryClient();
return browserQueryClient;
}
}
export function Providers({ children }: { children: ReactNode }) {
const queryClient = getQueryClient();
const [trpcClient] = useState(trpc);
const analytics = useAnalytics();
return (
<QueryClientProvider client={queryClient}>
<TRPCProvider trpcClient={trpcClient} queryClient={queryClient}>
....
</TRPCProvider>
</QueryClientProvider>
);what is wrong here? anyone does have a idea?
