Industrial•2y ago

Cannot read properties of undefined (reading 'createTRPCReact')

I'm trying to use it in an Astro project. https://github.com/Industrial/test-astro-solid/blob/main/src/lib/trpc.ts I think I implemented it as per the example https://trpc.io/docs/react#2-create-trpc-hooks

GitHub

test-astro-solid/trpc.ts at main · Industrial/test-astro-solid

Contribute to Industrial/test-astro-solid development by creating an account on GitHub.

Usage with React | tRPC

How to use and setup tRPC in React

4 Replies

backbone•2y ago

I don't know why.but please try pnpm install again or restart VSCode.

Industrial•2y ago

@backbone I did rm -rf node_modules && pnpm install and same thing @backbone could you run git clone git@github.com:Industrial/test-astro-solid.git && cd test-astro-solid && pnpm i && pnpm dev to reproduce ?

backbone•2y ago

Sorry, I would try this repo

Industrial•2y ago

Thank you 🙂 I got it! I'm using SolidJS and not React so I don't need react-query.

import { createResource } from 'solid-js'
import type { JSX } from 'solid-js/jsx-runtime'

import { trpc } from '@/lib/trpc'

export const Test = (): JSX.Element => {
  const userId = '123'
  const [user, { mutate, refetch }] = createResource(userId, async (id: string) => {
    return await trpc.getUserById.query(id)
  })
  return <div>USER? {JSON.stringify(user())}</div>
}

import { createResource } from 'solid-js'
import type { JSX } from 'solid-js/jsx-runtime'

import { trpc } from '@/lib/trpc'

export const Test = (): JSX.Element => {
  const userId = '123'
  const [user, { mutate, refetch }] = createResource(userId, async (id: string) => {
    return await trpc.getUserById.query(id)
  })
  return <div>USER? {JSON.stringify(user())}</div>
}

That's all you need 🙂